Merge pull request #622 from Its-treason/feature/better-image-preview

feat(#593): Show real response in image preview
2023-10-19 23:27:22 +05:30 · 2023-10-19 23:27:22 +05:30 · 922c1ff253
commit 922c1ff253
parent f08871d491 623ac0bac6
9 changed files with 186 additions and 126 deletions
--- a/contributing_ru.md
+++ b/contributing_ru.md
@ -34,4 +34,4 @@ Bruno построен с использованием NextJs и React. Мы т
  - feature/[название функции]: Эта ветка должна содержать изменения для конкретной функции
    - Пример: feature/dark-mode
  - bugfix/[название ошибки]: Эта ветка должна содержать только исправления для конкретной ошибки
-    - Пример bugfix/bug-1
+    - Пример bugfix/bug-1
--- a/packages/bruno-app/src/components/ResponsePane/QueryResult/QueryResultPreview/index.js
+++ b/packages/bruno-app/src/components/ResponsePane/QueryResult/QueryResultPreview/index.js
@ -0,0 +1,65 @@
+import CodeEditor from 'components/CodeEditor/index';
+import { get } from 'lodash';
+import { useDispatch, useSelector } from 'react-redux';
+import { useTheme } from 'providers/theme';
+
+const QueryResultPreview = ({
+  previewTab,
+  allowedPreviewModes,
+  data,
+  dataBuffer,
+  formattedData,
+  item,
+  contentType,
+  collection,
+  mode,
+  disableRunEventListener,
+  storedTheme
+}) => {
+  const preferences = useSelector((state) => state.app.preferences);
+  const dispatch = useDispatch();
+
+  // Fail safe, so we don't render anything with an invalid tab
+  if (!allowedPreviewModes.includes(previewTab)) {
+    return null;
+  }
+
+  const onRun = () => {
+    if (disableRunEventListener) {
+      return;
+    }
+    dispatch(sendRequest(item, collection.uid));
+  };
+
+  switch (previewTab) {
+    case 'preview-web': {
+      const webViewSrc = data.replace('<head>', `<head><base href="${item.requestSent?.url || ''}">`);
+      return (
+        <webview
+          src={`data:text/html; charset=utf-8,${encodeURIComponent(webViewSrc)}`}
+          webpreferences="disableDialogs=true, javascript=yes"
+          className="h-full bg-white"
+        />
+      );
+    }
+    case 'preview-image': {
+      return <img src={`data:${contentType.replace(/\;(.*)/, '')};base64,${dataBuffer}`} className="mx-auto" />;
+    }
+    default:
+    case 'raw': {
+      return (
+        <CodeEditor
+          collection={collection}
+          font={get(preferences, 'font.codeFont', 'default')}
+          theme={storedTheme}
+          onRun={onRun}
+          value={formattedData}
+          mode={mode}
+          readOnly
+        />
+      );
+    }
+  }
+};
+
+export default QueryResultPreview;
--- a/packages/bruno-app/src/components/ResponsePane/QueryResult/index.js
+++ b/packages/bruno-app/src/components/ResponsePane/QueryResult/index.js
@ -1,137 +1,106 @@
 import React from 'react';
-import get from 'lodash/get';
-import CodeEditor from 'components/CodeEditor';
-import { useTheme } from 'providers/Theme';
-import { useDispatch, useSelector } from 'react-redux';
-import { sendRequest } from 'providers/ReduxStore/slices/collections/actions';
 import classnames from 'classnames';
 import { getContentType, safeStringifyJSON, safeParseXML } from 'utils/common';
 import { getCodeMirrorModeBasedOnContentType } from 'utils/common/codemirror';
+import QueryResultPreview from './QueryResultPreview';

 import StyledWrapper from './StyledWrapper';
 import { useState } from 'react';
 import { useMemo } from 'react';
+import { useEffect } from 'react';
+import { useTheme } from 'providers/Theme/index';
+
+const formatResponse = (data, mode) => {
+  if (!data) {
+    return '';
+  }
+
+  if (mode.includes('json')) {
+    return safeStringifyJSON(data, true);
+  }
+
+  if (mode.includes('xml')) {
+    let parsed = safeParseXML(data, { collapseContent: true });
+    if (typeof parsed === 'string') {
+      return parsed;
+    }
+
+    return safeStringifyJSON(parsed, true);
+  }
+
+  if (['text', 'html'].includes(mode) || typeof data === 'string') {
+    return data;
+  }
+
+  return safeStringifyJSON(data);
+};

 const QueryResult = ({ item, collection, data, width, disableRunEventListener, headers, error }) => {
-  const { storedTheme } = useTheme();
-  const preferences = useSelector((state) => state.app.preferences);
-  const [tab, setTab] = useState('preview');
-  const dispatch = useDispatch();
  const contentType = getContentType(headers);
  const mode = getCodeMirrorModeBasedOnContentType(contentType);
+  const formattedData = formatResponse(data, mode);
+  const { storedTheme } = useTheme();

-  const formatResponse = (data, mode) => {
-    if (!data) {
-      return '';
+  const allowedPreviewModes = useMemo(() => {
+    // Always show raw
+    const allowedPreviewModes = ['raw'];
+
+    if (mode.includes('html') && typeof data === 'string') {
+      allowedPreviewModes.unshift('preview-web');
+    } else if (mode.includes('image')) {
+      allowedPreviewModes.unshift('preview-image');
    }

-    if (mode.includes('json')) {
-      return safeStringifyJSON(data, true);
+    return allowedPreviewModes;
+  }, [mode, data, formattedData]);
+
+  const [previewTab, setPreviewTab] = useState(allowedPreviewModes[0]);
+  // Ensure the active Tab is always allowed
+  useEffect(() => {
+    if (!allowedPreviewModes.includes(previewTab)) {
+      setPreviewTab(allowedPreviewModes[0]);
    }
+  }, [previewTab, allowedPreviewModes]);

-    if (mode.includes('xml')) {
-      let parsed = safeParseXML(data, { collapseContent: true });
-
-      if (typeof parsed === 'string') {
-        return parsed;
-      }
-
-      return safeStringifyJSON(parsed, true);
-    }
-
-    if (['text', 'html'].includes(mode)) {
-      if (typeof data === 'string') {
-        return data;
-      }
-
-      return safeStringifyJSON(data);
-    }
-
-    if (mode.includes('image')) {
-      return item.requestSent.url;
-    }
-
-    // final fallback
-    if (typeof data === 'string') {
-      return data;
-    }
-
-    return safeStringifyJSON(data);
-  };
-
-  const value = formatResponse(data, mode);
-
-  const onRun = () => {
-    if (disableRunEventListener) {
-      return;
-    }
-    dispatch(sendRequest(item, collection.uid));
-  };
-
-  const getTabClassname = (tabName) => {
-    return classnames(`select-none ${tabName}`, {
-      active: tabName === tab,
-      'cursor-pointer': tabName !== tab
-    });
-  };
-
-  const getTabs = () => {
-    if (!mode.includes('html')) {
+  const tabs = useMemo(() => {
+    if (allowedPreviewModes.length === 1) {
      return null;
    }

-    return (
-      <>
-        <div className={getTabClassname('raw')} role="tab" onClick={() => setTab('raw')}>
-          Raw
-        </div>
-        <div className={getTabClassname('preview')} role="tab" onClick={() => setTab('preview')}>
-          Preview
-        </div>
-      </>
-    );
-  };
-
-  const activeResult = useMemo(() => {
-    if (
-      tab === 'preview' &&
-      mode.includes('html') &&
-      item.requestSent &&
-      item.requestSent.url &&
-      typeof data === 'string'
-    ) {
-      // Add the Base tag to the head so content loads properly. This also needs the correct CSP settings
-      const webViewSrc = data.replace('<head>', `<head><base href="${item.requestSent.url}">`);
-      return (
-        <webview
-          src={`data:text/html; charset=utf-8,${encodeURIComponent(webViewSrc)}`}
-          webpreferences="disableDialogs=true, javascript=yes"
-          className="h-full bg-white"
-        />
-      );
-    } else if (mode.includes('image')) {
-      return <img src={item.requestSent.url} alt="image" />;
-    }
-
-    return (
-      <CodeEditor
-        collection={collection}
-        font={get(preferences, 'font.codeFont', 'default')}
-        theme={storedTheme}
-        onRun={onRun}
-        value={value}
-        mode={mode}
-        readOnly
-      />
-    );
-  }, [tab, collection, storedTheme, onRun, value, mode]);
+    return allowedPreviewModes.map((previewMode) => (
+      <div
+        className={classnames('select-none capitalize', previewMode === previewTab ? 'active' : 'cursor-pointer')}
+        role="tab"
+        onClick={() => setPreviewTab(previewMode)}
+        key={previewMode}
+      >
+        {previewMode.replace(/-(.*)/, ' ')}
+      </div>
+    ));
+  }, [allowedPreviewModes, previewTab]);

  return (
    <StyledWrapper className="w-full h-full" style={{ maxWidth: width }}>
      <div className="flex justify-end gap-2 text-xs" role="tablist">
-        {getTabs()}
+        {tabs}
      </div>
-      {error ? <span className="text-red-500">{error}</span> : activeResult}
+      {error ? (
+        <span className="text-red-500">{error}</span>
+      ) : (
+        <QueryResultPreview
+          previewTab={previewTab}
+          data={data}
+          dataBuffer={item.response.dataBuffer}
+          formattedData={formattedData}
+          item={item}
+          contentType={contentType}
+          mode={mode}
+          collection={collection}
+          allowedPreviewModes={allowedPreviewModes}
+          disableRunEventListener={disableRunEventListener}
+          storedTheme={storedTheme}
+        />
+      )}
    </StyledWrapper>
  );
 };
--- a/packages/bruno-app/src/components/ResponsePane/index.js
+++ b/packages/bruno-app/src/components/ResponsePane/index.js
@ -43,6 +43,7 @@ const ResponsePane = ({ rightPaneWidth, item, collection }) => {
            data={response.data}
            headers={response.headers}
            error={response.error}
+            key={item.filename}
          />
        );
      }
--- a/packages/bruno-app/src/components/RunnerResults/ResponsePane/index.js
+++ b/packages/bruno-app/src/components/RunnerResults/ResponsePane/index.js
@ -35,6 +35,7 @@ const ResponsePane = ({ rightPaneWidth, item, collection }) => {
            disableRunEventListener={true}
            data={responseReceived.data}
            headers={responseReceived.headers}
+            key={item.filename}
          />
        );
      }
--- a/packages/bruno-app/src/components/Sidebar/CreateCollection/index.js
+++ b/packages/bruno-app/src/components/Sidebar/CreateCollection/index.js
@ -76,14 +76,12 @@ const CreateCollection = ({ onClose }) => {
            name="collectionName"
            ref={inputRef}
            className="block textbox mt-2 w-full"
-            onChange = {
-                (e) => {
-                    formik.handleChange(e);
-                    if (formik.values.collectionName === formik.values.collectionFolderName) {
-                        formik.setFieldValue("collectionFolderName", e.target.value);
-                    }
-                }
-            }
+            onChange={(e) => {
+              formik.handleChange(e);
+              if (formik.values.collectionName === formik.values.collectionFolderName) {
+                formik.setFieldValue('collectionFolderName', e.target.value);
+              }
+            }}
            autoComplete="off"
            autoCorrect="off"
            autoCapitalize="off"
--- a/packages/bruno-app/src/utils/network/index.js
+++ b/packages/bruno-app/src/utils/network/index.js
@ -8,8 +8,10 @@ export const sendNetworkRequest = async (item, collection, environment, collecti
          resolve({
            state: 'success',
            data: response.data,
+            // Note that the Buffer is encoded as a base64 string, because Buffers / TypedArrays are not allowed in the redux store
+            dataBuffer: response.dataBuffer,
            headers: Object.entries(response.headers),
-            size: getResponseSize(response),
+            size: response.size,
            status: response.status,
            statusText: response.statusText,
            duration: response.duration
@ -31,10 +33,6 @@ const sendHttpRequest = async (item, collection, environment, collectionVariable
  });
 };

-const getResponseSize = (response) => {
-  return response.headers['content-length'] || Buffer.byteLength(safeStringifyJSON(response.data)) || 0;
-};
-
 export const fetchGqlSchema = async (endpoint, environment, request, collection) => {
  return new Promise((resolve, reject) => {
    const { ipcRenderer } = window;
--- a/packages/bruno-electron/src/ipc/network/index.js
+++ b/packages/bruno-electron/src/ipc/network/index.js
@ -174,6 +174,20 @@ const configureRequest = async (collectionUid, request, envVars, collectionVaria
  return axiosInstance;
 };

+const parseDataFromResponse = (response) => {
+  const dataBuffer = Buffer.from(response.data);
+  // Parse the charset from content type: https://stackoverflow.com/a/33192813
+  const charset = /charset=([^()<>@,;:\"/[\]?.=\s]*)/i.exec(response.headers['Content-Type'] || '');
+  // Overwrite the original data for backwards compatability
+  let data = dataBuffer.toString(charset || 'utf-8');
+  // Try to parse response to JSON, this can quitly fail
+  try {
+    data = JSON.parse(response.data);
+  } catch {}
+
+  return { data, dataBuffer };
+};
+
 const registerNetworkIpc = (mainWindow) => {
  // handler for sending http request
  ipcMain.handle('send-http-request', async (event, item, collection, environment, collectionVariables) => {
@ -336,6 +350,9 @@ const registerNetworkIpc = (mainWindow) => {

      // Continue with the rest of the request lifecycle - post response vars, script, assertions, tests

+      const { data, dataBuffer } = parseDataFromResponse(response);
+      response.data = data;
+
      // run post-response vars
      const postResponseVars = get(request, 'vars.res', []);
      if (postResponseVars?.length) {
@ -448,6 +465,8 @@ const registerNetworkIpc = (mainWindow) => {
        statusText: response.statusText,
        headers: response.headers,
        data: response.data,
+        dataBuffer: dataBuffer.toString('base64'),
+        size: Buffer.byteLength(dataBuffer),
        duration: responseTime ?? 0
      };
    } catch (error) {
@ -674,6 +693,9 @@ const registerNetworkIpc = (mainWindow) => {
              response = await axiosInstance(request);
              timeEnd = Date.now();

+              const { data, dataBuffer } = parseDataFromResponse(response);
+              response.data = data;
+
              mainWindow.webContents.send('main:run-folder-event', {
                type: 'response-received',
                responseReceived: {
@ -681,20 +703,25 @@ const registerNetworkIpc = (mainWindow) => {
                  statusText: response.statusText,
                  headers: Object.entries(response.headers),
                  duration: timeEnd - timeStart,
-                  size: response.headers['content-length'] || getSize(response.data),
+                  dataBuffer: dataBuffer.toString('base64'),
+                  size: Buffer.byteLength(dataBuffer),
                  data: response.data
                },
                ...eventData
              });
            } catch (error) {
              if (error?.response) {
+                const { data, dataBuffer } = parseDataFromResponse(error.response);
+                error.response.data = data;
+
                timeEnd = Date.now();
                response = {
                  status: error.response.status,
                  statusText: error.response.statusText,
                  headers: Object.entries(error.response.headers),
                  duration: timeEnd - timeStart,
-                  size: error.response.headers['content-length'] || getSize(error.response.data),
+                  dataBuffer: dataBuffer.toString('base64'),
+                  size: Buffer.byteLength(dataBuffer),
                  data: error.response.data
                };

--- a/packages/bruno-electron/src/ipc/network/prepare-request.js
+++ b/packages/bruno-electron/src/ipc/network/prepare-request.js
@ -84,7 +84,8 @@ const prepareRequest = (request, collectionRoot) => {
  let axiosRequest = {
    method: request.method,
    url: request.url,
-    headers: headers
+    headers: headers,
+    responseType: 'arraybuffer'
  };

  axiosRequest = setAuthHeaders(axiosRequest, request, collectionRoot);