fix: sample bug, history regressions

src/app/views/app-sections/StatusMessages.tsx

@@ -16,8 +16,8 @@ const intentMap: { [key: string]: MessageBarIntent } = {
 
 const StatusMessages = () => {
   const dispatch = useAppDispatch();
-  const queryRunnerStatus = useAppSelector((state)=> state.queryRunnerStatus);
-  const sampleQuery = useAppSelector((state)=> state.sampleQuery);
+  const queryRunnerStatus = useAppSelector((state) => state.queryRunnerStatus);
+  const sampleQuery = useAppSelector((state) => state.sampleQuery);
 
   function setQuery(link: string) {
     const query: IQuery = { ...sampleQuery };
@@ -27,26 +27,26 @@ const StatusMessages = () => {
     dispatch(setSampleQuery(query));
   }
 
-  if (queryRunnerStatus) {
-    const { messageBarType, statusText, status, duration, hint } = queryRunnerStatus;  return <MessageBar
-      intent={intentMap[messageBarType]}
-      politeness='assertive'
-    >
-      <MessageBarBody>
-        <MessageDisplay message={`**${statusText} - **${status.toString()}`} onSetQuery={setQuery} />
-
-        {duration && <>
-          {` - ${duration} ${translateMessage('milliseconds')}`}
-        </>}
+  if (
+    !queryRunnerStatus?.status ||
+    typeof queryRunnerStatus.status === 'string' && queryRunnerStatus.status.trim() === ''
+  ) {
+    return <div />;
+  }
 
+  const { messageBarType, statusText, status, duration, hint } = queryRunnerStatus;
+  return (
+    <MessageBar intent={intentMap[messageBarType]} politeness='assertive'>
+      <MessageBarBody>
+        <MessageDisplay message={`**${statusText} - **${status}`} onSetQuery={setQuery} />
+        {duration && <> - {duration} {translateMessage('milliseconds')}</>}
         {status === 403 && <>
           {translateMessage('consent to scopes')}
           <span style={{ fontWeight: 600 }}>
             {translateMessage('modify permissions')}
           </span>
           {translateMessage('tab')}
         </>}
-
         {hint && <div>{hint}</div>}
       </MessageBarBody>
       <MessageBarActions
@@ -59,9 +59,8 @@ const StatusMessages = () => {
           />
         }
       />
-    </MessageBar>;
-  }
-  return <div />;
-}
+    </MessageBar>
+  );
+};
 
-export default StatusMessages;
+export default StatusMessages;

src/app/views/query-response/response/ResponseDisplay.tsx

@@ -23,7 +23,7 @@ const ResponseDisplay = (props: ResponseDisplayProps) => {
   default:
     if (isImageResponse(contentType) && typeof body !== 'string') {
       return (
-        <Image styles={{ padding: '10px', height: '300px', width: '300px' }} body={body} alt='profile image' />
+        <Image styles={{ padding: '10px', height: '240px', width: '240px' }} body={body} alt='profile image' />
       );
     }
     return (

src/app/views/sidebar/history/History.styles.ts

@@ -0,0 +1,41 @@
+import { makeStyles } from '@fluentui/react-components'
+export const useHistoryStyles = makeStyles({
+  container: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '4px'
+  },
+  tree: {
+    height: 'calc(100vh - 374px)',
+    overflowY: 'auto'
+  },
+  searchBox: {
+    width: '100%',
+    maxWidth: '100%'
+  },
+  titleAside: {
+    display: 'flex',
+    alignItems: 'center',
+    gap: '2px'
+  },
+  historyAsideIcons: {
+    display: 'none'
+  },
+  historyTreeItemLayout: {
+    ':hover': {
+      '& [data-history-aside]': {
+        display: 'flex'
+      }
+    }
+  },
+  badgeContainer: {
+    minWidth: '50px',
+    display: 'inline-flex'
+  },
+  badge: {
+    maxWidth: '50px'
+  },
+  text: {
+    overflow: 'hidden'
+  }
+})

src/app/views/sidebar/history/History.tsx

@@ -14,7 +14,6 @@ import {
   FlatTreeItem,
   InputOnChangeData,
   Label,
-  makeStyles,
   Menu,
   MenuGroup,
   MenuGroupHeader,
@@ -63,6 +62,7 @@ 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';
+import { useHistoryStyles } from './History.styles';
 
 const formatDate = (date: Date) => {
   const year = date.getFullYear();
@@ -78,41 +78,6 @@ const yesterdaysDate = new Date();
 const yesterday = formatDate(yesterdaysDate);
 yesterdaysDate.setDate(yesterdaysDate.getDate() - 1);
 
-const useStyles = makeStyles({
-  container: {
-    display: 'flex',
-    flexDirection: 'column',
-    gap: '4px',
-    height: 'calc(100vh - 374px)'
-  },
-  searchBox: {
-    width: '100%',
-    maxWidth: '100%'
-  },
-  titleAside: {
-    display: 'flex',
-    alignItems: 'center',
-    gap: '2px'
-  },
-  historyAsideIcons: {
-    display: 'none'
-  },
-  historyTreeItemLayout: {
-    ':hover': {
-      '& [data-history-aside]': {
-        display: 'flex'
-      }
-    }
-  },
-  badgeContainer: {
-    minWidth: '50px',
-    display: 'inline-block'
-  },
-  badge: {
-    maxWidth: '50px'
-  }
-})
-
 const handleDownloadHistoryGroup = (
   event: React.MouseEvent<HTMLButtonElement>, value: string,
   historyItems: IHistoryItem[])=>{
@@ -134,14 +99,15 @@ const handleDownloadHistoryGroup = (
 
 interface AsideGroupIconsProps {
   groupName: string
-  historyItems: IHistoryItem[]
+  historyItems: IHistoryItem[],
+  shouldGenerateGroups: React.MutableRefObject<boolean>
 }
 
 const GroupIcons = (props: AsideGroupIconsProps)=>{
   const dispatch = useAppDispatch()
   const {groupName, historyItems} = props
   const [open, setOpen] = useState(false);
-  const styles = useStyles()
+  const styles = useHistoryStyles()
 
   const handleDeleteHistoryGroup = (event: React.MouseEvent<HTMLButtonElement>)=>{
     event.preventDefault()
@@ -152,6 +118,7 @@ const GroupIcons = (props: AsideGroupIconsProps)=>{
     });
     historyCache.bulkRemoveHistoryData(listOfKeys)
     dispatch(removeAllHistoryItems(listOfKeys));
+    props.shouldGenerateGroups.current = true
     setOpen(false)
   }
 
@@ -165,7 +132,14 @@ const GroupIcons = (props: AsideGroupIconsProps)=>{
     <Dialog open={open} onOpenChange={(_event, data) => setOpen(data.open)}>
       <DialogTrigger disableButtonEnhancement>
         <Tooltip withArrow relationship="label" content={`${translateMessage('Delete')} ${groupName} queries`}>
-          <Button appearance="subtle" icon={<DeleteRegular/>}></Button>
+          <Button
+            appearance="subtle"
+            icon={<DeleteRegular/>}
+            onClick={(e) => {
+              e.stopPropagation();
+              setOpen(true);
+            }}
+          />
         </Tooltip>
       </DialogTrigger>
       <DialogSurface>
@@ -175,7 +149,15 @@ const GroupIcons = (props: AsideGroupIconsProps)=>{
           </DialogContent>
           <DialogActions>
             <DialogTrigger disableButtonEnhancement>
-              <Button appearance="secondary">{translateMessage('Cancel')}</Button>
+              <Button
+                appearance="secondary"
+                onClick={(e) => {
+                  e.stopPropagation();
+                  setOpen(false);
+                }}
+              >
+                {translateMessage('Cancel')}
+              </Button>
             </DialogTrigger>
             <Button
               onClick={handleDeleteHistoryGroup}
@@ -200,12 +182,13 @@ interface HistoryProps {
 const HistoryItems = (props: HistoryProps)=>{
   const dispatch = useAppDispatch()
   const {groups, history} = props
+  const shouldGenerateGroups = useRef(true);
 
   const openHistoryItems = new Set<string>()
   'Today'.split('').forEach(ch=> openHistoryItems.add(ch))
   openHistoryItems.add('Today')
 
-  const itemStyles = useStyles()
+  const itemStyles = useHistoryStyles()
 
   const [openItems, setOpenItems] = useState<Set<TreeItemValue>>(
     () => openHistoryItems
@@ -292,7 +275,12 @@ const HistoryItems = (props: HistoryProps)=>{
 
 
   return(
-    <FlatTree openItems={openItems} aria-label={translateMessage('History')} onOpenChange={handleOpenChange}>
+    <FlatTree
+      className={itemStyles.tree}
+      openItems={openItems}
+      aria-label={translateMessage('History')}
+      onOpenChange={handleOpenChange}
+    >
       {groups.map((group, pos) => {
         const {name, ariaLabel, count, key, startIndex} = group
         const historyLeafs = history.slice(startIndex, startIndex + count)
@@ -310,7 +298,7 @@ const HistoryItems = (props: HistoryProps)=>{
                   color='informative'
                   aria-label={count + translateMessage('History')}
                   count={count}/>}>
-                <GroupIcons groupName={name} historyItems={history} />
+                <GroupIcons groupName={name} historyItems={history} shouldGenerateGroups={shouldGenerateGroups} />
               </TreeItemLayout>
             </FlatTreeItem>
             {openItems.has(name) &&
@@ -383,7 +371,7 @@ const HistoryStatusCodes = ({ status, method }: { status: number, method?: strin
     return 'success';
   };
 
-  const historyItemStyles = useStyles()
+  const historyItemStyles = useHistoryStyles()
 
   return (
     <div className={historyItemStyles.badgeContainer}>
@@ -493,7 +481,7 @@ const getItems = (content: IHistoryItem[]): IHistoryItem[] => {
 
 
 const History = ()=>{
-  const styles = useStyles()
+  const styles = useHistoryStyles()
   const history = useAppSelector(state=> state.history)
   const [historyItems, setHistoryItems] = useState<IHistoryItem[]>(history)
   const [searchValue, setSearchValue] = useState<string>('');
@@ -545,7 +533,7 @@ const History = ()=>{
     </MessageBar>
     {historyItems.length === 0 && <Label size='medium'>{translateMessage('We did not find any history items')}</Label>}
     <AriaLiveAnnouncer><Text>{`${historyItems.length} search results available.`}</Text></AriaLiveAnnouncer>
-    <HistoryItems history={historyItems} searchValue={searchValue} groups={groups}></HistoryItems>
+    <HistoryItems history={items} searchValue={searchValue} groups={groups}></HistoryItems>
   </div>
 }
 

src/app/views/sidebar/sample-queries/SampleQueries.tsx

@@ -355,6 +355,11 @@ const Samples: React.FC<SamplesProps> = ({ queries, groups, searchValue }) => {
   };
 
   const sampleQueryItemSelected = (item: ISampleQuery)=>{
+    dispatch(setQueryResponseStatus({
+      messageBarType: '',
+      statusText: '',
+      status: ''
+    }));
     const queryVersion = item.requestUrl.substring(1, 5);
     const sampleQuery: IQuery = {
       sampleUrl: GRAPH_URL + item.requestUrl,