Merge branch 'dev' into feature/TKN/OGUI-1788/vault-services

Author: dwedr

Configuration/webapp/app/api/axiosInstance.ts

@@ -21,7 +21,6 @@ const axiosInstance = axios.create({
   baseURL: API_URL,
   headers: {
     'Content-Type': 'application/json',
-    'User-Agent': 'axios 0.21.1',
   },
   withCredentials: false,
 });

Configuration/webapp/app/api/mutations/useConfigurationMutation.ts

@@ -0,0 +1,47 @@
+/**
+ * @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 { useMutation, useQueryClient } from '@tanstack/react-query';
+import axiosInstance from '../axiosInstance';
+import { CONFIGURATION_QUERY_KEY } from '../query/useConfigurationQuery';
+import { CONFIGURATION_RESTRICTIONS_QUERY_KEY } from '../query/useConfigurationRestrictionsQuery';
+import type { FormValue } from '~/components/form/types';
+
+/**
+ * useConfigurationMutation hook
+ * Provides a mutation to save configuration data.
+ * @param {string} configurationName - The name of the configuration to save.
+ * @returns {UseMutationResult} The mutation result.
+ */
+export const useConfigurationMutation = (configurationName: string) => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: async (configuration: FormValue) => {
+      const response = await axiosInstance.put<FormValue>(
+        `configurations/${configurationName}`,
+        JSON.stringify({ configuration }),
+      );
+      return response.data;
+    },
+    onSuccess: () => {
+      void queryClient.invalidateQueries({
+        queryKey: [CONFIGURATION_QUERY_KEY, configurationName],
+      });
+      void queryClient.invalidateQueries({
+        queryKey: [CONFIGURATION_RESTRICTIONS_QUERY_KEY, configurationName],
+      });
+    },
+  });
+};

Configuration/webapp/app/api/query/useConfigurationQuery.ts

@@ -14,7 +14,7 @@
 
 import { useQuery } from '@tanstack/react-query';
 import axiosInstance from '../axiosInstance';
-import type { FormItem } from '~/components/form/Form';
+import type { FormValue } from '~/components/form/types';
 
 export const CONFIGURATION_QUERY_KEY = 'configuration';
 
@@ -23,6 +23,6 @@ export const useConfigurationQuery = (configuration: string) =>
     queryKey: [CONFIGURATION_QUERY_KEY, configuration],
     queryFn: async () =>
       axiosInstance
-        .get<FormItem>(`configurations/${configuration}`)
+        .get<FormValue>(`configurations/${configuration}`)
         .then((response) => response.data),
   });

Configuration/webapp/app/api/query/useConfigurationRestrictionsQuery.ts

@@ -14,7 +14,7 @@
 
 import { useQuery } from '@tanstack/react-query';
 import axiosInstance from '../axiosInstance';
-import type { FormRestrictions } from '~/components/form/Form';
+import type { ObjectRestrictions } from '~/components/form/types';
 
 export const CONFIGURATION_RESTRICTIONS_QUERY_KEY = 'configuration-restrictions';
 
@@ -23,6 +23,6 @@ export const useConfigurationRestrictionsQuery = (configuration: string) =>
     queryKey: [CONFIGURATION_RESTRICTIONS_QUERY_KEY, configuration],
     queryFn: async () =>
       axiosInstance
-        .get<FormRestrictions>(`configurations/restrictions/${configuration}`)
+        .get<ObjectRestrictions>(`configurations/restrictions/${configuration}`)
         .then((response) => response.data),
   });

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

@@ -15,12 +15,13 @@
 import { List } from '@mui/material';
 import ConfigNavigatorItem from './ConfigNavigatorItem';
 import { useConfigurationKeysQuery } from '~/api/query/useConfigurationKeysQuery';
-import { useEffect, useMemo, useState } from 'react';
+import { useDeferredValue, useEffect, useMemo, useState } from 'react';
 import { ROUTE_PREFIX } from '~/config';
 import { useLocation } from 'react-router';
 import { ConfigNavigatorLoader } from './ConfigNavigatorLoader';
 import { useConfigurationNavigate } from '~/hooks/useConfigurationNavigate';
 import { buildTree } from '~/utils/configuration-tree-builder';
+import { useDrawer } from '~/contexts/DrawerContext';
 
 /**
  * ConfigNavigator component
@@ -41,6 +42,9 @@ export const ConfigNavigator = () => {
   const { pathname } = useLocation();
   const navigate = useConfigurationNavigate();
 
+  const { searchTerm } = useDrawer();
+  const deferredSearch = useDeferredValue(searchTerm);
+
   useEffect(() => {
     if (configKeys && configKeys.length > 0) {
       const pathToCheck = pathname.startsWith(ROUTE_PREFIX)
@@ -56,12 +60,31 @@ export const ConfigNavigator = () => {
     }
   }, [configKeys, areConfigKeysLoading, pathname]);
 
+  const searchableData = useMemo(() => {
+    if (!configKeys) {
+      return [];
+    }
+    return configKeys.map((key) => ({
+      original: key,
+      searchable: key.slice(ROUTE_PREFIX.length).toLowerCase(),
+    }));
+  }, [configKeys]);
+
   const treeData = useMemo(() => {
     if (!configKeys) {
       return {};
     }
-    return buildTree(configKeys);
-  }, [configKeys]);
+
+    let keysToProcess = configKeys;
+    if (deferredSearch.trim() !== '') {
+      const lowerTerm = deferredSearch.toLowerCase();
+      keysToProcess = searchableData
+        .filter((item) => item.searchable.includes(lowerTerm))
+        .map((item) => item.original);
+    }
+
+    return buildTree(keysToProcess);
+  }, [configKeys, deferredSearch]);
 
   if (areConfigKeysLoading) {
     return <ConfigNavigatorLoader />;

Configuration/webapp/app/components/form/Form.tsx

@@ -12,73 +12,72 @@
  * or submit itself to any jurisdiction.
  */
 
-import { useCallback, useState, type FC, type PropsWithChildren } from 'react';
-import Accordion from '@mui/material/Accordion';
-import AccordionDetails from '@mui/material/AccordionDetails';
-import Stack from '@mui/material/Stack';
-import { Widget } from './Widget';
-import { AccordionHeader } from './AccordionHeader';
-import { Typography } from '@mui/material';
+import type { FC } from 'react';
+import { Widget } from './components/Widget';
+import { ArrayWidget } from './components/widgets/ArrayWidget';
+import type {
+  ArrayRestrictions,
+  FormArrayValue,
+  FormObjectValue,
+  FormPrimitiveValue,
+  FormValue,
+  ObjectRestrictions,
+  Restrictions,
+} from './types';
+import { isArrayRestrictions, isObjectRestrictions } from './types/helpers';
+import { ObjectWidget } from './components/widgets/ObjectWidget';
+import type { Control } from 'react-hook-form';
+import type { InputsType } from '~/routes/configuration';
 
-export type FormItem = { [key: string]: string | object | FormItem };
-
-export type FormRestrictions = {
-  [key: string]: 'string' | 'number' | 'boolean' | 'array' | FormRestrictions;
-};
-
-interface FormProps extends PropsWithChildren {
+interface FormProps {
   sectionTitle: string;
-  items: FormItem;
-  itemsRestrictions: FormRestrictions;
+  sectionPrefix: string;
+  value: FormValue;
+  restrictions: Restrictions | ObjectRestrictions | ArrayRestrictions;
+  control: Control<InputsType>;
 }
 
-/**
- * Function which returns false if the given object
- * which describes restrictions is the leaf (string, number, bool, array)
- * or returns true if the given object describes restrictions recursively
- * @param {'string' | 'number' | 'boolean' | 'array' | FormRestrictions} obj
- * the object which describes restrictions
- * @returns {boolean} value which indicates if the restrictions are recursive
- * or if this is the leaf of the FormRestrictions tree
- */
-function isFormRestrictions(obj: FormRestrictions[string]): obj is FormRestrictions {
-  return obj instanceof Object && !(obj instanceof Array);
-}
-
-export const Form: FC<FormProps> = ({ sectionTitle, items, itemsRestrictions }) => {
-  const [viewForm, setViewForm] = useState<boolean>(true);
+export const Form: FC<FormProps> = ({
+  sectionTitle,
+  sectionPrefix,
+  value,
+  restrictions,
+  control,
+}) => {
+  if (isObjectRestrictions(restrictions)) {
+    return (
+      <ObjectWidget
+        key={sectionTitle}
+        sectionTitle={sectionTitle}
+        sectionPrefix={sectionPrefix}
+        items={value as FormObjectValue}
+        itemsRestrictions={restrictions}
+        control={control}
+      />
+    );
+  }
 
-  const renderItem = useCallback(
-    (key: string, value: FormRestrictions[string]) =>
-      isFormRestrictions(value) ? (
-        <Form
-          key={key}
-          sectionTitle={key}
-          items={items[key] as FormItem}
-          itemsRestrictions={itemsRestrictions[key] as FormRestrictions}
-        />
-      ) : (
-        <Widget key={key} title={key} type={value} value={items[key]} />
-      ),
-    [items, itemsRestrictions],
-  );
+  if (isArrayRestrictions(restrictions)) {
+    return (
+      <ArrayWidget
+        key={sectionTitle}
+        sectionTitle={sectionTitle}
+        sectionPrefix={sectionPrefix}
+        items={value as Array<FormArrayValue>}
+        itemsRestrictions={restrictions}
+        control={control}
+      />
+    );
+  }
 
   return (
-    <Accordion defaultExpanded>
-      <AccordionHeader
-        title={sectionTitle}
-        viewForm={viewForm}
-        viewFormToggle={() => setViewForm((v) => !v)}
-      />
-      <AccordionDetails>
-        {viewForm ? (
-          <Stack spacing={2}>
-            {Object.entries(itemsRestrictions).map(([key, value]) => renderItem(key, value))}
-          </Stack>
-        ) : (
-          <Typography component="pre">{JSON.stringify(items, null, 2)}</Typography>
-        )}
-      </AccordionDetails>
-    </Accordion>
+    <Widget
+      key={sectionTitle}
+      label={sectionTitle}
+      sectionPrefix={sectionPrefix}
+      type={restrictions}
+      value={value as FormPrimitiveValue}
+      control={control}
+    />
   );
 };

Configuration/webapp/app/components/form/Widget.tsx

@@ -15,27 +15,32 @@
 import { useCallback, type FC, type PropsWithChildren, type ReactElement } from 'react';
 import AccordionSummary from '@mui/material/AccordionSummary';
 import ExpandLessIcon from '@mui/icons-material/ExpandLess';
-import FormData from '@mui/icons-material/ListAlt';
-import RawData from '@mui/icons-material/EditNote';
+import RawData from '@mui/icons-material/DataObject';
 import { IconButton, Typography } from '@mui/material';
 
 interface AccordionHeaderProps extends PropsWithChildren {
   title: string;
-  viewForm: boolean;
-  viewFormToggle: () => void;
+  showRawViewModal: () => void;
 }
 
+/**
+ * Accordion header component.
+ * @param {AccordionHeaderProps} props - The props of the accordion header.
+ * @param {string} props.title - The title of the accordion header.
+ * @param {boolean} props.viewForm - Whether the form is visible.
+ * @param {() => void} props.viewFormToggle - The callback to toggle the form visibility.
+ * @returns {ReactElement} The accordion header component.
+ */
 export const AccordionHeader: FC<AccordionHeaderProps> = ({
   title,
-  viewForm,
-  viewFormToggle,
+  showRawViewModal,
 }): ReactElement => {
-  const viewFormToggleCallback = useCallback(
+  const showRawViewModalCallback = useCallback(
     (e: React.MouseEvent<HTMLButtonElement>) => {
       e.stopPropagation();
-      viewFormToggle();
+      showRawViewModal();
     },
-    [viewFormToggle],
+    [showRawViewModal],
   );
 
   return (
@@ -49,8 +54,8 @@ export const AccordionHeader: FC<AccordionHeaderProps> = ({
       }}
     >
       <Typography sx={{ marginRight: 'auto', alignContent: 'center' }}>{title}</Typography>
-      <IconButton onClick={viewFormToggleCallback}>
-        {viewForm ? <RawData /> : <FormData />}
+      <IconButton onClick={showRawViewModalCallback}>
+        <RawData />
       </IconButton>
     </AccordionSummary>
   );