fix: correct CTA buttons (#3650)

* fix CTA buttons

* add a background color

* fix-footer

* fix permissions collapse

Author: Mnickii

src/app/views/common/popups/DrawerWrapper.tsx

@@ -8,6 +8,7 @@ import {
   Button,
   Spinner,
   makeStyles,
+  tokens,
   Tooltip
 } from '@fluentui/react-components';
 import { ArrowLeft24Regular, Dismiss24Regular } from '@fluentui/react-icons';
@@ -21,6 +22,9 @@ const useDrawerStyles = makeStyles({
   },
   button: {
     marginInlineEnd: '20px'
+  },
+  body: {
+    padding: 0
   }
 });
 
@@ -94,7 +98,7 @@ export function DrawerWrapper(props: WrapperProps) {
         </DrawerHeaderTitle>
       </DrawerHeader>
 
-      <DrawerBody>
+      <DrawerBody className={drawerStyles.body}>
         <Suspense fallback={<Spinner />}>
           <Component
             {...popupsProps}

src/app/views/sidebar/resource-explorer/ResourceExplorer.tsx

@@ -299,7 +299,7 @@ const ResourceExplorer = () => {
         items.length === 0 ? <NoResultsFound message='No resources found' /> :
           <FlatTree
             className={resourceExplorerStyles.tree}
-            aria-label="Resource Explorer"
+            aria-label={translateMessage('Resources')}
             openItems={openItems}
             onOpenChange={handleOpenChange}
           >

src/app/views/sidebar/resource-explorer/collection/APICollection.tsx

@@ -10,7 +10,8 @@ import {
   DialogSurface,
   DialogTitle,
   Button,
-  makeStyles
+  makeStyles,
+  tokens
 } from '@fluentui/react-components';
 import { Edit20Regular, Key20Regular, ArrowUpload20Regular, List20Regular } from '@fluentui/react-icons';
 import { useAppDispatch, useAppSelector } from '../../../../../store';
@@ -39,6 +40,9 @@ const useStyles = makeStyles({
     width: '100%',
     justifyContent: 'center',
     alignItems: 'center'
+  },
+  paths: {
+    marginInlineStart: tokens.spacingHorizontalL
   }
 });
 
@@ -268,7 +272,7 @@ const APICollection: React.FC<PopupsComponent<APICollection>> = (props) => {
       />
 
       {items && items.length > 0 ?
-        (<div>
+        (<div className={labelStyles.paths}>
           <Paths
             resources={items}
             columns={columns}

src/app/views/sidebar/resource-explorer/collection/CollectionPermissions.tsx

@@ -12,7 +12,8 @@ import {
   Link,
   makeStyles,
   MessageBar,
-  MessageBarBody
+  MessageBarBody,
+  tokens
 } from '@fluentui/react-components';
 import { useAppSelector } from '../../../../../store';
 import { componentNames, telemetry } from '../../../../../telemetry';
@@ -36,7 +37,8 @@ const useStyles = makeStyles({
   treeContainer: {
     height: '80vh',
     overflowY: 'auto',
-    overflowX: 'hidden'
+    overflowX: 'hidden',
+    marginBlockStart: tokens.spacingVerticalL
   }
 });
 
@@ -89,8 +91,8 @@ const CollectionPermissions: FC<PopupsComponent<null>> = (props) => {
     groupedPermissions.get(groupKey)?.push(p);
   });
 
-  const handleOpenChange = (_event: TreeOpenChangeEvent, data: TreeOpenChangeData) => {
-    setOpenItems(data.openItems);
+  const handleOpenChange = (_event: TreeOpenChangeEvent, data_: TreeOpenChangeData) => {
+    setOpenItems(data_.openItems);
   };
 
   if (!isFetching && !permissions) {
@@ -134,26 +136,29 @@ const CollectionPermissions: FC<PopupsComponent<null>> = (props) => {
         >
           {[...groupedPermissions.entries()].map(([scopeType, perms]) => (
             <React.Fragment key={scopeType}>
-              <FlatTreeItem value={scopeType} itemType="branch" aria-level={1}
-                aria-setsize={2}
+              <FlatTreeItem value={scopeType ?? ''} itemType="branch" aria-level={1}
+                aria-setsize={perms.length}
                 aria-posinset={perms.length + 1}>
                 <TreeItemLayout aside={
                   <CounterBadge count={perms.length} color="informative" />
                 }>{formatScopeLabel(scopeType as PERMS_SCOPE)}</TreeItemLayout>
               </FlatTreeItem>
-              {perms.map((permission) => {
+              {openItems.has(scopeType) &&
+              perms.map((permission) => {
                 return (
-                  <FlatTreeItem
-                    key={permission.value}
-                    value={permission.value}
-                    parentValue={scopeType}
-                    itemType="leaf"
-                    aria-level={2}
-                    aria-posinset={perms.findIndex((p) => p.value === permission.value) + 1}
-                    aria-setsize={perms.length}
-                  >
-                    <TreeItemLayout>{permission.value}</TreeItemLayout>
-                  </FlatTreeItem>
+                  <React.Fragment key={permission.value}>
+                    <FlatTreeItem
+                      key={permission.value}
+                      value={permission.value}
+                      parentValue={scopeType ?? ''}
+                      itemType="leaf"
+                      aria-level={2}
+                      aria-posinset={perms.findIndex((p) => p.value === permission.value) + 1}
+                      aria-setsize={perms.length}
+                    >
+                      <TreeItemLayout>{permission.value}</TreeItemLayout>
+                    </FlatTreeItem>
+                  </React.Fragment>
                 );
               })}
             </React.Fragment>

src/app/views/sidebar/resource-explorer/collection/CommonCollectionsPanel.tsx

@@ -1,9 +1,10 @@
 import {
   Button,
-  DialogActions,
   makeStyles,
   MessageBar,
-  MessageBarBody
+  MessageBarBody,
+  DrawerFooter,
+  tokens
 } from '@fluentui/react-components';
 import { ReactNode } from 'react';
 import { translateMessage } from '../../../../utils/translate-messages';
@@ -19,17 +20,21 @@ interface CommonCollectionsPanelProps {
 }
 
 const useStyles = makeStyles({
-  dialogFooter: {
+  drawerFooter: {
     display: 'flex',
-    justifyContent: 'start',
+    justifyContent: 'flex-start',
     position: 'sticky',
     bottom: 0,
     width: '100%',
-    marginBlockStart: '10px',
-    zIndex: 1
+    gap: tokens.spacingHorizontalXXXL,
+    paddingInline: tokens.spacingHorizontalL,
+    paddingBlock: tokens.spacingVerticalL,
+    paddingLeft: 0,
+    backgroundColor: tokens.colorNeutralBackground1,
+    marginInlineStart: tokens.spacingHorizontalL
   },
   messageBar: {
-    marginInlineStart: '15px',
+    marginInlineStart: tokens.spacingHorizontalM,
     width: '100%'
   }
 });
@@ -58,14 +63,14 @@ const CommonCollectionsPanel: React.FC<CommonCollectionsPanelProps> = ({
         </MessageBarBody>
       </MessageBar> : null}
       {children}
-      <DialogActions className={styles.dialogFooter}>
+      <DrawerFooter className={styles.drawerFooter}>
         <Button appearance="primary" onClick={primaryButtonAction} disabled={primaryButtonDisabled}>
           {translateMessage(primaryButtonText)}
         </Button>
         <Button onClick={closePopup}>
           {translateMessage('Close')}
         </Button>
-      </DialogActions>
+      </DrawerFooter>
     </>
   );
 };

src/app/views/sidebar/resource-explorer/collection/EditCollectionPanel.tsx

@@ -1,4 +1,4 @@
-import { Label, makeStyles } from '@fluentui/react-components';
+import { Label, makeStyles, tokens } from '@fluentui/react-components';
 import { translateMessage } from '../../../../utils/translate-messages';
 import { useState } from 'react';
 import { IResourceLink } from '../../../../../types/resources';
@@ -8,15 +8,15 @@ import { useAppDispatch, useAppSelector } from '../../../../../store';
 import CommonCollectionsPanel from './CommonCollectionsPanel';
 
 const useStyles = makeStyles({
-  container: {
-    height: '80vh'
-  },
   centeredLabel: {
     display: 'flex',
     width: '100%',
     justifyContent: 'center',
     alignItems: 'center',
     height: '80vh'
+  },
+  paths: {
+    marginBlockStart: tokens.spacingVerticalL
   }
 });
 
@@ -52,7 +52,7 @@ const EditCollectionPanel: React.FC<EditCollectionPanelProps> = ({ closePopup })
       closePopup={closePopup}
     >
       {items && items.length > 0 ? (
-        <div>
+        <div className={styles.paths}>
           <Paths
             resources={items}
             columns={columns}
@@ -61,7 +61,7 @@ const EditCollectionPanel: React.FC<EditCollectionPanelProps> = ({ closePopup })
           />
         </div>
       ) : (
-        <div className={styles.container}>
+        <div>
           <Label className={styles.centeredLabel}>
             {translateMessage('No items available')}
           </Label>

src/app/views/sidebar/resource-explorer/collection/EditScopePanel.tsx

@@ -16,9 +16,6 @@ import { formatScopeLabel, scopeOptions } from './collection.util';
 import CommonCollectionsPanel from './CommonCollectionsPanel';
 
 const useStyles = makeStyles({
-  container: {
-    height: '80vh'
-  },
   dropdownContainer: {
     display: 'flex',
     justifyContent: 'flex-end',
@@ -114,7 +111,7 @@ const EditScopePanel: React.FC<EditScopePanelProps> = ({ closePopup }) => {
           ))}
         </Dropdown>
       </div>
-      <div className={styles.container}>
+      <div>
         <Paths
           resources={items.map(item => pendingChanges.find(change => change.key === item.key) || item)}
           columns={columns}