[OGUI-1699] Display configuration keys

Configuration/webapp/app/components/config-navigator/ConfigNavigator.tsx

@@ -0,0 +1,56 @@
+/**
+ * @license
+ * Copyright 2019-2020 CERN and copyright holders of ALICE O2.
+ * See http://alice-o2.web.cern.ch/copyright for details of the copyright holders.
+ * All rights not expressly granted are reserved.
+ *
+ * This software is distributed under the terms of the GNU General Public
+ * License v3 (GPL Version 3), copied verbatim in the file "COPYING".
+ *
+ * In applying this license CERN does not waive the privileges and immunities
+ * granted to it by virtue of its status as an Intergovernmental Organization
+ * or submit itself to any jurisdiction.
+ */
+
+import { List } from '@mui/material';
+import { useEffect, useState } from 'react';
+import ConfigNavigatorItem from './ConfigNavigatorItem';
+
+/**
+ * ConfigNavigator component
+ * Represents the configuration navigator sidebar.
+ * @returns {React.ReactElement} ConfigNavigator
+ */
+export const ConfigNavigator = () => {
+  const [configKeys, setConfigKeys] = useState<string[]>([]);
+  const [isError, setIsError] = useState(false);
+
+  const fetchConfigurationKeys = async () => {
+    try {
+      const res = await fetch('http://localhost:8080/control/api/configurations');
+      const data = (await res.json()) as string[];
+      const newConfigKeys = data?.map((key) => key.split('/').pop() ?? '');
+      setConfigKeys(newConfigKeys);
+    } catch (_error) {
+      // temporarily disable the linting rule for this line
+      // fetching will be refactored once Tanstack Query is introduced
+      // eslint-disable-next-line no-console
+      console.error('Error while fetching configuration keys', _error);
+      setIsError(true);
+    }
+  };
+
+  useEffect(() => {
+    void fetchConfigurationKeys();
+  }, []);
+
+  return (
+    <List className="config_navigator">
+      {isError ? (
+        <p>Error while fetching configuration keys</p>
+      ) : (
+        configKeys?.map((text) => <ConfigNavigatorItem key={text} title={text} />)
+      )}
+    </List>
+  );
+};

Configuration/webapp/app/components/config-navigator/ConfigNavigatorItem.tsx

@@ -0,0 +1,45 @@
+/**
+ * @license
+ * Copyright 2019-2020 CERN and copyright holders of ALICE O2.
+ * See http://alice-o2.web.cern.ch/copyright for details of the copyright holders.
+ * All rights not expressly granted are reserved.
+ *
+ * This software is distributed under the terms of the GNU General Public
+ * License v3 (GPL Version 3), copied verbatim in the file "COPYING".
+ *
+ * In applying this license CERN does not waive the privileges and immunities
+ * granted to it by virtue of its status as an Intergovernmental Organization
+ * or submit itself to any jurisdiction.
+ */
+
+import { type FC } from 'react';
+import { ListItem, ListItemButton, ListItemIcon, ListItemText } from '@mui/material';
+
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faFile } from '@fortawesome/free-solid-svg-icons';
+
+interface ConfigNavigatorItemProps {
+  title: string;
+  onClick?: () => void;
+}
+
+/**
+ * ConfigNavigatorItem component
+ * Represents an item in the configuration navigator.
+ * @param {ConfigNavigatorItemProps} props - The props of the component.
+ * @param {string} props.title - The title of the configuration item.
+ * @param {Function} props.onClick - Callback function to handle item click.
+ * @returns {React.ReactElement} ConfigNavigatorItem
+ */
+const ConfigNavigatorItem: FC<ConfigNavigatorItemProps> = ({ title, onClick }) => (
+  <ListItem style={{ paddingTop: 5, paddingBottom: 5 }} className="config_navigator__item">
+    <ListItemButton onClick={onClick} color="red" sx={{ borderRadius: 2, padding: 0 }}>
+      <ListItemIcon>
+        <FontAwesomeIcon icon={faFile} style={{ margin: 'auto' }} />
+      </ListItemIcon>
+      <ListItemText primary={title} />
+    </ListItemButton>
+  </ListItem>
+);
+
+export default ConfigNavigatorItem;

Configuration/webapp/app/components/layout/MainLayout.tsx

@@ -14,25 +14,21 @@
 
 import { Box } from '@mui/material';
 import { type FC, type PropsWithChildren } from 'react';
-import { LeftDrawer } from './drawer/LeftDrawer';
-import { Content } from './content/Content';
 
 /**
  * MainLayout component
  * Represents the main layout of the application, including the left drawer and content area.
  * @param {PropsWithChildren} props - Component props.
+ * @param {ReactElement} props.children - The children elements to render inside main layout.
  * @returns {React.ReactElement} MainLayout
  */
-const MainLayout: FC<PropsWithChildren> = ({ children }) => (
+export const MainLayout: FC<PropsWithChildren> = ({ children }) => (
   <Box
     sx={{
       display: 'flex',
       height: '100vh',
     }}
   >
-    <LeftDrawer />
-    <Content>{children}</Content>
+    {children}
   </Box>
 );
-
-export default MainLayout;

Configuration/webapp/app/components/layout/content/ContentHeader.tsx

@@ -21,11 +21,11 @@ interface ContentHeaderProps {
 }
 
 /**
- * ContentHeader component
- * Represents the header of the content area in the application layout.
- * It displays the current path and includes a user section.
- * @param {ContentHeaderProps} props - Component props.
- * @returns {React.ReactElement} ContentHeader
+ * Content component
+ * Represents the header of the content area.
+ * @param {ContentHeaderProps} props - The props of the component.
+ * @param {string} props.currentPath - Current configuration path.
+ * @returns {React.ReactElement} Content
  */
 export const ContentHeader: FC<ContentHeaderProps> = ({ currentPath }) => (
   <Toolbar

Configuration/webapp/app/components/layout/drawer/LeftDrawer.tsx

@@ -12,18 +12,21 @@
  * or submit itself to any jurisdiction.
  */
 
-import { Box, Drawer, List, ListItem, ListItemText } from '@mui/material';
+import { type FC, type PropsWithChildren } from 'react';
+import { Box, Drawer } from '@mui/material';
 import { LeftDrawerFooter } from './LeftDrawerFooter';
 import { LeftDrawerHeader } from './LeftDrawerHeader';
 
-const DRAWER_WIDTH = 250;
+const DRAWER_WIDTH = 300;
 
 /**
  * LeftDrawer component
  * Represents the left sidebar of the application layout.
+ * @param {PropsWithChildren} props - The props of the component.
+ * @param {ReactElement} props.children - The children elements to render inside the drawer.
  * @returns {ReactElement} LeftDrawer
  */
-export const LeftDrawer = () => (
+export const LeftDrawer: FC<PropsWithChildren> = ({ children }) => (
   <Drawer
     sx={{
       width: DRAWER_WIDTH,
@@ -40,15 +43,7 @@ export const LeftDrawer = () => (
     className="left-drawer"
   >
     <LeftDrawerHeader />
-    <Box sx={{ overflow: 'auto', flexGrow: 1 }}>
-      <List>
-        {['Item 1', 'Item 2', 'Item 3', 'Item 4'].map((text) => (
-          <ListItem key={text}>
-            <ListItemText primary={text} />
-          </ListItem>
-        ))}
-      </List>
-    </Box>
+    <Box sx={{ overflow: 'auto', flexGrow: 1 }}>{children}</Box>
     <LeftDrawerFooter />
   </Drawer>
 );

Configuration/webapp/app/components/user-section/UserSection.tsx

@@ -12,8 +12,8 @@
  * or submit itself to any jurisdiction.
  */
 
-import { useState, type FC, type MouseEvent } from 'react';
 import { Box, IconButton, Menu, MenuItem, Avatar } from '@mui/material';
+import { useState, type FC, type MouseEvent } from 'react';
 import { getSessionData } from '~/services/session';
 
 interface UserSectionProps {

Configuration/webapp/app/root.tsx

@@ -24,10 +24,12 @@ import {
 import type { Route } from './+types/root';
 import './app.css';
 import '@aliceo2/web-ui/Frontend/css/src/bootstrap.css';
-
 import { Spinner } from '~/ui/spinner';
 
-import MainLayout from './components/layout/MainLayout';
+import { MainLayout } from './components/layout/MainLayout';
+import { LeftDrawer } from './components/layout/drawer/LeftDrawer';
+import { Content } from './components/layout/content/Content';
+import { ConfigNavigator } from './components/config-navigator/ConfigNavigator';
 
 /**
  * Root component
@@ -45,7 +47,12 @@ export function Layout({ children }: { children: React.ReactNode }) {
         <Links />
       </head>
       <body>
-        <MainLayout>{children}</MainLayout>
+        <MainLayout>
+          <LeftDrawer>
+            <ConfigNavigator />
+          </LeftDrawer>
+          <Content>{children}</Content>
+        </MainLayout>
         <ScrollRestoration />
         <Scripts />
       </body>

Configuration/webapp/package.json

@@ -18,6 +18,9 @@
     "@aliceo2/web-ui": "^2.7.4",
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.0",
+    "@fortawesome/fontawesome-svg-core": "^6.7.2",
+    "@fortawesome/free-solid-svg-icons": "^6.7.2",
+    "@fortawesome/react-fontawesome": "^0.2.2",
     "@mui/material": "^7.1.1",
     "@react-router/node": "7.5.3",
     "isbot": "^5",

Configuration/webapp/test/public/page-root-mocha.spec.ts

@@ -111,4 +111,40 @@ describe('`pageRoot` test-suite', function () {
     const userSectionMenu = await page.$$('.user-section__menu');
     assert.strictEqual(userSectionMenu.length, 1);
   });
+
+  it('should successfully display configurations list', async function () {
+    if (page === null) {
+      assert.equal('Page is null', 'test suite failed');
+      return;
+    }
+
+    const configNavigator = await page.$$('.config_navigator');
+    assert.strictEqual(configNavigator.length, 1);
+  });
+
+  it('should successfully display configurations list items', async function () {
+    if (page === null || url === null) {
+      assert.equal('Page is null', 'test suite failed');
+      return;
+    }
+
+    const res = await fetch('http://localhost:8080/control/api/configurations');
+    const data = await res.json();
+
+    const configNavigatorItems = await page.$$('.config_navigator__item');
+    assert.strictEqual(configNavigatorItems.length, data?.length ?? 0);
+  });
+
+  it('should display configurations list', async function () {
+    if (page === null || url === null) {
+      assert.equal('Page is null', 'test suite failed');
+      return;
+    }
+
+    const res = await fetch('http://localhost:8080/control/api/configurations');
+    const data = await res.json();
+
+    const configNavigatorItems = await page.$$('.config_navigator__item');
+    assert.strictEqual(configNavigatorItems.length, data?.length ?? 0);
+  });
 });