side bar link props externalized

Author: Francesco Pagnamenta

app/configs/base.config.ts

@@ -19,6 +19,8 @@ const base = {
   companyName: getEnvVariable(env, 'COMPANY_NAME', false, 'CSCS'),
   serviceName: getEnvVariable(env, 'SERVICE_NAME', false, 'firecrest-web-ui'),
   supportUrl: getEnvVariable(env, 'SUPPORT_URL', false),
+  repoUrl: getEnvVariable(env, 'REPO_URL', false),
+  docUrl: getEnvVariable(env, 'DOC_URL', false),
 }
 
 export default base

app/layouts/AppLayout.tsx

@@ -21,18 +21,22 @@ interface AppLayoutProps {
   environment: string
   appVersion: string
   companyName: string
-  supportUrl: string
   authUser: AuthUser
   notificationMessages: Array<NotificationMessage>
+  supportUrl: string | null
+  docUrl: string | null
+  repoUrl: string | null
 }
 
 const AppLayout: React.FC<AppLayoutProps> = ({
   environment,
   appVersion,
   companyName,
-  supportUrl,
   authUser,
   notificationMessages,
+  supportUrl,
+  docUrl,
+  repoUrl,
 }: AppLayoutProps) => {
   const [sidebarOpen, setSidebarOpen] = useState<boolean>(false)
   return (
@@ -45,6 +49,8 @@ const AppLayout: React.FC<AppLayoutProps> = ({
           sidebarOpen={sidebarOpen}
           setSidebarOpen={setSidebarOpen}
           supportUrl={supportUrl}
+          docUrl={docUrl}
+          repoUrl={repoUrl}
         />
         <div className='md:pl-64 flex flex-col flex-1 min-h-screen'>
           <Header setSidebarOpen={setSidebarOpen} authUser={authUser} />

app/layouts/Sidebar.tsx

@@ -38,9 +38,17 @@ interface SidebarProps {
   sidebarOpen: boolean
   setSidebarOpen: () => void
   supportUrl: string | null
+  docUrl: string | null
+  repoUrl: string | null
 }
 
-const Sidebar: React.FC<any> = ({ sidebarOpen, setSidebarOpen, supportUrl = null }: any) => {
+const Sidebar: React.FC<any> = ({
+  sidebarOpen,
+  setSidebarOpen,
+  supportUrl = null,
+  docUrl = null,
+  repoUrl = null,
+}: any) => {
   const location = useLocation()
 
   const userNavigation = [{ name: 'Dashboard', path: '/', icon: HomeIcon }]
@@ -54,18 +62,28 @@ const Sidebar: React.FC<any> = ({ sidebarOpen, setSidebarOpen, supportUrl = null
     },
   ]
 
-  const secondaryNavigation: any = [
-    { name: 'Documentation', url: 'https://products.cscs.ch/firecrest/', icon: DocumentTextIcon },
-    {
+  const secondaryNavigation: any = []
+
+  if (docUrl && docUrl !== '') {
+    secondaryNavigation.push({
+      name: 'Documentation',
+      url: docUrl,
+      icon: DocumentTextIcon,
+    })
+  }
+
+  if (repoUrl && repoUrl !== '') {
+    secondaryNavigation.push({
       name: 'Github repo',
-      url: 'https://github.com/eth-cscs/firecrest',
+      url: repoUrl,
       icon: CubeTransparentIcon,
-    },
-  ]
+    })
+  }
+
   if (supportUrl && supportUrl !== '') {
     secondaryNavigation.push({
       name: 'Get support',
-      url: 'https://support.cscs.ch',
+      url: supportUrl,
       icon: ChatBubbleLeftEllipsisIcon,
     })
   }

app/routes/_app.tsx

@@ -37,6 +37,8 @@ export const loader: LoaderFunction = async ({ request }: LoaderFunctionArgs) =>
       appVersion: base.appVersion,
       companyName: base.companyName,
       supportUrl: base.supportUrl,
+      repoUrl: base.repoUrl,
+      docUrl: base.docUrl,
       authUser: auth.user,
       notificationMessages: notificationMessages,
     },
@@ -48,14 +50,16 @@ export const loader: LoaderFunction = async ({ request }: LoaderFunctionArgs) =>
 
 export default function AppLayoutRoute() {
   const data = useLoaderData()
-  const { appVersion, companyName, supportUrl, environment, authUser, notificationMessages }: any =
+  const { appVersion, companyName, supportUrl, repoUrl, docUrl, environment, authUser, notificationMessages }: any =
     data
   return (
     <AppLayout
       environment={environment}
       appVersion={appVersion}
       companyName={companyName}
       supportUrl={supportUrl}
+      repoUrl={repoUrl}
+      docUrl={docUrl}
       authUser={authUser}
       notificationMessages={notificationMessages}
     />