From 9ebc0e0c958cd288d170333ad3737e62137bc7a8 Mon Sep 17 00:00:00 2001
From: Khartade <aniruddhakhartade@gmail.com>
Date: Fri, 10 May 2024 17:54:58 +0530
Subject: [PATCH 1/2] fabric bug fixes and ui improvements

---
 packages/fabric-mfe/package.json              |   2 +-
 .../FabricWorkspaceCard.js                    |   9 +-
 .../FabricWorkspaceForm.js                    | 575 +++++++++---------
 .../fabric-workspace-form.scss                | 163 +----
 .../src/components/workspaces/Workspaces.js   |   9 +-
 .../pages/fabricWorkspace/FabricWorkspace.js  |   2 +-
 .../fabricWorkspace/fabric-workspace.scss     |  76 ---
 .../fabricWorkspaces/FabricWorkspaces.js      |   9 +-
 8 files changed, 316 insertions(+), 529 deletions(-)

diff --git a/packages/fabric-mfe/package.json b/packages/fabric-mfe/package.json
index 0af72c2d5f..efd08e72be 100644
--- a/packages/fabric-mfe/package.json
+++ b/packages/fabric-mfe/package.json
@@ -79,7 +79,7 @@
     "postcss-loader": "^7.0.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "react-hook-form": "7.48.2",
+    "react-hook-form": "^7.51.4",
     "react-redux": "^9.1.0",
     "react-router-dom": "^5.3.0",
     "react-scripts": "5.0.1",
diff --git a/packages/fabric-mfe/src/components/fabricWorkspaceCard/FabricWorkspaceCard.js b/packages/fabric-mfe/src/components/fabricWorkspaceCard/FabricWorkspaceCard.js
index a9d5d27cde..710a27b2e0 100644
--- a/packages/fabric-mfe/src/components/fabricWorkspaceCard/FabricWorkspaceCard.js
+++ b/packages/fabric-mfe/src/components/fabricWorkspaceCard/FabricWorkspaceCard.js
@@ -74,20 +74,15 @@ const FabricWorkspaceCard = ({user,workspace,onRefresh}) => {
       { editWorkspace &&
         <Modal
           title={'Edit Fabric Workspace'}
+          hiddenTitle={true}
           showAcceptButton={false}
           showCancelButton={false}
-          modalWidth={'60%'}
+          modalWidth={'800px'}
           buttonAlignment="right"
           show={editWorkspace}
           content={<FabricWorkspaceForm edit={true} workspace={workspace} onSave={() => {setEditWorkspace(false); onRefresh()}} />}
           scrollableContent={true}
           onCancel={() => setEditWorkspace(false)}
-          modalStyle={{
-            padding: '50px 35px 35px 35px',
-            minWidth: 'unset',
-            width: '60%',
-            maxWidth: '50vw'
-          }}
         />
       }
     </>
diff --git a/packages/fabric-mfe/src/components/fabricWorkspaceForm/FabricWorkspaceForm.js b/packages/fabric-mfe/src/components/fabricWorkspaceForm/FabricWorkspaceForm.js
index a16c2d5956..b46cae30c6 100644
--- a/packages/fabric-mfe/src/components/fabricWorkspaceForm/FabricWorkspaceForm.js
+++ b/packages/fabric-mfe/src/components/fabricWorkspaceForm/FabricWorkspaceForm.js
@@ -23,6 +23,7 @@ const FabricWorkspaceForm = ({ workspace, edit, onSave }) => {
   const {
     register,
     handleSubmit,
+    setValue,
     formState: { errors },
   } = methods;
 
@@ -68,7 +69,6 @@ const FabricWorkspaceForm = ({ workspace, edit, onSave }) => {
       })
       .catch((err) => {
         ProgressIndicator.hide();
-        SelectBox.defaultSetup();
         if (err?.response?.data?.errors?.length > 0) {
           err?.response?.data?.errors.forEach((err) => {
             Notification.show(err?.message || 'Something went wrong.', 'alert');
@@ -148,6 +148,11 @@ const FabricWorkspaceForm = ({ workspace, edit, onSave }) => {
     SelectBox.defaultSetup();
   }, [division, subDivision]);
 
+  useEffect(() => {
+    setValue('department', departmentName[0]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [departmentName[0]]);
+
   const onRelatedSolutionsChange = (selectedTags) => {
     const tempSolutions = solutions.filter(solution => {
       if(selectedTags.includes(solution.name)) {
@@ -155,7 +160,7 @@ const FabricWorkspaceForm = ({ workspace, edit, onSave }) => {
       }
     });
     setRelatedSolutions([...tempSolutions]);
-    setRelatedSolutionsTags([...selectedTags]);
+    setRelatedSolutionsTags(tempSolutions.map(sol => sol.name));
   }
 
   const onRelatedReportsChange = (selectedTags) => {
@@ -165,7 +170,7 @@ const FabricWorkspaceForm = ({ workspace, edit, onSave }) => {
       }
     });
     setRelatedReports([...tempReports]);
-    setRelatedReportsTags([...selectedTags]);
+    setRelatedReportsTags(tempReports.map(rep => rep.name));
   }
 
   const handleCreateWorkspace = (values) => {
@@ -240,16 +245,20 @@ const FabricWorkspaceForm = ({ workspace, edit, onSave }) => {
   return (
     <>
       <FormProvider {...methods}>
-        <div className={classNames(Styles.content)}>
-          <div className={Styles.formGroup}>
-            <div className={Styles.flexLayout}>
-              <div
-                className={classNames(
-                  'input-field-group include-error',
-                  errors?.typeOfProject?.message ? 'error' : '',
-                )}
+        <div className={classNames(Styles.form)}>
+          <div className={Styles.formHeader}>
+            <h3>{edit ? 'Edit' : 'Create'} your Fabric Workspace</h3>
+            <p>{edit ? 'Edit the information and save!' : 'Enter the information to start creating!'}</p>
+          </div>
+          <div className={Styles.flex}>
+            <div className={Styles.col2}>
+              <div className={
+                    classNames(
+                      'input-field-group include-error',
+                      errors?.typeOfProject?.message ? 'error' : ''
+                  )}
               >
-                <label className={classNames(Styles.inputLabel, 'input-label')}>
+                <label className={'input-label'}>
                   Type of Project <sup>*</sup>
                 </label>
                 <div className={classNames('custom-select')}>
@@ -275,269 +284,229 @@ const FabricWorkspaceForm = ({ workspace, edit, onSave }) => {
                   {errors?.typeOfProject?.message}
                 </span>
               </div>
+            </div>
+            <div className={Styles.col2}>
               <div className={classNames('input-field-group include-error', errors?.name ? 'error' : '')}>
-                <label className={classNames(Styles.inputLabel, 'input-label')}>
+                <label className={'input-label'}>
                   Name of Workspace <sup>*</sup>
                 </label>
-                <div>
-                  <input
-                    type="text"
-                    className={classNames('input-field', Styles.workspaceNameField)}
-                    id="workspaceName"
-                    placeholder="Type here"
-                    autoComplete="off"
-                    maxLength={256}
-                    defaultValue={nameOfWorkspace}
-                    {...register('name', { required: '*Missing entry', pattern: /^[a-zA-Z0-9-. ]+$/, onChange: (e) => { setNameOfWorkspace(e.target.value) } })}
-                  />
-                  <span className={classNames('error-message')}>{errors?.name?.message}{errors.name?.type === 'pattern' && 'Project names can consist only of uppercase, lowercase letters, numbers, dots ( . ), and hyphens ( - ).'}</span>
-                </div>
+                <input
+                  type="text"
+                  className={'input-field'}
+                  id="workspaceName"
+                  placeholder="Type here"
+                  autoComplete="off"
+                  maxLength={256}
+                  defaultValue={nameOfWorkspace}
+                  {...register('name', { required: '*Missing entry', pattern: /^(?!Admin monitoring$)\s*\S.*$/, onChange: (e) => { setNameOfWorkspace(e.target.value) } })}
+                />
+                <span className={'error-message'}>{errors?.name?.message}{errors.name?.type === 'pattern' && 'Workspace names must contain characters. Admin monitoring name is not allowed.'}</span>
               </div>
             </div>
-            <div>
+            <div className={Styles.col}>
               <div className={classNames('input-field-group include-error area', errors.description ? 'error' : '')}>
                 <label id="description" className="input-label" htmlFor="description">
                   Description <sup>*</sup>
                 </label>
                 <textarea
                   id="description"
-                  className="input-field-area"
+                  className={'input-field-area'}
                   type="text"
                   defaultValue={description}
-                  {...register('description', { required: '*Missing entry', onChange: (e) => { setDescription(e.target.value) } })}
                   rows={50}
+                  {...register('description', { required: '*Missing entry', pattern: /^(?!\s*$)[a-zA-Z0-1\s]*$/, onChange: (e) => { setDescription(e.target.value) } })}
                 />
-                <span className={classNames('error-message')}>{errors?.description?.message}</span>
+                <span className={'error-message'}>{errors?.description?.message}{errors.description?.type === 'pattern' && `Spaces not allowed as field value.`}</span>
               </div>
-
-              <div className={Styles.flexLayout}>
-                <div className={classNames('input-field-group include-error', errors?.costCenter ? 'error' : '')}>
-                  <label className={classNames(Styles.inputLabel, 'input-label')}>
+            </div>  
+            <div className={Styles.col2}>
+              <div className={classNames('input-field-group include-error', errors?.costCenter ? 'error' : '')}>
+                  <label className={'input-label'}>
                     Cost Center <sup>*</sup>
                   </label>
                   <div>
                     <input
                       type="text"
-                      className={classNames('input-field', Styles.workspaceNameField)}
+                      className={'input-field'}
                       id="costCenter"
                       placeholder="Type here"
                       autoComplete="off"
-                      maxLength={55}
+                      maxLength={256}
                       defaultValue={costCenter}
-                      {...register('costCenter', { required: '*Missing entry', onChange: (e) => { setCostCenter(e.target.value) } })}
+                      {...register('costCenter', { required: '*Missing entry', pattern: /^(?!\s*$)[a-zA-Z0-1\s]*$/, onChange: (e) => { setCostCenter(e.target.value) } })}
                     />
-                    <span className={classNames('error-message')}>{errors?.costCenter?.message}</span>
+                    <span className={'error-message'}>{errors?.costCenter?.message}{errors.costCenter?.type === 'pattern' && `Spaces not allowed as field value.`}</span>
                   </div>
                 </div>
-                <div className={classNames('input-field-group', errors?.internalOrder ? 'error' : '')}>
-                  <label className={classNames(Styles.inputLabel, 'input-label')}>
+            </div>
+            <div className={Styles.col2}>
+              <div className={classNames('input-field-group', errors?.internalOrder ? 'error' : '')}>
+                  <label className={'input-label'}>
                     Internal Order <sup>*</sup>
                   </label>
                   <div>
                     <input
                       type="text"
-                      className={classNames('input-field', Styles.workspaceNameField)}
+                      className={'input-field'}
                       id="internalOrder"
                       placeholder="Type here"
                       autoComplete="off"
-                      maxLength={55}
+                      maxLength={256}
                       defaultValue={internalOrder}
-                      {...register('internalOrder', { required: '*Missing entry', onChange: (e) => { setInternalOrder(e.target.value) } })}
+                      {...register('internalOrder', { required: '*Missing entry', pattern: /^(?!\s*$)[a-zA-Z0-1\s]*$/, onChange: (e) => { setInternalOrder(e.target.value) } })}
                     />
-                    <span className={classNames('error-message')}>{errors?.internalOrder?.message}</span>
+                    <span className={'error-message'}>{errors?.internalOrder?.message}{errors.internalOrder?.type === 'pattern' && `Spaces not allowed as field value..`}</span>
                   </div>
                 </div>
-              </div>
-
-              {typeOfProject !== 'Playground' &&
-              <div className={Styles.flexLayout} >
-                <div className={classNames(Styles.bucketNameInputField, 'input-field-group')}>
-                  <div>
-                    <div className={Styles.departmentTags}>
-                      <Tags
-                        title={'Related Solutions'}
-                        max={100}
-                        chips={relatedSolutionsTags}
-                        tags={solutions.length > 0 ? solutions : []}
-                        setTags={onRelatedSolutionsChange}
-                        isMandatory={false}
-                      // {...register('department', {required: '*Missing entry'})}
-                      />
-
-                    </div>
+            </div>
+            {typeOfProject !== 'Playground' && 
+              <>
+                <div className={Styles.col2}>
+                  <div className={classNames('input-field-group')}>
+                    <Tags
+                      title={'Related Solutions'}
+                      max={100}
+                      chips={relatedSolutionsTags}
+                      tags={solutions.length > 0 ? solutions : []}
+                      setTags={onRelatedSolutionsChange}
+                      isMandatory={false}
+                    />
                   </div>
                 </div>
-                <div>
-                  <div className={classNames(Styles.bucketNameInputField, 'input-field-group')}>
-                    <div>
-                      <div className={Styles.departmentTags}>
-                        <Tags
-                          title={'Related Reports'}
-                          max={100}
-                          chips={relatedReportsTags}
-                          tags={reports}
-                          setTags={onRelatedReportsChange}
-                          isMandatory={false}
-                        //showMissingEntryError={errors?.tags?.message}
-                        // {...register('tags', {required: '*Missing entry'})}
-                        />
-
-                      </div>
-                    </div>
+                <div className={Styles.col2}>
+                  <div className={classNames('input-field-group')}>
+                    <Tags
+                      title={'Related Reports'}
+                      max={100}
+                      chips={relatedReportsTags}
+                      tags={reports}
+                      setTags={onRelatedReportsChange}
+                      isMandatory={false}
+                    />
                   </div>
                 </div>
-              </div>}
-
-              <div className={Styles.flexLayout}>
-                <div
-                  className={classNames(
-                    'input-field-group include-error',
-                    errors?.division?.message ? 'error' : '',
-                  )}
-                >
-                  <label className={classNames(Styles.inputLabel, 'input-label')}>
-                    Division <sup>*</sup>
-                  </label>
-                  <div className={classNames('custom-select')}>
-                    <select
-                      id="divisionField"
-                      defaultValue={division}
-                      value={division}
-                      {...register('division', {
-                        required: '*Missing entry',
-                        validate: (value) => value !== '0' || '*Missing entry',
-                        onChange: (e) => { setDivision(e.target.value) }
-                      })}
-                    >
-                      <option id="divisionOption" value={0}>
-                        Choose
-                      </option>
-                      {divisions?.map((obj) => {
-                        return (
-                          <option id={obj.name + obj.id} key={obj.id} value={obj.id + '@-@' + obj.name}>
-                            {obj.name}
-                          </option>
-                        )
-                      })}
-                    </select>
-                  </div>
-                  <span className={classNames('error-message', errors?.division?.message ? '' : 'hide')}>
-                    {errors?.division?.message}
-                  </span>
+              </>
+            }
+            <div className={Styles.col2}>
+              <div
+                className={classNames(
+                  'input-field-group include-error',
+                  errors?.division?.message ? 'error' : '',
+                )}
+              >
+                <label className={'input-label'}>
+                  Division <sup>*</sup>
+                </label>
+                <div className={classNames('custom-select')}>
+                  <select
+                    id="divisionField"
+                    defaultValue={division}
+                    value={division}
+                    {...register('division', {
+                      required: '*Missing entry',
+                      validate: (value) => value !== '0' || '*Missing entry',
+                      onChange: (e) => { setDivision(e.target.value) }
+                    })}
+                  >
+                    <option id="divisionOption" value={0}>
+                      Choose
+                    </option>
+                    {divisions?.map((obj) => {
+                      return (
+                        <option id={obj.name + obj.id} key={obj.id} value={obj.id + '@-@' + obj.name}>
+                          {obj.name}
+                        </option>
+                      )
+                    })}
+                  </select>
                 </div>
-
-                <div
-                  className={classNames(
-                    'input-field-group include-error',
-                    // datalakeSubDivisionError?.length ? 'error' : '',
-                  )}
-                >
-                  <label className={classNames(Styles.inputLabel, 'input-label')}>
-                    Sub Division
-                  </label>
-                  <div className={classNames('custom-select')}>
-
-                    <select id="subDivisionField"
-                      defaultValue={subDivision}
-                      value={subDivision}
-                      required={false}
-                      {...register('subDivision', {
-                        onChange: (e) => { setSubDivision(e.target.value) }
-                      })}
-                    >
-                      {subDivisions?.some((item) => item.id === '0' && item.name === 'None') ? (
+                <span className={classNames('error-message', errors?.division?.message ? '' : 'hide')}>
+                  {errors?.division?.message}
+                </span>
+              </div>
+            </div>
+            <div className={Styles.col2}>
+              <div className={'input-field-group'}>
+                <label className={'input-label'}>
+                  Sub Division
+                </label>
+                <div className={classNames('custom-select')}>
+                  <select id="subDivisionField"
+                    defaultValue={subDivision}
+                    value={subDivision}
+                    required={false}
+                    {...register('subDivision', {
+                      onChange: (e) => { setSubDivision(e.target.value) }
+                    })}
+                  >
+                    {subDivisions?.some((item) => item.id === '0' && item.name === 'None') ? (
+                      <option id="subDivisionDefault" value={0}>
+                        None
+                      </option>
+                    ) : (
+                      <>
                         <option id="subDivisionDefault" value={0}>
-                          None
+                          Choose
                         </option>
-                      ) : (
-                        <>
-                          <option id="subDivisionDefault" value={0}>
-                            Choose
+                        {subDivisions?.map((obj) => (
+                          <option id={obj.name + obj.id} key={obj.id} value={obj.id + '@-@' + obj.name}>
+                            {obj.name}
                           </option>
-                          {subDivisions?.map((obj) => (
-                            <option id={obj.name + obj.id} key={obj.id} value={obj.id + '@-@' + obj.name}>
-                              {obj.name}
-                            </option>
-                          ))}
-                        </>
-                      )}
-                    </select>
-
-                  </div>
-                  {/* <span className={classNames('error-message', subDivisionError?.length ? '' : 'hide')}>
-                      {subDivisionError}
-                    </span> */}
-                </div>
-              </div>
-
-              <div className={Styles.flexLayout} >
-                <div
-                  className={classNames(
-                    Styles.bucketNameInputField,
-                    'input-field-group include-error',
-                    errors?.department?.message ? 'error' : '',
-                  )}
-                >
-                  <div>
-                    <div className={Styles.departmentTags}>
-
-                      <Tags
-                        title={'Department'}
-                        max={1}
-                        chips={departmentName}
-                        tags={departments}
-                        setTags={(selectedTags) => {
-                          let dept = selectedTags?.map((item) => item.toUpperCase());
-                          setDepartmentName(dept);
-                        }}
-                        isMandatory={true}
-                        showMissingEntryError={errors?.department?.message}
-                      // {...register('department', {required: '*Missing entry'})}
-                      />
-
-                    </div>
-                  </div>
-                </div>
-                <div>
-                {typeOfProject !== 'Playground' &&
-                  <div
-                    className={classNames(
-                      Styles.bucketNameInputField,
-                      'input-field-group include-error',
-                      errors?.tags?.message ? 'error' : '',
+                        ))}
+                      </>
                     )}
-                  >
-                    <div>
-                      <div className={Styles.departmentTags}>
-
-                        <Tags
-                          title={'Tags'}
-                          max={100}
-                          chips={tags}
-                          tags={fabricTags}
-                          setTags={(selectedTags) => {
-                            let tag = selectedTags?.map((item) => item.toUpperCase());
-                            setTags(tag);
-                          }}
-                          isMandatory={false}
-                        //showMissingEntryError={errors?.tags?.message}
-                        // {...register('tags', {required: '*Missing entry'})}
-                        />
-
-                      </div>
-                    </div>
-                  </div>}
+                  </select>
                 </div>
               </div>
             </div>
-            <div className={Styles.flexLayout}>
+            <div className={Styles.col2}>
+              <div
+                className={classNames(
+                  'input-field-group include-error',
+                  Object.keys(errors).length > 0 && (departmentName.length === 0 ? 'error' : ''),
+                )}
+              >
+                <Tags
+                  title={'Department'}
+                  max={1}
+                  chips={departmentName}
+                  tags={departments}
+                  setTags={(selectedTags) => {
+                    let dept = selectedTags?.map((item) => item.toUpperCase());
+                    setDepartmentName(dept);
+                  }}
+                  isMandatory={true}
+                  showMissingEntryError={Object.keys(errors).length > 0 && departmentName.length === 0}
+                />
+                {/* workaround for validating department Tags field */}
+                <input type={'hidden'} defaultValue={departmentName[0]} value={departmentName[0]} {...register('department', {required: '*Missing entry'})} />
+              </div>
+            </div>
+            <div className={Styles.col2}>
+              {typeOfProject !== 'Playground' &&
+                <div className={'input-field-group'}>
+                  <Tags
+                    title={'Tags'}
+                    max={100}
+                    chips={tags}
+                    tags={fabricTags}
+                    setTags={(selectedTags) => {
+                      let tag = selectedTags?.map((item) => item.toUpperCase());
+                      setTags(tag);
+                    }}
+                    isMandatory={false}
+                  />
+                </div>
+              }
+            </div>
+            <div className={Styles.col2}>
               <div
                 className={classNames(
                   'input-field-group include-error',
                   errors?.dataClassification?.message ? 'error' : '',
                 )}
               >
-                <label className={classNames(Styles.inputLabel, 'input-label')}>
+                <label className={'input-label'}>
                   Data Classification <sup>*</sup>
                 </label>
                 <div className={classNames('custom-select')}>
@@ -569,8 +538,10 @@ const FabricWorkspaceForm = ({ workspace, edit, onSave }) => {
                   {errors?.dataClassification?.message}
                 </span>
               </div>
+            </div>
+            <div className={Styles.col2}>
               <div className={classNames('input-field-group include-error')}>
-                <label className={classNames(Styles.inputLabel, 'input-label')}>
+                <label className={'input-label'}>
                   PII (Personally Identifiable Information) <sup>*</sup>
                 </label>
                 <div className={Styles.pIIField}>
@@ -610,97 +581,101 @@ const FabricWorkspaceForm = ({ workspace, edit, onSave }) => {
               </div>
             </div>
             {typeOfProject !== 'Playground' &&
-            <div>
-              <div className={Styles.flexLayout}>
-                <div className={classNames('input-field-group include-error', errors?.archerId ? 'error' : '')}>
-                  <label className={classNames(Styles.inputLabel, 'input-label')}>
-                    Archer ID
-                  </label>
-                  <div>
-                    <input
-                      type="text"
-                      className={classNames('input-field', Styles.workspaceNameField)}
-                      id="archerId"
-                      placeholder="Type here eg.[INFO-XXXXX]"
-                      autoComplete="off"
-                      maxLength={55}
-                      defaultValue={archerId}
-                      {...register('archerId', { pattern: /^(INFO)-\d{5}$/, onChange: (e) => { setArcherID(e.target.value) } })}
-                    />
-                    <span className={classNames('error-message')}>{errors.archerId?.type === 'pattern' && 'Archer ID should be of type INFO-XXXXX'}</span>
-                  </div>
-                </div>
-                <div className={classNames('input-field-group include-error', errors?.procedureId ? 'error' : '')}>
-                  <label className={classNames(Styles.inputLabel, 'input-label')}>
-                    Procedure ID
-                  </label>
-                  <div>
-                    <input
-                      type="text"
-                      className={classNames('input-field', Styles.workspaceNameField)}
-                      id="procedureId"
-                      placeholder="Type here eg.[PO-XXXXX / ITPLC-XXXXX]"
-                      autoComplete="off"
-                      maxLength={55}
-                      defaultValue={procedureId}
-                      {...register('procedureId', { pattern: /^(PO|ITPLC)-\d{5}$/, onChange: (e) => { setProcedureID(e.target.value) } })}
-                    />
-                    <span className={classNames('error-message')}>{errors.procedureId?.type === 'pattern' && 'Procedure ID should be of type PO-XXXXX / ITPLC-XXXXX'}</span>
+              <>
+                <div className={Styles.col2}>
+                  <div className={classNames('input-field-group include-error', errors?.archerId ? 'error' : '')}>
+                    <label className={'input-label'}>
+                      Archer ID
+                    </label>
+                    <div>
+                      <input
+                        type="text"
+                        className={classNames('input-field', Styles.workspaceNameField)}
+                        id="archerId"
+                        placeholder="Type here eg.[INFO-XXXXX]"
+                        autoComplete="off"
+                        maxLength={55}
+                        defaultValue={archerId}
+                        {...register('archerId', { pattern: /^(INFO)-\d{5}$/, onChange: (e) => { setArcherID(e.target.value) } })}
+                      />
+                      <span className={'error-message'}>{errors.archerId?.type === 'pattern' && 'Archer ID should be of type INFO-XXXXX'}</span>
+                    </div>
                   </div>
                 </div>
-              </div>
-            </div>}
-            <div className={classNames(Styles.termsOfUseContainer, errors?.termsOfUse?.message ? 'error' : '')}>
-              <div className={Styles.termsOfUseContent}>
-                <div>
-                  <label className={classNames('checkbox', errors?.termsOfUse?.message ? 'error' : '')}>
-                    <span className="wrapper">
+                <div className={Styles.col2}>
+                  <div className={classNames('input-field-group include-error', errors?.procedureId ? 'error' : '')}>
+                    <label className={'input-label'}>
+                      Procedure ID
+                    </label>
+                    <div>
                       <input
-                        name="write"
-                        type="checkbox"
-                        className="ff-only"
-                        defaultChecked={termsOfUse}
-                        {...register('termsOfUse', {
-                          required: 'Please agree to terms of use',
-                          validate: (value) => {
-                            value || 'Please agree to terms of use';
-                          },
-                          onChange: (e) => { e.target.value === 'on' ? setTermsOfUse(true) : setTermsOfUse(false) }
-                        })}
+                        type="text"
+                        className={classNames('input-field', Styles.workspaceNameField)}
+                        id="procedureId"
+                        placeholder="Type here eg.[PO-XXXXX / ITPLC-XXXXX]"
+                        autoComplete="off"
+                        maxLength={55}
+                        defaultValue={procedureId}
+                        {...register('procedureId', { pattern: /^(PO|ITPLC)-\d{5}$/, onChange: (e) => { setProcedureID(e.target.value) } })}
                       />
-                    </span>
-                  </label>
+                      <span className={'error-message'}>{errors.procedureId?.type === 'pattern' && 'Procedure ID should be of type PO-XXXXX / ITPLC-XXXXX'}</span>
+                    </div>
+                  </div>
                 </div>
-                <div
-                  className={classNames(Styles.termsOfUseText)}
-                  style={{
-                     ...(errors?.termsOfUse?.message ? { color: '#e84d47' } : ''),
-                  }}
-                >
-                  <div dangerouslySetInnerHTML={{ __html: Envs.TOU_HTML }}></div>
-                  <sup>*</sup>
+              </>
+            }
+            <div className={Styles.col}>
+              <div className={classNames(errors?.termsOfUse?.message ? 'error' : '')}>
+                <div className={Styles.termsOfUseContent}>
+                  <div>
+                    <label className={classNames('checkbox', errors?.termsOfUse?.message ? 'error' : '')}>
+                      <span className="wrapper">
+                        <input
+                          name="write"
+                          type="checkbox"
+                          className="ff-only"
+                          defaultChecked={termsOfUse}
+                          {...register('termsOfUse', {
+                            required: 'Please agree to terms of use',
+                            validate: (value) => {
+                              value || 'Please agree to terms of use';
+                            },
+                            onChange: (e) => { e.target.value === 'on' ? setTermsOfUse(true) : setTermsOfUse(false) }
+                          })}
+                        />
+                      </span>
+                    </label>
+                  </div>
+                  <div
+                    className={classNames(Styles.termsOfUseText)}
+                    style={{
+                        ...(errors?.termsOfUse?.message ? { color: '#e84d47' } : ''),
+                    }}
+                  >
+                    <div dangerouslySetInnerHTML={{ __html: Envs.TOU_HTML }}></div>
+                    <sup>*</sup>
+                  </div>
                 </div>
+                <span
+                  style={{ marginTop: 0 }}
+                  className={classNames('error-message', errors?.termsOfUse?.message ? '' : 'hide')}
+                >
+                  {errors?.termsOfUse?.message}
+                </span>
               </div>
-              <span
-                style={{ marginTop: 0 }}
-                className={classNames('error-message', errors?.termsOfUse?.message ? '' : 'hide')}
-              >
-                {errors?.termsOfUse?.message}
-              </span>
-            </div>
-
-            <div className={Styles.btnContainer}>
-              <button
-                className="btn btn-tertiary"
-                type="button"
-                onClick={handleSubmit((values) => {
-                  edit ? handleEditWorkspace(values) : handleCreateWorkspace(values);
-                })}
-              >
-                {edit ? 'Save Workspace' : 'Create Workspace'}
-              </button>
             </div>
           </div>
+          <div className={Styles.formFooter}>
+            <button
+              className="btn btn-tertiary"
+              type="button"
+              onClick={handleSubmit((values) => {
+                edit ? handleEditWorkspace(values) : handleCreateWorkspace(values);
+              })}
+            >
+              {edit ? 'Save Workspace' : 'Create Workspace'}
+            </button>
+          </div>
         </div>
       </FormProvider>
     </>
diff --git a/packages/fabric-mfe/src/components/fabricWorkspaceForm/fabric-workspace-form.scss b/packages/fabric-mfe/src/components/fabricWorkspaceForm/fabric-workspace-form.scss
index 8be11aa76c..4974676758 100644
--- a/packages/fabric-mfe/src/components/fabricWorkspaceForm/fabric-workspace-form.scss
+++ b/packages/fabric-mfe/src/components/fabricWorkspaceForm/fabric-workspace-form.scss
@@ -1,142 +1,45 @@
-.content {
-  padding-top: 8px;
-  max-height: 75vh;
-  padding-right: 5px;
-  padding-bottom: 10px;
-  .formGroup {
-    .permissionField {
-      display: flex;
-      margin-left: -10px;
-      input[type="checkbox"]::after {
-          border: none;
-      }
+.form {  
+  width: 650px;
+  margin: 0 auto 20px;
+  .formHeader {
+    margin-bottom: 20px;
+    text-align: center;
+    p {
+      font-size: 12px !important;
+      margin: 0;
+      color: #acb8c4 !important;
+      text-align: center !important;
     }
-    .checkBoxDisable {
-      pointer-events: none;
-      opacity: 0.5;
-      cursor: default;
-    }
-    .flexLayout {
-      display: flex;
-      justify-content: space-between;
-      > div {
-        width: calc(50% - 15px);
-      }
-    }
-  }
-}
-.membersList {
-  padding: 0 15px 0 0;
-  max-height: 225px;
-  min-height: 225px;
-  overflow-y: auto;
-  overflow-x: hidden;
-
-  &::-webkit-scrollbar-thumb {
-    background: #00adef;
-    border-radius: 10px;
-  }
-  &::-webkit-scrollbar-track {
-    background: #293f55;
   }
-  &::-webkit-scrollbar {
-    width: 5px;
-    height: 5px;
-  }
-}
-.noMembers p {
-  margin: 0;
-  text-align: center;
-  color: #99a5b3;
-}
-.btnContainer {
+  .formFooter {
     display: flex;
     justify-content: flex-end;
-}
-.modalSubTitle {
-    border-top: 1px solid #383f49;
-    margin: 8px 0 0;
-    padding-top: 18px;
-    font-size: 15px;
-    padding-bottom: 12px;
-}
-
-.teamListWrapper {
-  margin: 8px -25px 0 -35px;
-
-  .avatarIcon {
-    width: 55px;
-    height: 55px;
-  }
-
-  .addTeamMemberWrapper {
-    min-height: 68px;
-    padding-left: 40px;
-
-    button {
-      padding: 0;
-      margin: 0 0 0 30px;
-      background: none;
-      border: none;
-      outline: none;
-      color: #c0c8d0;
-      vertical-align: middle;
-
-      i {
-        vertical-align: top;
-        margin-right: 10px;
-        color: #00adef;
-      }
-
-      &:hover span {
-        text-decoration: underline;
-      }
-    }
   }
 }
-.termsOfUseContainer {
+.flex {
   display: flex;
-  flex-direction: column;
-  min-height: 56px;
-  .termsOfUseContent {
-    display: flex;
-    margin-left: -10px;
-    .termsOfUseText {
-      margin-top: auto;
-      margin-bottom: auto;
-      color: #c0c8d0;
-      sup {
-        float: right;
-        top: -12px;
-        right: -8px;
-      }
-    }
+  justify-content: space-between;
+  flex-wrap: wrap;
+  > .col {
+    width: 100%;
   }
-}
-
-.collabAvatar {
-  padding: 0 25px 25px 0;
-  max-height: calc(90vh - 110px);
-  overflow-y: auto;
-  overflow-x: hidden;
-
-  &::-webkit-scrollbar-thumb {
-    background: #00adef;
-    border-radius: 10px;
+  > .col2 {
+    width: calc(50% - 7px);
   }
-  &::-webkit-scrollbar-track {
-    background: #293f55;
-  }
-  &::-webkit-scrollbar {
-    width: 5px;
-    height: 5px;
+  > .col3 {
+    width: calc(33.33% - 7px);
   }
 }
-
-.projectWrapper {
-  padding: 10px 0;
+.termsOfUseContent {
+  display: flex;
+  align-items: center;
+  margin-left: -10px;
+  .termsOfUseText {
+    color: #c0c8d0;
+    sup {
+      float: right;
+      top: -12px;
+      right: -8px;
+    }
+  }
 }
-
-.workspaceWrapper {
-  margin-bottom: 20px;
-}
\ No newline at end of file
diff --git a/packages/fabric-mfe/src/components/workspaces/Workspaces.js b/packages/fabric-mfe/src/components/workspaces/Workspaces.js
index 1fe6177a20..b4ca76b3d4 100644
--- a/packages/fabric-mfe/src/components/workspaces/Workspaces.js
+++ b/packages/fabric-mfe/src/components/workspaces/Workspaces.js
@@ -248,20 +248,15 @@ const Workspaces = (props) => {
       { editWorkspace &&
         <Modal
           title={'Edit Fabric Workspace'}
+          hiddenTitle={true}
           showAcceptButton={false}
           showCancelButton={false}
-          modalWidth={'60%'}
+          modalWidth={'800px'}
           buttonAlignment="right"
           show={editWorkspace}
           content={<FabricWorkspaceForm edit={true} workspace={selectedItem} onSave={() => {setEditWorkspace(false); props.callWorkspaces(); }} />}
           scrollableContent={true}
           onCancel={() => setEditWorkspace(false)}
-          modalStyle={{
-            padding: '50px 35px 35px 35px',
-            minWidth: 'unset',
-            width: '60%',
-            maxWidth: '50vw'
-          }}
         />
       }
     </>
diff --git a/packages/fabric-mfe/src/pages/fabricWorkspace/FabricWorkspace.js b/packages/fabric-mfe/src/pages/fabricWorkspace/FabricWorkspace.js
index ed2a0f59a2..edbc774c08 100644
--- a/packages/fabric-mfe/src/pages/fabricWorkspace/FabricWorkspace.js
+++ b/packages/fabric-mfe/src/pages/fabricWorkspace/FabricWorkspace.js
@@ -34,7 +34,7 @@ const FabricWorkspace = () => {
           ProgressIndicator.hide();
           setLoading(false);
           if(e?.response?.status === 403) {
-            Notification.show('Access denied', 'alert');
+            Notification.show('Unauthorized to view this page or not found', 'alert');
             history.push(`/`);
           } else {
             Notification.show(
diff --git a/packages/fabric-mfe/src/pages/fabricWorkspace/fabric-workspace.scss b/packages/fabric-mfe/src/pages/fabricWorkspace/fabric-workspace.scss
index 9eaa01c404..84674df64d 100644
--- a/packages/fabric-mfe/src/pages/fabricWorkspace/fabric-workspace.scss
+++ b/packages/fabric-mfe/src/pages/fabricWorkspace/fabric-workspace.scss
@@ -71,82 +71,6 @@
     }
   }
 }
-.membersList {
-  padding: 0 15px 0 0;
-  min-height: 225px;
-  overflow-y: auto;
-  overflow-x: hidden;
-
-  &::-webkit-scrollbar-thumb {
-    background: #00adef;
-    border-radius: 10px;
-  }
-  &::-webkit-scrollbar-track {
-    background: #293f55;
-  }
-  &::-webkit-scrollbar {
-    width: 5px;
-    height: 5px;
-  }
-}
-.modalContent {
-  padding-top: 8px;
-  .flexLayout {
-    > div {
-      width: calc(50% - 30px);
-    }
-  }
-  .teamListWrapper {
-    margin: 8px -25px 0 5px;
-  }
-  .teamMemberWrapper {
-    min-height: 68px;
-  }
-  .membersList {
-    padding: 0 15px 0 0;
-    max-height: 100px;
-    overflow-y: auto;
-    overflow-x: hidden;
-    margin-left: -40px;
-  
-    &::-webkit-scrollbar-thumb {
-      background: #00adef;
-      border-radius: 10px;
-    }
-    &::-webkit-scrollbar-track {
-      background: #293f55;
-    }
-    &::-webkit-scrollbar {
-      width: 5px;
-      height: 5px;
-    }
-  }
-  .noMembers p {
-    margin: 0;
-    text-align: center;
-    color: #99a5b3;
-  }
-  .collabAvatar {
-    padding: 0 25px 25px 0;
-    max-height: calc(90vh - 110px);
-    overflow-y: auto;
-    overflow-x: hidden;
-  }
-  .apiKey {
-    display: flex;
-    align-items: center;
-    padding: 16px 0;
-  }
-  .btnContainer {
-    display: flex;
-    justify-content: flex-end;
-  }
-}
-.noCollaborator {
-  padding-left: 40px;
-  color: #99A5B3;
-}
-
 .hide {
   display: none;
 }
diff --git a/packages/fabric-mfe/src/pages/fabricWorkspaces/FabricWorkspaces.js b/packages/fabric-mfe/src/pages/fabricWorkspaces/FabricWorkspaces.js
index 7e43125ed8..b8b0d28086 100644
--- a/packages/fabric-mfe/src/pages/fabricWorkspaces/FabricWorkspaces.js
+++ b/packages/fabric-mfe/src/pages/fabricWorkspaces/FabricWorkspaces.js
@@ -187,20 +187,15 @@ const FabricWorkspaces = (props) => {
       { createWorkspace &&
         <Modal
           title={'Create Fabric Workspace'}
+          hiddenTitle={true}
           showAcceptButton={false}
           showCancelButton={false}
-          modalWidth={'60%'}
+          modalWidth={'800px'}
           buttonAlignment="right"
           show={createWorkspace}
           content={<FabricWorkspaceForm edit={false} onSave={() => {setCreateWorkspace(false); getWorkspaces();}} />}
           scrollableContent={true}
           onCancel={() => setCreateWorkspace(false)}
-          modalStyle={{
-            padding: '50px 35px 35px 35px',
-            minWidth: 'unset',
-            width: '60%',
-            maxWidth: '50vw'
-          }}
         />
       }
     </>

From 7cc709eecb6e4a09cc37adfc55397e087795811a Mon Sep 17 00:00:00 2001
From: Khartade <aniruddhakhartade@gmail.com>
Date: Fri, 10 May 2024 18:32:28 +0530
Subject: [PATCH 2/2] delete fabric bug fix

---
 .../src/pages/fabricWorkspaces/FabricWorkspaces.js   | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/packages/fabric-mfe/src/pages/fabricWorkspaces/FabricWorkspaces.js b/packages/fabric-mfe/src/pages/fabricWorkspaces/FabricWorkspaces.js
index b8b0d28086..f3a63c2336 100644
--- a/packages/fabric-mfe/src/pages/fabricWorkspaces/FabricWorkspaces.js
+++ b/packages/fabric-mfe/src/pages/fabricWorkspaces/FabricWorkspaces.js
@@ -45,7 +45,6 @@ const FabricWorkspaces = (props) => {
     setMaxItemsPerPage(pageNum);
   };
 
-
   useEffect(() => {
     const pageNumberOnQuery = getQueryParameterByName('page');
     const currentPageNumberTemp = pageNumberOnQuery ? parseInt(getQueryParameterByName('page'), 10) : 1;
@@ -167,7 +166,16 @@ const FabricWorkspaces = (props) => {
                 </>
               ) : (
                 <div className={Styles.subscriptionList}>
-                  <Workspaces isCardView={cardViewMode} user={props.user} workspaces={workspaces} callWorkspaces={getWorkspaces} onCreateWorkspace={(val) => setCreateWorkspace(val)} />
+                  {workspaces?.length ? 
+                    <Workspaces 
+                      isCardView={cardViewMode} 
+                      user={props.user} 
+                      workspaces={workspaces} 
+                      callWorkspaces={getWorkspaces} 
+                      onCreateWorkspace={(val) => setCreateWorkspace(val)} 
+                    /> 
+                    : null
+                  }
                   {workspaces?.length ? (
                     <Pagination
                       totalPages={totalNumberOfPages}