feat: update component designs (#3609)

Mnickii · web-flow · commit 27aa2ca4a0a6 · 2025-02-12T15:02:29.000+03:00
* update sample queries design

* update history design

* fix badge style
diff --git a/src/app/views/sidebar/history/History.tsx b/src/app/views/sidebar/history/History.tsx
@@ -89,6 +89,7 @@ const useStyles = makeStyles({
   },
   titleAside: {
     display: 'flex',
+    alignItems: 'center',
     gap: '2px'
   }
 })
@@ -117,7 +118,7 @@ interface AsideGroupIconsProps {
   historyItems: IHistoryItem[]
 }
 
-const AsideGroupIcons = (props: AsideGroupIconsProps)=>{
+const GroupIcons = (props: AsideGroupIconsProps)=>{
   const dispatch = useAppDispatch()
   const {groupName, historyItems} = props
   const [open, setOpen] = useState(false);
@@ -136,6 +137,7 @@ const AsideGroupIcons = (props: AsideGroupIconsProps)=>{
   }
 
   return <div className={styles.titleAside}>
+    <Text weight='semibold'>{groupName}{' '}</Text>
     <Tooltip withArrow relationship="label" content={`${translateMessage('Export')} ${groupName} queries`}>
       <Button onClick={
         (e) => handleDownloadHistoryGroup(e,groupName, historyItems )}
@@ -206,7 +208,6 @@ const HistoryItems = (props: HistoryProps)=>{
       body: query.result,
       headers: query.responseHeaders
     }))
-    // TODO: change the message bar type to v9 types
     dispatch(setQueryResponseStatus({
       duration,
       messageBarType: status < 300 ? 'success' : 'error',
@@ -236,11 +237,11 @@ const HistoryItems = (props: HistoryProps)=>{
               aria-setsize={2}
               aria-posinset={pos+1}
               aria-label={ariaLabel}>
-              <TreeItemLayout aside={<AsideGroupIcons groupName={name} historyItems={history} />}>
-                <Text weight='semibold'>{name}{' '}
-                  <Badge appearance='tint' color='informative' aria-label={count + translateMessage('History')}>
-                    {count}
-                  </Badge></Text>
+              <TreeItemLayout aside={
+                <Badge appearance='tint' color='informative' aria-label={count + translateMessage('History')}>
+                  {count}
+                </Badge>}>
+                <GroupIcons groupName={name} historyItems={history} />
               </TreeItemLayout>
             </FlatTreeItem>
             {openItems.has(name) &&
@@ -257,7 +258,7 @@ const HistoryItems = (props: HistoryProps)=>{
                 >
                   <TreeItemLayout
                     onClick={()=>handleViewQuery(h)}
-                    iconBefore={<HistoryStatusCodes status={h.status}/>}
+                    iconBefore={<HistoryStatusCodes status={h.status} method={h.method}/>}
                     aside={<HistoryItemActionMenu item={h}/>}>
                     <Tooltip content={`${h.method} - ${h.url}`} relationship='description' withArrow>
                       <Text>{h.url.replace(GRAPH_URL, '')}</Text>
@@ -272,16 +273,34 @@ const HistoryItems = (props: HistoryProps)=>{
   )
 }
 
-const HistoryStatusCodes = ({status}:{status: number})=>{
-  const getBadgeColor = (): BadgeColors =>{
-    if(status >= 100 && status < 199) {return 'informative'}
-    if(status >= 200 && status < 299) {return 'success'}
-    if(status >= 300 && status < 399) {return 'important'}
-    if(status >= 400 && status < 599) {return 'danger'}
-    return 'success'
-  }
-  return <Badge color={getBadgeColor()} appearance="ghost">{status}</Badge>
-}
+const HistoryStatusCodes = ({ status, method }: { status: number, method?: string }) => {
+  const getBadgeColor = (): BadgeColors => {
+    if (status >= 100 && status < 199) { return 'informative' }
+    if (status >= 200 && status < 299) { return 'success' }
+    if (status >= 300 && status < 399) { return 'important' }
+    if (status >= 400 && status < 599) { return 'danger' }
+    return 'success';
+  };
+
+  const methodColors: Record<string, BadgeColors> = {
+    GET: 'brand',
+    POST: 'success',
+    PATCH: 'severe',
+    DELETE: 'danger',
+    PUT: 'warning'
+  };
+
+  return (
+    <div style={{ display: 'flex', gap: '4px' }}>
+      {method && (
+        <Badge color={methodColors[method] || 'informative'}>
+          {method}
+        </Badge>
+      )}
+      <Badge color={getBadgeColor()} appearance="ghost">{status}</Badge>
+    </div>
+  );
+};
 
 const trackHistoryItemEvent = (eventName: string, componentName: string, query: IHistoryItem) => {
   const sanitizedUrl = sanitizeQueryUrl(query.url);
@@ -303,59 +322,6 @@ const HistoryItemActionMenu = (props: HistoryItemActionMenuProps)=>{
   const dispatch = useAppDispatch()
   const {item} = props
 
-  const handleViewQuery = (query: IHistoryItem)=>{
-    const { sampleUrl, queryVersion } = parseSampleUrl(query.url);
-    const sampleQuery: IQuery = {
-      sampleUrl,
-      selectedVerb: query.method,
-      sampleBody: query.body,
-      sampleHeaders: query.headers,
-      selectedVersion: queryVersion
-    };
-    const { duration, status, statusText } = query;
-    dispatch(setSampleQuery(sampleQuery));
-    dispatch(setQueryResponse({
-      body: query.result,
-      headers: query.responseHeaders
-    }))
-    // TODO: change the message bar type to v9 types
-    dispatch(setQueryResponseStatus({
-      duration,
-      messageBarType: status < 300 ? 'success' : 'error',
-      ok: status < 300,
-      status,
-      statusText
-    }));
-    trackHistoryItemEvent(
-      eventTypes.LISTITEM_CLICK_EVENT,
-      componentNames.HISTORY_LIST_ITEM,
-      query
-    );
-  }
-
-  const handleRunQuery = (query: IHistoryItem) =>{
-    const { sampleUrl, queryVersion } = parseSampleUrl(query.url);
-    const sampleQuery: IQuery = {
-      sampleUrl,
-      selectedVerb: query.method,
-      sampleBody: query.body,
-      sampleHeaders: query.headers,
-      selectedVersion: queryVersion
-    };
-
-    if (sampleQuery.selectedVerb === 'GET') {
-      sampleQuery.sampleBody = JSON.parse('{}') as string;
-    }
-    dispatch(setSampleQuery(sampleQuery));
-    dispatch(runQuery(sampleQuery));
-
-    trackHistoryItemEvent(
-      eventTypes.BUTTON_CLICK_EVENT,
-      componentNames.RUN_HISTORY_ITEM_BUTTON,
-      query
-    );
-  }
-
   const handleExportQuery = (query: IHistoryItem)=>{
     const harPayload = createHarEntry(query);
     const generatedHarData = generateHar([harPayload]);
@@ -386,9 +352,6 @@ const HistoryItemActionMenu = (props: HistoryItemActionMenuProps)=>{
       <MenuList>
         <MenuGroup>
           <MenuGroupHeader>{translateMessage('actions')}</MenuGroupHeader>
-          <MenuItem icon={<EyeRegular/>} onClick={()=>handleViewQuery(item)}>{translateMessage('view')}</MenuItem>
-          <MenuItem icon={<ArrowRepeatAllRegular/>}
-            onClick={()=>handleRunQuery(item)}>{translateMessage('Run Query')}</MenuItem>
           <MenuItem icon={<ArrowDownloadRegular/>}
             onClick={()=>handleExportQuery(item)}>{translateMessage('Export')}</MenuItem>
           <MenuItem icon={<DeleteRegular/>}
diff --git a/src/app/views/sidebar/resource-explorer/ResourceLink.tsx b/src/app/views/sidebar/resource-explorer/ResourceLink.tsx
@@ -1,4 +1,4 @@
-import { Tooltip, Button, Badge } from '@fluentui/react-components'
+import { Tooltip, Button, Badge, Link } from '@fluentui/react-components'
 import { SubtractSquare20Regular, AddSquare20Regular, DocumentText20Regular } from '@fluentui/react-icons';
 import { useEffect } from 'react';
 
@@ -138,24 +138,20 @@ const ResourceLinkActions = ({
         relationship='label'
       >
         {resourceLink.docLink ? (
-          <Button
+          <Link
             aria-label={translateMessage('Read documentation')}
-            id='documentButton'
-            aria-disabled={!resourceLink.docLink}
-            className={iconButtonStyles.root}
-            icon={<DocumentText20Regular />}
-            appearance='transparent'
-            onClick={() => openDocumentationLink()}
-          /> ) :
-          <Button
+            appearance='subtle'
+            className={iconButtonStyles.linkIcon}
+            target='_blank' href={resourceLink.docLink}
+            onClick={() => openDocumentationLink()}>
+            <DocumentText20Regular /></Link>) :
+          <Link
             disabled
             aria-label={translateMessage('Read documentation')}
-            id='documentButton'
+            appearance='subtle'
             aria-disabled
-            appearance='transparent'
-            className={iconButtonStyles.root}
-            icon={<DocumentText20Regular />}
-          />}
+            className={iconButtonStyles.linkIcon}>
+            <DocumentText20Regular /></Link>}
       </Tooltip>
     )}
     {resourceLink.isInCollection ? (
diff --git a/src/app/views/sidebar/resource-explorer/resourceLinkStyles.ts b/src/app/views/sidebar/resource-explorer/resourceLinkStyles.ts
@@ -33,6 +33,12 @@ export const useStyles = makeStyles({
     visibility: 'hidden',
     display: 'flex',
     alignItems: 'center'
+  },
+  linkIcon: {
+    display: 'flex',
+    '&:hover': {
+      color: tokens.colorBrandForegroundLinkHover
+    }
   }
 });
 
diff --git a/src/app/views/sidebar/sample-queries/SampleQueriesV9.tsx b/src/app/views/sidebar/sample-queries/SampleQueriesV9.tsx
@@ -60,22 +60,22 @@ const useStyles = makeStyles({
     maxWidth: '100%'
   },
   iconBefore: {
-    width: '74px',
-    maxWidth: '74px',
     display: 'flex',
     flexDirection: 'row',
     alignItems: 'center',
     gap: '2px'
   },
   badge: {
-    width: '58px',
-    maxWidth: '58px'
+    maxWidth: '50px'
   },
   disabled: {
     backgroundColor: tokens.colorSubtleBackgroundHover,
     '&:hover': {
       cursor: 'not-allowed'
     }
+  },
+  itemLayout: {
+    paddingLeft: tokens.spacingHorizontalXXL
   }
 });
 
@@ -246,6 +246,7 @@ const RenderSampleLeafs = (props: SampleLeaf) => {
             id={query.id}
           >
             <TreeItemLayout
+              className={leafStyles.itemLayout}
               onClick={()=>handleOnClick(query)}
               iconBefore={<MethodIcon isSignedIn={isSignedIn} method={query.method} />}
               aside={<ResourceLink item={query}/>}
@@ -307,8 +308,7 @@ const MethodIcon = ({ method, isSignedIn }: { method: string, isSignedIn: boolea
     <div className={sampleQueriesStyles.iconBefore}>
       <Badge
         className={sampleQueriesStyles.badge}
-        appearance="filled"
-        size='small'
+        size='medium'
         color={colors[method]}
         aria-label={'http method ' + method + ' for'}>
         {method}
