fix: correct history items order and request body updates (#3822)

Author: ElinorW

src/app/services/actions/query-action-creator-util.ts

@@ -215,25 +215,23 @@ export const parseResponse = async (response: ResponseBody): Promise<ResponseBod
   const headers = getHeaders(response);
   const contentType = getContentType(headers);
 
-  try {
-    switch (contentType) {
-    case 'application/json': {
-      const text = await response.text();
-      return tryParseJson(text);
-    }
-    case 'application/xml':
-    case 'text/html':
-    case 'text/csv':
-    case 'text/plain':
-      return await response.text();
-    default:
-      if (response.status === 204) {
-        return '';
-      }
-      return await response.text();
-    }
-  } catch {
-    return '';
+  switch (true) {
+  case contentType.includes('application/json'): {
+    const text = await response.text();
+    return tryParseJson(text);
+  }
+
+  case contentType.includes('application/xml'):
+  case contentType.includes('text/html'):
+  case contentType.includes('text/csv'):
+  case contentType.includes('text/plain'):
+    return await response.text();
+
+  case contentType.startsWith('image/'):
+    return response;
+
+  default:
+    return response;
   }
 };
 

src/app/views/common/monaco/Monaco.tsx

@@ -68,6 +68,7 @@ const Monaco = ({ body, onChange, language, readOnly, extraInfoElement, isVisibl
         <div id=' monaco-editor'  className={styles.container}>
           {extraInfoElement}
           <Editor
+            key={formattedBody}
             language={language || 'json'}
             width='100%'
             height='100%'

src/app/views/layout/Layout.tsx

@@ -71,8 +71,11 @@ export const Layout = (props: LayoutProps) => {
   }, [mobileScreen]);
 
 
-  const handleOnEditorChange = (value?: string) => {
-    setSampleBody(value!);
+  const handleOnEditorChange = (value: string | undefined) => {
+    dispatch(setSampleQuery({
+      ...sampleQuery,
+      sampleBody: value
+    }));
   };
 
   const handleToggleSelect = (toggled: boolean) => {

src/app/views/query-runner/request/Request.tsx

@@ -32,7 +32,7 @@ import {
   MoreHorizontalRegular } from '@fluentui/react-icons';
 
 interface IRequestProps {
-  handleOnEditorChange: () => void;
+  handleOnEditorChange: (value: string | undefined) => void;
   sampleQuery: IQuery;
 }
 

src/app/views/sidebar/Sidebar.styles.tsx

@@ -23,7 +23,7 @@ export const useSidebarStyles = makeStyles({
     flexGrow: 1,
     overflowY: 'auto',
     padding: '5px',
-    maxHeight: 'calc(100vh - 100px)'
+    maxHeight: 'calc(100vh - 400px)'
   },
   searchBox: {
     width: '100%',

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

@@ -91,8 +91,8 @@ const formatDate = (date: Date) => {
 
 const today = formatDate(new Date());
 const yesterdaysDate = new Date();
-const yesterday = formatDate(yesterdaysDate);
 yesterdaysDate.setDate(yesterdaysDate.getDate() - 1);
+const yesterday = formatDate(yesterdaysDate);
 
 const handleDownloadHistoryGroup = (
   event: React.MouseEvent<HTMLButtonElement>, value: string,

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

@@ -74,7 +74,7 @@ const APICollection: React.FC<PopupsComponent<APICollection>> = (props) => {
   }
 
   const columns = [
-    { key: 'url', name: 'URL', fieldName: 'url', minWidth: 300, maxWidth: 1100, isResizable: true },
+    { key: 'url', name: 'URL', fieldName: 'url', minWidth: 300, maxWidth: 800, isResizable: true },
     { key: 'scope', name: 'Scope', fieldName: 'scope', minWidth: 150, maxWidth: 200, isResizable: true }
   ];
 
@@ -272,10 +272,12 @@ const APICollection: React.FC<PopupsComponent<APICollection>> = (props) => {
       />
 
       {items && items.length > 0 ?
-        (<Paths
-          resources={items}
-          columns={columns}
-        />
+        (<div style={{height
+        : '80vh'
+        }}><Paths
+            resources={items}
+            columns={columns}
+          /></div>
         ) :
         (
           <Label className={labelStyles.labelStyle}>

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

@@ -23,7 +23,7 @@ const useStyles = makeStyles({
   drawerFooter: {
     display: 'flex',
     justifyContent: 'flex-start',
-    position: 'sticky',
+    position: 'fixed',
     bottom: 0,
     width: '100%',
     gap: tokens.spacingHorizontalXXXL,

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

@@ -28,7 +28,7 @@ const EditCollectionPanel: React.FC<EditCollectionPanelProps> = ({ closePopup })
   const items = collections && collections.length > 0 ? collections.find(k => k.isDefault)!.paths : [];
 
   const columns = [
-    { key: 'url', name: 'URL', fieldName: 'url', minWidth: 300, maxWidth: 1100, isResizable: true },
+    { key: 'url', name: 'URL', fieldName: 'url', minWidth: 300, maxWidth: 800, isResizable: true },
     { key: 'scope', name: 'Scope', fieldName: 'scope', minWidth: 150, maxWidth: 200, isResizable: true }
   ];
 

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

@@ -56,7 +56,7 @@ const EditScopePanel: React.FC<EditScopePanelProps> = ({ closePopup }) => {
   }, [selectedItems]);
 
   const columns = [
-    { key: 'url', name: 'URL', fieldName: 'url', minWidth: 300, maxWidth: 1100, isResizable: true },
+    { key: 'url', name: 'URL', fieldName: 'url', minWidth: 300, maxWidth: 800, isResizable: true },
     { key: 'scope', name: 'Scope', fieldName: 'scope', minWidth: 150, maxWidth: 200, isResizable: true }
   ];