feature(frontend): Adding customizable logic (#3112)

* feature(frontend): Adding customizable logic

* feature(frontend): Adding customizable logic

* update naming and exports

---------

Co-authored-by: Jorge Padilla <jorge.esteban.padilla@gmail.com>

web/src/App.tsx

@@ -1,7 +1,8 @@
 import * as Sentry from '@sentry/react';
 import {HistoryRouter} from 'redux-first-history/rr6';
 
-import DashboardWrapper from 'components/DashboardWrapper/DashboardWrapper';
+import CustomizationWrapper from 'components/CustomizationWrapper';
+import DashboardWrapper from 'components/DashboardWrapper';
 import ErrorBoundary from 'components/ErrorBoundary';
 import {theme} from 'constants/Theme.constants';
 import {ReduxWrapperProvider} from 'redux/ReduxWrapperProvider';
@@ -18,9 +19,11 @@ const App = () => (
     <Sentry.ErrorBoundary fallback={({error}) => <ErrorBoundary error={error} />}>
       <ReduxWrapperProvider>
         <HistoryRouter history={history} basename={serverPathPrefix}>
-          <DashboardWrapper>
-            <BaseApp />
-          </DashboardWrapper>
+          <CustomizationWrapper>
+            <DashboardWrapper>
+              <BaseApp />
+            </DashboardWrapper>
+          </CustomizationWrapper>
         </HistoryRouter>
       </ReduxWrapperProvider>
     </Sentry.ErrorBoundary>

web/src/BaseApp.tsx

@@ -1,14 +1,9 @@
 import Router from 'components/Router';
 import SettingsValuesProvider from 'providers/SettingsValues';
-import {TCustomHeader} from 'components/Layout/Layout';
 
-interface IProps {
-  customHeader?: TCustomHeader;
-}
-
-const BaseApp = ({customHeader}: IProps) => (
+const BaseApp = () => (
   <SettingsValuesProvider>
-    <Router customHeader={customHeader} />
+    <Router />
   </SettingsValuesProvider>
 );
 

web/src/components/AllowButton/AllowButton.tsx

@@ -0,0 +1,19 @@
+import {Button, ButtonProps, Tooltip} from 'antd';
+import {Operation, useCustomization} from 'providers/Customization/Customization.provider';
+
+interface IProps extends ButtonProps {
+  operation: Operation;
+}
+
+const AllowButton = ({operation, ...props}: IProps) => {
+  const {getIsAllowed} = useCustomization();
+  const isAllowed = getIsAllowed(operation);
+
+  return (
+    <Tooltip title={!isAllowed ? 'You are not allowed to perform this operation' : ''}>
+      <Button {...props} disabled={!isAllowed} />
+    </Tooltip>
+  );
+};
+
+export default AllowButton;

web/src/components/AllowButton/index.ts

@@ -0,0 +1,3 @@
+export {Operation} from 'providers/Customization';
+// eslint-disable-next-line no-restricted-exports
+export {default} from './AllowButton';

web/src/components/CustomizationWrapper/CustomizationWrapper.tsx

@@ -0,0 +1,17 @@
+import {useMemo} from 'react';
+import CustomizationProvider from 'providers/Customization';
+
+interface IProps {
+  children: React.ReactNode;
+}
+
+const getComponent = <T,>(id: string, fallback: React.ComponentType<T>) => fallback;
+const getIsAllowed = () => true;
+
+const CustomizationWrapper = ({children}: IProps) => {
+  const customizationProviderValue = useMemo(() => ({getComponent, getIsAllowed}), []);
+
+  return <CustomizationProvider value={customizationProviderValue}>{children}</CustomizationProvider>;
+};
+
+export default CustomizationWrapper;

web/src/components/CustomizationWrapper/index.ts

@@ -0,0 +1,2 @@
+// eslint-disable-next-line no-restricted-exports
+export {default} from './CustomizationWrapper';

web/src/components/Header/Header.tsx

@@ -1,6 +1,7 @@
 import Logo from 'assets/Logo.svg';
 import Link from 'components/Link';
 import NoTracingPopover from 'components/NoTracingPopover';
+import {withCustomization} from 'providers/Customization';
 import * as S from './Header.styled';
 import HelpMenu from './HelpMenu';
 
@@ -26,4 +27,4 @@ const Header = ({hasLogo = false, isNoTracingMode}: IProps) => (
   </S.Header>
 );
 
-export default Header;
+export default withCustomization(Header, 'header');

web/src/components/Layout/Layout.tsx

@@ -18,7 +18,6 @@ import * as S from './Layout.styled';
 export type TCustomHeader = typeof Header;
 
 interface IProps {
-  customHeader?: TCustomHeader;
   hasMenu?: boolean;
 }
 
@@ -52,7 +51,7 @@ const footerMenuItems = [
   },
 ];
 
-const Layout = ({hasMenu = false, customHeader: CustomHeader = Header}: IProps) => {
+const Layout = ({hasMenu = false}: IProps) => {
   useRouterSync();
   const {dataStoreConfig, isLoading} = useSettingsValues();
   const pathname = useLocation().pathname;
@@ -100,7 +99,7 @@ const Layout = ({hasMenu = false, customHeader: CustomHeader = Header}: IProps)
                 )}
 
                 <S.Layout>
-                  <CustomHeader hasLogo={!hasMenu} isNoTracingMode={isNoTracingMode && !isLoading} />
+                  <Header hasLogo={!hasMenu} isNoTracingMode={isNoTracingMode && !isLoading} />
                   <S.Content $hasMenu={hasMenu}>
                     <Outlet />
                   </S.Content>

web/src/components/Router/Router.tsx

@@ -10,22 +10,18 @@ import TestSuite from 'pages/TestSuite';
 import TestSuiteRunOverview from 'pages/TestSuiteRunOverview';
 import TestSuiteRunAutomate from 'pages/TestSuiteRunAutomate';
 import AutomatedTestRun from 'pages/AutomatedTestRun';
-import Layout, {TCustomHeader} from 'components/Layout/Layout';
+import Layout from 'components/Layout/Layout';
 
-interface IProps {
-  customHeader?: TCustomHeader;
-}
-
-const Router = ({customHeader}: IProps) => (
+const Router = () => (
   <Routes>
-    <Route element={<Layout hasMenu customHeader={customHeader} />}>
+    <Route element={<Layout hasMenu />}>
       <Route path="/" element={<Home />} />
       <Route path="/testsuites" element={<TestSuites />} />
       <Route path="/variablesets" element={<VariableSet />} />
       <Route path="/settings" element={<Settings />} />
     </Route>
 
-    <Route element={<Layout customHeader={customHeader} />}>
+    <Route element={<Layout />}>
       <Route path="/test/:testId" element={<Test />} />
       <Route path="/test/:testId/run/:runId" element={<RunDetail />} />
       <Route path="/test/:testId/run/:runId/:mode" element={<RunDetail />} />

web/src/components/Settings/DataStoreForm/DataStoreForm.tsx

@@ -1,5 +1,6 @@
 import {Button, Form} from 'antd';
 import {useCallback, useEffect, useMemo} from 'react';
+import AllowButton, {Operation} from 'components/AllowButton';
 import DataStoreService from 'services/DataStore.service';
 import {TDraftDataStore, TDataStoreForm, SupportedDataStores} from 'types/DataStore.types';
 import {SupportedDataStoresToName} from 'constants/DataStore.constants';
@@ -90,9 +91,15 @@ const DataStoreForm = ({
               <Button loading={isTestConnectionLoading} type="primary" ghost onClick={onTestConnection}>
                 Test Connection
               </Button>
-              <Button disabled={!isFormValid} loading={isLoading} type="primary" onClick={() => form.submit()}>
+              <AllowButton
+                operation={Operation.Configure}
+                disabled={!isFormValid}
+                loading={isLoading}
+                type="primary"
+                onClick={() => form.submit()}
+              >
                 Save and Set as DataStore
-              </Button>
+              </AllowButton>
             </S.SaveContainer>
           </S.ButtonsContainer>
         </S.FactoryContainer>

web/src/providers/Customization/Customization.provider.tsx

@@ -0,0 +1,30 @@
+import {createContext, useContext} from 'react';
+
+export enum Operation {
+  Configure = 'configure',
+  Edit = 'edit',
+  View = 'view',
+}
+
+interface IContext {
+  getComponent<T>(name: string, fallback: React.ComponentType<T>): React.ComponentType<T>;
+  getIsAllowed(operation: Operation): boolean;
+}
+
+export const Context = createContext<IContext>({
+  getComponent: (name, fallback) => fallback,
+  getIsAllowed: () => true,
+});
+
+export const useCustomization = () => useContext(Context);
+
+interface IProps {
+  children: React.ReactNode;
+  value: IContext;
+}
+
+const CustomizationProvider = ({children, value}: IProps) => {
+  return <Context.Provider value={value}>{children}</Context.Provider>;
+};
+
+export default CustomizationProvider;

web/src/providers/Customization/WithCustomization.tsx

@@ -0,0 +1,14 @@
+import {useCustomization} from './Customization.provider';
+
+const withCustomization = <P extends object>(Component: React.ComponentType<P>, id: string) => {
+  const WrappedComponent = (props: P) => {
+    const {getComponent} = useCustomization();
+    const CustomizedComponent = getComponent(id, Component);
+
+    return <CustomizedComponent {...props} />;
+  };
+
+  return WrappedComponent;
+};
+
+export default withCustomization;

web/src/providers/Customization/index.ts

@@ -0,0 +1,3 @@
+// eslint-disable-next-line no-restricted-exports
+export {default, useCustomization, Operation} from './Customization.provider';
+export {default as withCustomization} from './WithCustomization';