fix: sidebar components badge alignment (#3641)

* fix badge alignment * update locked icon desing
microsoftgraph · Feb 21, 2025 · a421750 · a421750
1 parent a71c6b1
commit a421750
Show file tree

Hide file tree

Showing 9 changed files with 91 additions and 104 deletions.
diff --git a/src/app/views/sidebar/history/History.tsx b/src/app/views/sidebar/history/History.tsx
@@ -2,6 +2,7 @@ import {
   AriaLiveAnnouncer,
   Badge,
   Button,
+  CounterBadge,
   Dialog,
   DialogActions,
   DialogBody,
@@ -61,8 +62,8 @@ import { translateMessage } from '../../../utils/translate-messages';
 import { createHarEntry, exportQuery, generateHar } from './har-utils';
 import { ResourceLinkType } from '../../../../types/resources';
 import { addResourcePaths, removeResourcePaths } from '../../../services/slices/collections.slice';
+import { METHOD_COLORS, BadgeColors } from '../sidebar-utils/SidebarUtils';
 
-type BadgeColors =  'brand' | 'danger' | 'important' | 'informative' | 'severe' | 'subtle' | 'success' | 'warning';
 const formatDate = (date: Date) => {
   const year = date.getFullYear();
   const month = date.getMonth() + 1;
@@ -72,7 +73,6 @@ const formatDate = (date: Date) => {
   return `${year}-${monthStr}-${dayStr}`;
 };
 
-
 const today = formatDate(new Date());
 const yesterdaysDate = new Date();
 const yesterday = formatDate(yesterdaysDate);
@@ -103,6 +103,13 @@ const useStyles = makeStyles({
         display: 'flex'
       }
     }
+  },
+  badgeContainer: {
+    minWidth: '50px',
+    display: 'inline-block'
+  },
+  badge: {
+    maxWidth: '50px'
   }
 })
 
@@ -299,9 +306,10 @@ const HistoryItems = (props: HistoryProps)=>{
               aria-posinset={pos+1}
               aria-label={ariaLabel}>
               <TreeItemLayout aside={
-                <Badge appearance='tint' color='informative' aria-label={count + translateMessage('History')}>
-                  {count}
-                </Badge>}>
+                <CounterBadge
+                  color='informative'
+                  aria-label={count + translateMessage('History')}
+                  count={count}/>}>
                 <GroupIcons groupName={name} historyItems={history} />
               </TreeItemLayout>
             </FlatTreeItem>
@@ -375,22 +383,18 @@ const HistoryStatusCodes = ({ status, method }: { status: number, method?: strin
     return 'success';
   };
 
-  const methodColors: Record<string, BadgeColors> = {
-    GET: 'brand',
-    POST: 'success',
-    PATCH: 'severe',
-    DELETE: 'danger',
-    PUT: 'warning'
-  };
+  const historyItemStyles = useStyles()
 
   return (
-    <div style={{ display: 'flex', gap: '4px' }}>
+    <div className={historyItemStyles.badgeContainer}>
       {method && (
-        <Badge color={methodColors[method] || 'informative'}>
-          {method}
-        </Badge>
+        <div className={historyItemStyles.badgeContainer}>
+          <Badge className={historyItemStyles.badge} color={METHOD_COLORS[method] || 'informative'}>
+            {method}
+          </Badge>
+        </div>
       )}
-      <Badge color={getBadgeColor()} appearance="ghost">{status}</Badge>
+      <Badge className={historyItemStyles.badge} color={getBadgeColor()} appearance="ghost">{status}</Badge>
     </div>
   );
 };

diff --git a/src/app/views/sidebar/resource-explorer/ResourceExplorer.tsx b/src/app/views/sidebar/resource-explorer/ResourceExplorer.tsx
@@ -27,7 +27,7 @@ import { setSampleQuery } from '../../../services/slices/sample-query.slice';
 import { GRAPH_URL } from '../../../services/graph-constants';
 import { searchResources } from '../../../utils/resources/resources-filter';
 import { translateMessage } from '../../../utils/translate-messages';
-import { NoResultsFound } from '../sidebar-utils/SearchResult';
+import { NoResultsFound } from '../sidebar-utils/SidebarUtils';
 import { createResourcesList, getResourcePaths, getUrlFromLink } from './resource-explorer.utils';
 import ResourceLink from './ResourceLink';
 import { usePopups } from '../../../services/hooks/usePopups';
@@ -203,7 +203,11 @@ const ResourceExplorer = () => {
           )}
         </div>
         {messageCount && messageCount > 0 && (
-          <CounterBadge count={messageCount} color="informative" />
+          <CounterBadge
+            count={messageCount}
+            color="informative"
+            aria-label={messageCount + translateMessage('Resources')}
+          />
         )}
       </>
     );
@@ -291,7 +295,7 @@ const ResourceExplorer = () => {
         </div>
       </div>
       {
-        items.length === 0 ? NoResultsFound('No resources found', { paddingBottom: '20px' }) :
+        items.length === 0 ? <NoResultsFound message='No resources found' /> :
           <FlatTree
             className={resourceExplorerStyles.tree}
             aria-label="Resource Explorer"

diff --git a/src/app/views/sidebar/resource-explorer/ResourceLink.tsx b/src/app/views/sidebar/resource-explorer/ResourceLink.tsx
@@ -9,15 +9,14 @@ import { validateExternalLink } from '../../../utils/external-link-validation';
 import { translateMessage } from '../../../utils/translate-messages';
 import { existsInCollection, setExisting } from './resourcelink.utils';
 import { useStyles } from './resourceLinkStyles';
+import { METHOD_COLORS } from '../sidebar-utils/SidebarUtils';
 
 interface IResourceLinkProps {
   link: IResourceLink;
   resourceOptionSelected: Function;
   version: string;
 }
 
-type Colors = 'brand' | 'danger' | 'important' | 'informative' | 'severe' | 'subtle' | 'success' | 'warning'
-
 const ResourceLink = (props: IResourceLinkProps) => {
   const { version } = props;
   const { collections } = useAppSelector(state => state.collections);
@@ -29,13 +28,6 @@ const ResourceLink = (props: IResourceLinkProps) => {
     setExisting(resourceLink, existsInCollection(link, paths, version));
   }, [paths])
 
-  const colors: Record<string, Colors> = {
-    'GET': 'brand',
-    'POST': 'success',
-    'PATCH': 'severe',
-    'DELETE': 'danger',
-    'PUT': 'warning'
-  }
 
   const linkStyles = useStyles();
 
@@ -72,7 +64,7 @@ const ResourceLink = (props: IResourceLinkProps) => {
 
   return (
     <div className={linkStyles.link}>
-      <ResourceLinkNameContainer resourceLink={resourceLink} linkStyles={linkStyles} colors={colors} />
+      <ResourceLinkNameContainer resourceLink={resourceLink} linkStyles={linkStyles} />
       {resourceLink.method && (
         <ResourceLinkActions
           resourceLink={resourceLink}
@@ -88,19 +80,17 @@ const ResourceLink = (props: IResourceLinkProps) => {
 
 const ResourceLinkNameContainer = ({
   resourceLink,
-  linkStyles,
-  colors
+  linkStyles
 }: {
   resourceLink: IResourceLink,
-  linkStyles: any,
-  colors: Record<string, Colors>
+  linkStyles: any
 }) => (
   resourceLink.method ? (
     <span className={linkStyles.resourceLinkNameContainer}>
       <Badge
         className={linkStyles.badge}
         size='medium'
-        color={colors[resourceLink.method]}
+        color={METHOD_COLORS[resourceLink.method]}
         aria-label={'http method ' + resourceLink.method + ' for'}>
         {resourceLink.method}
       </Badge>

diff --git a/src/app/views/sidebar/resource-explorer/collection/Paths.tsx b/src/app/views/sidebar/resource-explorer/collection/Paths.tsx
@@ -5,6 +5,7 @@ import { ResourcePath } from '../../../../../types/resources';
 import { formatScopeLabel, scopeOptions } from './collection.util';
 import { PERMS_SCOPE } from '../../../../services/graph-constants';
 import pathStyles from './Paths.styles';
+import { METHOD_COLORS } from '../../sidebar-utils/SidebarUtils';
 
 interface IPathProps {
   resources: ResourcePath[];
@@ -13,21 +14,11 @@ interface IPathProps {
   onSelectionChange?: (selectedItems: ResourcePath[]) => void;
 }
 
-type Colors = 'brand' | 'danger' | 'important' | 'informative' | 'severe' | 'subtle' | 'success' | 'warning'
-
 const Paths: React.FC<IPathProps> = ({ resources, columns, isSelectable, onSelectionChange }) => {
   const styles = pathStyles();
   const [selection, setSelection] = React.useState<Set<ResourcePath>>(new Set());
   const [allSelected, setAllSelected] = React.useState(false);
 
-  const colors: Record<string, Colors> = {
-    'GET': 'brand',
-    'POST': 'success',
-    'PATCH': 'severe',
-    'DELETE': 'danger',
-    'PUT': 'warning'
-  }
-
   const handleSelectionChange = (item: ResourcePath) => {
     const newSelection = new Set(selection);
     if (newSelection.has(item)) {
@@ -70,7 +61,7 @@ const Paths: React.FC<IPathProps> = ({ resources, columns, isSelectable, onSelec
             {item.method && <span className={styles.badgeContainer}><Badge
               className={styles.badge}
               size='medium'
-              color={colors[item?.method]}
+              color={METHOD_COLORS[item?.method]}
               aria-label={'http method ' + item.method + ' for'}>
               {item.method}
             </Badge></span>}

diff --git a/src/app/views/sidebar/sample-queries/SampleQueries.styles.ts b/src/app/views/sidebar/sample-queries/SampleQueries.styles.ts
@@ -11,7 +11,8 @@ export const useStyles = makeStyles({
     display: 'flex',
     flexDirection: 'row',
     alignItems: 'center',
-    gap: '2px'
+    minWidth: '50px',
+    paddingRight: '0'
   },
   badge: {
     maxWidth: '50px'

diff --git a/src/app/views/sidebar/sample-queries/SampleQueries.tsx b/src/app/views/sidebar/sample-queries/SampleQueries.tsx
@@ -39,14 +39,12 @@ import { fetchSamples } from '../../../services/slices/samples.slice';
 import { generateGroupsFromList, IGroup } from '../../../utils/generate-groups';
 import { substituteTokens } from '../../../utils/token-helpers';
 import { translateMessage } from '../../../utils/translate-messages';
-import { NoResultsFoundV9 } from '../sidebar-utils/SearchResultsV9';
+import { METHOD_COLORS, NoResultsFound } from '../sidebar-utils/SidebarUtils';
 import {
   isJsonString, performSearch, trackDocumentLinkClickedEvent, trackSampleQueryClickEvent
 } from './sample-query-utils';
 import { useStyles } from './SampleQueries.styles';
 
-type Colors = 'brand' | 'danger' | 'important' | 'informative' | 'severe' | 'subtle' | 'success' | 'warning'
-
 export const SampleQueries = () => {
   const sampleQueriesStyles = useStyles();
   const samples = useAppSelector((s) => s.samples);
@@ -217,7 +215,17 @@ const RenderSampleLeafs = (props: SampleLeaf) => {
               className={leafStyles.itemLayout}
               onClick={()=>handleOnClick(query)}
               iconBefore={<MethodIcon isSignedIn={isSignedIn} method={query.method} />}
-              aside={<ResourceLink item={query}/>}
+              aside={<>
+                {query.method !== 'GET' && !isSignedIn && <Tooltip
+                  withArrow
+                  content={translateMessage('Sign In to try this sample')}
+                  relationship='label'
+                  positioning='above-start'
+                >
+                  <LockClosed16Regular/>
+                </Tooltip>}
+                <ResourceLink item={query}/>
+              </>}
             >
               <Tooltip
                 withArrow
@@ -245,11 +253,18 @@ const RenderSampleLeafs = (props: SampleLeaf) => {
 const ResourceLink = ({item}: {item: ISampleQuery}) =>{
   const href = item.docLink ?? '';
   return (
-    <Link
-      aria-label={item.humanName + translateMessage('Read documentation')}
-      target='_blank' href={href} onClick={()=>trackDocumentLinkClickedEvent(item)}>
-      <DocumentText20Regular />
-    </Link>
+    <Tooltip
+      withArrow
+      content={translateMessage('Read documentation')
+      }
+      relationship='label'
+    >
+      <Link
+        aria-label={item.humanName + translateMessage('Read documentation')}
+        target='_blank' href={href} onClick={()=>trackDocumentLinkClickedEvent(item)}>
+        <DocumentText20Regular />
+      </Link>
+    </Tooltip>
   )
 }
 
@@ -264,31 +279,16 @@ const ResourceLink = ({item}: {item: ISampleQuery}) =>{
  */
 const MethodIcon = ({ method, isSignedIn }: { method: string, isSignedIn: boolean }) => {
   const sampleQueriesStyles = useStyles();
-  const colors: Record<string, Colors> = {
-    'GET': 'brand',
-    'POST': 'success',
-    'PATCH': 'severe',
-    'DELETE': 'danger',
-    'PUT': 'warning'
-  }
 
   return (
     <div className={sampleQueriesStyles.iconBefore}>
       <Badge
         className={sampleQueriesStyles.badge}
         size='medium'
-        color={colors[method]}
+        color={METHOD_COLORS[method]}
         aria-label={'http method ' + method + ' for'}>
         {method}
       </Badge>
-      {method !== 'GET' && !isSignedIn && <Tooltip
-        withArrow
-        content={translateMessage('Sign In to try this sample')}
-        relationship='label'
-        positioning='above-start'
-      >
-        <LockClosed16Regular/>
-      </Tooltip>}
     </div>
   )
 }
@@ -387,7 +387,7 @@ const Samples: React.FC<SamplesProps> = ({ queries, groups, searchValue }) => {
 
   return (
     <>
-      {sampleQueries.length=== 0 && <NoResultsFoundV9 message='No sample queries'/>}
+      {sampleQueries.length=== 0 && <NoResultsFound message='No sample queries'/>}
       <FlatTree
         openItems={openItems}
         onOpenChange={handleOpenChange}

diff --git a/src/app/views/sidebar/sidebar-utils/SearchResult.tsx b/src/app/views/sidebar/sidebar-utils/SearchResult.tsx
diff --git a/src/app/views/sidebar/sidebar-utils/SearchResultsV9.tsx b/src/app/views/sidebar/sidebar-utils/SearchResultsV9.tsx
diff --git a/src/app/views/sidebar/sidebar-utils/SidebarUtils.tsx b/src/app/views/sidebar/sidebar-utils/SidebarUtils.tsx
@@ -0,0 +1,28 @@
+import type { LabelProps } from '@fluentui/react-components';
+import { Label } from '@fluentui/react-components';
+import { translateMessage } from '../../../utils/translate-messages';
+
+interface LabelMessage {
+  message: string
+}
+export const NoResultsFound = (props: LabelProps & LabelMessage ) => (
+  <Label {...props}>{translateMessage(props.message)}</Label>
+);
+
+export type BadgeColors =
+  | 'brand'
+  | 'danger'
+  | 'important'
+  | 'informative'
+  | 'severe'
+  | 'subtle'
+  | 'success'
+  | 'warning';
+
+export const METHOD_COLORS: Record<string, BadgeColors> = {
+  GET: 'brand',
+  POST: 'success',
+  PATCH: 'severe',
+  DELETE: 'danger',
+  PUT: 'warning'
+};