mercedes-benz · agnelpraveen · May 13, 2024 · May 10, 2024 · May 10, 2024 · May 13, 2024
diff --git 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
@@ -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
diff --git 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;
-}
diff --git 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
@@ -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
@@ -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
@@ -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}
@@ -187,20 +195,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'
-          }}
         />
       }
     </>