feat!(policies): Policies from policy hub

src/components/policies/AddEditPolicy.tsx

@@ -19,56 +19,27 @@
  * SPDX-License-Identifier: Apache-2.0
  ********************************************************************************/
 
-import { Box, Divider, FormControl, FormControlLabel } from '@mui/material';
-import {
-  Button,
-  Checkbox,
-  Dialog,
-  DialogActions,
-  DialogContent,
-  DialogHeader,
-  Input,
-  SelectList,
-  Typography,
-} from 'cx-portal-shared-components';
-import { useEffect } from 'react';
-import { Controller, useForm } from 'react-hook-form';
+import { Dialog, DialogContent, DialogHeader, Typography } from 'cx-portal-shared-components';
 import { useTranslation } from 'react-i18next';
 
 import { uploadFileWithPolicy, uploadTableWithPolicy } from '../../features/provider/policies/actions';
 import { setPolicyDialog } from '../../features/provider/policies/slice';
 import { useAppDispatch, useAppSelector } from '../../features/store';
-import { PolicyModel, PolicyPayload } from '../../models/RecurringUpload.models';
-import { CHECKBOXES, FRAMEWORKS } from '../../utils/constants';
-import ValidateBpn from './ValidateBpn';
+import PolicyHub from '../../pages/PolicyHub';
 
-function AddEditPolicy() {
+function AddEditPolicyNew() {
   const { t } = useTranslation();
   const dispatch = useAppDispatch();
-  const { policyDialog, policyDialogType, policyData } = useAppSelector(state => state.policySlice);
-  const { rows } = useAppSelector(state => state.submodelSlice);
+  const { policyDialog, policyDialogType } = useAppSelector(state => state.policySlice);
 
-  const { control, handleSubmit, watch, resetField, getValues, setValue, reset } = useForm<PolicyModel>({
-    mode: 'onSubmit',
-  });
-
-  useEffect(() => {
-    reset(policyData);
-  }, [policyData, reset]);
-
-  const inputBpn = watch('inputBpn');
-
-  const showPolicyName = policyDialogType === 'Add' || policyDialogType === 'Edit';
-
-  const onSubmit = async (data: PolicyModel) => {
-    const payload = new PolicyPayload(data);
+  const onSubmit = async (formData: any) => {
     try {
       switch (policyDialogType) {
         case 'FileWithPolicy':
-          await dispatch(uploadFileWithPolicy(payload));
+          await dispatch(uploadFileWithPolicy(formData));
           break;
         case 'TableWithPolicy':
-          await dispatch(uploadTableWithPolicy({ ...payload, row_data: rows }));
+          await dispatch(uploadTableWithPolicy(formData));
           break;
         default:
           break;
@@ -85,119 +56,20 @@ function AddEditPolicy() {
         title={t(policyDialogType === 'Edit' ? 'content.policies.editPolicy' : 'content.policies.addPolicy')}
       />
       <DialogContent>
-        <Typography variant="body2" fontWeight={'bold'}>
-          {t('content.policies.description')}
+        <Typography variant="body2">
+          <b>{t('content.policies.description')}</b>
         </Typography>
         <ol style={{ padding: '0 0 0 16px' }}>
-          <li>
-            <Typography variant="body2">{t('content.policies.description_1')}</Typography>
-          </li>
-          <li>
-            <Typography variant="body2">{t('content.policies.description_2')}</Typography>
-            <Typography variant="body2">{t('content.policies.description_3')}</Typography>
-            <Typography variant="body2">{t('content.policies.description_4')}</Typography>
-          </li>
-        </ol>
-        <form>
-          {showPolicyName && (
-            <FormControl sx={{ mb: 3, width: 300 }}>
-              <Controller
-                name="policy_name"
-                control={control}
-                rules={{
-                  required: showPolicyName,
-                }}
-                render={({ field, fieldState: { error } }) => (
-                  <Input
-                    {...field}
-                    variant="filled"
-                    label={'Policy name'}
-                    placeholder={'Enter policy name'}
-                    type={'text'}
-                    error={!!error}
-                  />
-                )}
-              />
-            </FormControl>
-          )}
-          {/* access policy starts */}
-          <Typography fontWeight={'bold'} variant="body2">
-            {t('content.policies.accessPolicy')}
-          </Typography>
-          <Divider sx={{ mt: 1 }} />
-          <ValidateBpn
-            control={control}
-            watch={watch}
-            resetField={resetField}
-            getValues={getValues}
-            inputBpn={inputBpn}
-            setValue={setValue}
-          />
-          {CHECKBOXES.map((item: any) => (
-            <FormControl fullWidth key={item.name}>
-              <Controller
-                name={`access_policies.${item.name}.value`}
-                control={control}
-                render={({ field }) => (
-                  <FormControlLabel control={<Checkbox {...field} checked={field.value} />} label={item.title} />
-                )}
-              />
-            </FormControl>
-          ))}
-          {/* access policy ends */}
-          {/* usage policy starts */}
-          <Typography fontWeight={'bold'} variant="body2" mt={3}>
-            {t('content.policies.usagePolicy')}
-          </Typography>
-          <Divider sx={{ my: 1 }} />
-          {CHECKBOXES.map((item: any) => (
-            <FormControl fullWidth key={item.name}>
-              <Controller
-                name={`usage_policies.${item.name}.value`}
-                control={control}
-                render={({ field }) => (
-                  <FormControlLabel control={<Checkbox {...field} checked={field.value} />} label={item.title} />
-                )}
-              />
-            </FormControl>
+          {[1, 2, 3, 4].map(e => (
+            <li key={e}>
+              <Typography variant="body2">{t(`content.policies.description_${e}`)}</Typography>
+            </li>
           ))}
-          {FRAMEWORKS.map((item: any) => (
-            <Box key={item.name}>
-              <FormControl sx={{ width: 300 }}>
-                <Controller
-                  name={`usage_policies.${item.name}.value`}
-                  control={control}
-                  render={({ field, fieldState: { error } }) => (
-                    <SelectList
-                      keyTitle="value"
-                      defaultValue={field.value}
-                      items={item.values}
-                      {...field}
-                      variant="filled"
-                      label={item.title}
-                      placeholder="Select a version"
-                      type={'text'}
-                      error={!!error}
-                      onChangeItem={e => field.onChange(e)}
-                    />
-                  )}
-                />
-              </FormControl>
-            </Box>
-          ))}
-          {/* usage policy ends */}
-        </form>
+        </ol>
+        <PolicyHub onSubmit={onSubmit} />
       </DialogContent>
-      <DialogActions>
-        <Button variant="contained" sx={{ mr: 2 }} onClick={() => dispatch(setPolicyDialog(false))}>
-          {t('button.close')}
-        </Button>
-        <Button variant="contained" type="submit" onClick={handleSubmit(onSubmit)}>
-          {t('button.submit')}
-        </Button>
-      </DialogActions>
     </Dialog>
   );
 }
 
-export default AddEditPolicy;
+export default AddEditPolicyNew;

src/components/policies/FormLabelDescription.tsx

@@ -0,0 +1,45 @@
+/********************************************************************************
+ * Copyright (c) 2024 T-Systems International GmbH
+ * Copyright (c) 2024 Contributors to the Eclipse Foundation
+ *
+ * See the NOTICE file(s) distributed with this work for additional
+ * information regarding copyright ownership.
+ *
+ * This program and the accompanying materials are made available under the
+ * terms of the Apache License, Version 2.0 which is available at
+ * https://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ ********************************************************************************/
+
+import InfoIcon from '@mui/icons-material/Info';
+import { Box } from '@mui/material';
+import { Tooltips, Typography } from 'cx-portal-shared-components';
+import { isEmpty } from 'lodash';
+
+import { toReadableCapitalizedCase } from '../../utils/utils';
+
+function FormLabelDescription({ title, description }: { title: string; description: string }) {
+  return (
+    <Box sx={{ display: 'flex', flexDirection: 'row' }}>
+      <Typography variant={'body3'} mr={0.5} fontWeight={'bold'}>
+        {toReadableCapitalizedCase(title)}
+      </Typography>
+      {!isEmpty(description) && (
+        <Tooltips tooltipPlacement="top" tooltipText={description}>
+          <span>
+            <InfoIcon fontSize="small" color="disabled" />
+          </span>
+        </Tooltips>
+      )}
+    </Box>
+  );
+}
+
+export default FormLabelDescription;

src/constants/policies.ts

@@ -0,0 +1,27 @@
+/********************************************************************************
+ * Copyright (c) 2024 T-Systems International GmbH
+ * Copyright (c) 2024 Contributors to the Eclipse Foundation
+ *
+ * See the NOTICE file(s) distributed with this work for additional
+ * information regarding copyright ownership.
+ *
+ * This program and the accompanying materials are made available under the
+ * terms of the Apache License, Version 2.0 which is available at
+ * https://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ ********************************************************************************/
+
+const SELECT_POLICY_TYPES = ['Brands', 'Version', 'Static', 'DynamicValue'];
+
+const ADD_POLICY_DIALOG_TYPES = ['Add', 'FileWithPolicy', 'TableWithPolicy'];
+
+const NEW_POLICY_ITEM = { id: 0, title: 'Create New Policy', value: 'NEW' };
+
+export { ADD_POLICY_DIALOG_TYPES, NEW_POLICY_ITEM, SELECT_POLICY_TYPES };

src/features/app/slice.ts

@@ -21,7 +21,7 @@
 import { createSlice, PayloadAction } from '@reduxjs/toolkit';
 import { filter } from 'lodash';
 
-import { IAppSlice, IUser } from './types';
+import { IAppSlice, IUseCase, IUser } from './types';
 
 const initialState: IAppSlice = {
   pageLoading: false,
@@ -38,6 +38,7 @@ const initialState: IAppSlice = {
   permissions: [],
   useCases: [],
   sidebarExpanded: true,
+  useCaseNames: [],
   selectedUseCases: [],
 };
 export const appSlice = createSlice({
@@ -55,7 +56,8 @@ export const appSlice = createSlice({
     },
     setUseCases: (state, { payload }) => {
       state.useCases = payload;
-      state.selectedUseCases = filter(payload, 'checked').map(e => e.id);
+      state.useCaseNames = payload?.map((e: IUseCase) => e.title.split(' ').join(''));
+      state.selectedUseCases = filter(payload, 'checked').map((e: IUseCase) => e.id);
     },
     setPermissions: (state, { payload }) => {
       state.permissions = payload;

src/features/app/types.ts

@@ -36,6 +36,7 @@ export interface IAppSlice {
   permissions: string[];
   useCases: IUseCase[];
   selectedUseCases: string[];
+  useCaseNames: string[];
   sidebarExpanded: boolean;
 }
 export interface IUseCase {