Update styles and dependencies, add loading spinners, and fix error h…

…andling
qoretechnologies · Jan 18, 2024 · 27936b9 · 27936b9
1 parent 88c20c9
commit 27936b9
Show file tree

Hide file tree

Showing 11 changed files with 58 additions and 90 deletions.
diff --git a/frontend/public/index.html b/frontend/public/index.html
@@ -6,11 +6,6 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <meta name="description" content="Web site created using create-react-app" />
-    <meta
-      http-equiv="Content-Security-Policy"
-      content="style-src vscode-resource: 'unsafe-inline' http: https: data:;"
-    />
-    <base href="%URL%" />
     <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
@@ -26,17 +21,13 @@
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
     <title>React App</title>
-    <script defer="defer" src="%MAIN_SCRIPT_NAME%"></script>
-    <script defer="defer" src="%MAIN_SCRIPT_MAP_NAME%"></script>
-    <link rel="stylesheet" href="%MAIN_CSS_NAME%" />
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="svg-defs" style="position: absolute; left: -1000px; top: -1000px">
       <svg></svg>
     </div>
     <div id="root"></div>
-    <div id="toastContainer"></div>
     <!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
@@ -65,6 +65,9 @@ const md5 = require('md5');
 const GlobalStyle = createGlobalStyle`
   html, body, #root {
     height: 100%;
+    padding: 0;
+    margin: 0;
+    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
   }
 
   .reqore-tree, .reqore-tree-textarea {

diff --git a/frontend/src/common/vscode.ts b/frontend/src/common/vscode.ts
@@ -13,7 +13,7 @@ export const username = 'IDETestUser';
 export const password = 'wegkur-hegji7-woKnez';
 export const basicAuthCredentials = `${username}:${password}`;
 export const buildWsAuth = (token: string) =>
-  process.env.NODE_ENV === 'test' || process.env.NODE_ENV === 'storybook'
+  process.env.NODE_ENV === 'test' || process.env.NODE_ENV === 'storybook' || !token
     ? `?username=${username}&password=${password}`
     : `?token=${token}`;
 
@@ -566,4 +566,4 @@ export const vscode =
         setState: () => {},
         getState: () => {},
       }
-    : acquireVsCodeApi();
+    : {};
diff --git a/frontend/src/containers/InterfaceCreator/fsm/index.tsx b/frontend/src/containers/InterfaceCreator/fsm/index.tsx
@@ -4,6 +4,7 @@ import {
   ReqoreMessage,
   ReqoreModal,
   ReqoreP,
+  ReqoreSpinner,
   ReqoreVerticalSpacer,
   useReqore,
   useReqoreProperty,
@@ -2207,9 +2208,9 @@ export const FSMView: React.FC<IFSMViewProps> = ({
 
   if (!isReady || apps.loading) {
     return (
-      <ReqoreMessage title={t('Loading')} intent="pending">
-        {t('Loading FSM...')}
-      </ReqoreMessage>
+      <ReqoreSpinner iconColor="info" centered size="huge">
+        {t('Loading...')}
+      </ReqoreSpinner>
     );
   }
 

diff --git a/frontend/src/containers/InterfacesView/collection.tsx b/frontend/src/containers/InterfacesView/collection.tsx
@@ -48,6 +48,7 @@ export const InterfacesViewCollection = ({ type, zoom }: IInterfaceViewCollectio
   };
 
   const getDraftsCount = () => {
+    console.log(value, type);
     return size(value.filter((item) => item.draft || item.hasDraft));
   };
 

diff --git a/frontend/src/helpers/functions.ts b/frontend/src/helpers/functions.ts
@@ -18,6 +18,7 @@ import omit from 'lodash/omit';
 import set from 'lodash/set';
 import size from 'lodash/size';
 import shortid from 'shortid';
+import { basicAuthCredentials } from '../common/vscode';
 import { IProviderType } from '../components/Field/connectors';
 import { IOptions, IQorusType } from '../components/Field/systemOptions';
 import { interfaceKindTransform } from '../constants/interfaces';
@@ -470,36 +471,23 @@ export const fetchData: (
   method?: string,
   body?: { [key: string]: any }
 ) => Promise<any> = async (url, method = 'GET', body) => {
-  // Create the unique ID for this request
-  const uniqueId: string = shortid.generate();
-  return new Promise((resolve, reject) => {
-    // Create a timeout that will reject the request
-    // after 2 minutes
-    let timeout: NodeJS.Timer | null = setTimeout(() => {
-      reject({
-        error: true,
-        msg: 'Request timed out',
-      });
-    }, 120000);
-    // Watch for the request to complete
-    // if the ID matches then resolve
-    const listener = addMessageListener('fetch-data-complete', (data) => {
-      if (data.id === uniqueId) {
-        clearTimeout(timeout);
-        timeout = null;
-        resolve(data);
-        //* Remove the listener after the call is done
-        listener();
-      }
-    });
-    // Fetch the data
-    postMessage('fetch-data', {
-      id: uniqueId,
-      url,
-      method,
-      body,
-    });
+  const requestData = await fetch(`https://hq.qoretechnologies.com:8092/api/latest/${url}`, {
+    method,
+    headers: {
+      'Content-Type': 'application/json',
+      Authorization: `Basic ${btoa(basicAuthCredentials)}`,
+    },
+    body: JSON.stringify(body),
   });
+
+  const json = await requestData.json();
+
+  return {
+    action: 'fetch-data-complete',
+    data: json,
+    ok: requestData.ok,
+    error: !requestData.ok ? json : undefined,
+  };
 };
 
 export { functionOrStringExp, getType };

diff --git a/frontend/src/hocomponents/withInitialData.tsx b/frontend/src/hocomponents/withInitialData.tsx
@@ -22,10 +22,14 @@ const pastTexts: { [id: string]: { isTranslated: boolean; text: string } } = {};
 export default () =>
   (Component: FunctionComponent<any>): FunctionComponent<any> => {
     const EnhancedComponent: FunctionComponent = (props: any) => {
-      const [isReady, setIsReady] = useState(false);
+      const [isReady, setIsReady] = useState(true);
       const [initialData, setInitialData] = useState<any>({
-        tab: 'ProjectConfig',
+        tab: 'Dashboard',
         sidebarOpen: false,
+        is_hosted_instance: true,
+        qorus_instance: {
+          url: `https://hq.qoretechnologies.com:8092`,
+        },
       });
       const [confirmDialog, setConfirmDialog] = useState<{
         isOpen: boolean;
@@ -39,7 +43,7 @@ export default () =>
       const [isSavingDraft, setIsSavingDraft] = useState(false);
       const [lastDraft, setLastDraft] = useState(null);
       const confirmActionReqore = useReqoreProperty('confirmAction');
-      const [texts, setTexts] = useState<{ [key: string]: string }[]>(null);
+      const [texts, setTexts] = useState<{ [key: string]: string }[]>([]);
       const [t, setT] = useState<(text_id) => string>(undefined);
       const [tabHistory, setTabHistory] = useState<
         { tab: string; subtab?: string; iface_id?: string; name?: string; draftId?: string }[]
@@ -79,7 +83,7 @@ export default () =>
             };
           });
         }
-      }, [texts]);
+      }, []);
 
       useEffectOnce(() => {
         const listeners: any = [];

diff --git a/frontend/src/hocomponents/withMessageHandler.tsx b/frontend/src/hocomponents/withMessageHandler.tsx
@@ -158,13 +158,17 @@ export const addMessageListener: TMessageListener = (
       return;
     }
 
-    const _data = typeof event.data === 'string' ? JSON.parse(event.data) : event.data;
-    // Check if the action is equal
-    if (_data[eventKey] === action) {
-      // Run the callback with the action data
-      if (callback) {
-        callback(_data);
+    try {
+      const _data = typeof event.data === 'string' ? JSON.parse(event.data) : event.data;
+      // Check if the action is equal
+      if (_data[eventKey] === action) {
+        // Run the callback with the action data
+        if (callback) {
+          callback(_data);
+        }
       }
+    } catch (e) {
+      console.error(e);
     }
   };
 

diff --git a/frontend/src/hooks/useTemplates.tsx b/frontend/src/hooks/useTemplates.tsx
@@ -1,8 +1,7 @@
 import { IReqoreFormTemplates } from '@qoretechnologies/reqore/dist/components/Textarea';
-import { useContext, useMemo } from 'react';
+import { useMemo } from 'react';
 import { useAsyncRetry } from 'react-use';
-import { InitialContext } from '../context/init';
-import { buildTemplates } from '../helpers/functions';
+import { buildTemplates, fetchData } from '../helpers/functions';
 
 export interface IUseTemplates {
   loading: boolean;
@@ -17,8 +16,6 @@ export const useTemplates = (
   allow?: boolean,
   localTemplates: IReqoreFormTemplates = {}
 ): IUseTemplates => {
-  const { fetchData }: any = useContext(InitialContext);
-
   const globalTemplates = useAsyncRetry(async () => {
     if (allow) {
       const interfaceContext = 'generic';

diff --git a/frontend/src/index.tsx b/frontend/src/index.tsx
@@ -8,7 +8,6 @@ import {
   ReqoreUIProvider,
   ReqoreVerticalSpacer,
 } from '@qoretechnologies/reqore';
-import { TReqoreHexColor } from '@qoretechnologies/reqore/dist/components/Effect';
 import { IReqoreUIProviderProps } from '@qoretechnologies/reqore/dist/containers/UIProvider';
 import { darken, lighten } from 'polished';
 import { useState } from 'react';
@@ -29,33 +28,11 @@ store.subscribe(() => {
 });
 
 const root = createRoot(document.getElementById('root'));
-const styles = getComputedStyle(document.querySelector('html')!);
-let editorBackground: TReqoreHexColor = styles.getPropertyValue(
-  '--vscode-editor-background'
-) as TReqoreHexColor;
-// Transform editorBackground to hex
-if (editorBackground.startsWith('rgb')) {
-  // Create RGB to Hex function
-  const rgbToHex = (rgb: string) => {
-    const [r, g, b] = rgb
-      .replace(/[^\d,]/g, '')
-      .split(',')
-      .map(Number);
-    return `#${((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1)}`;
-  };
-
-  editorBackground = rgbToHex(editorBackground) as TReqoreHexColor;
-}
-
-// if editorBackground hex has transparency, remove it
-if (editorBackground.length === 9) {
-  editorBackground = editorBackground.slice(0, 7) as TReqoreHexColor;
-}
 
 window.onerror = (msg, url, line, col) => {
   root.render(
     <ReqoreUIProvider
-      theme={{ main: editorBackground, intents: { success: '#4a7110' } }}
+      theme={{ intents: { success: '#4a7110' } }}
       options={{
         animations: { buttons: false },
         closePopoversOnEscPress: true,
@@ -115,15 +92,10 @@ export const ReqoreWrapper = ({
   return (
     <ReqoreUIProvider
       theme={{
-        main: theme === 'light' ? '#ffffff' : theme === 'dark' ? '#222222' : editorBackground,
+        main: theme === 'light' ? '#ffffff' : '#222222',
         intents: { success: '#4a7110' },
         breadcrumbs: {
-          main:
-            theme === 'light'
-              ? darken(0.1, '#ffffff')
-              : theme === 'dark'
-              ? lighten(0.1, '#222222')
-              : lighten(0.1, editorBackground),
+          main: theme === 'light' ? darken(0.1, '#ffffff') : lighten(0.1, '#222222'),
         },
         sidebar: theme === 'light' ? { main: '#333333' } : undefined,
         header: theme === 'light' ? { main: '#333333' } : undefined,

diff --git a/frontend/src/views/dashboard/index.tsx b/frontend/src/views/dashboard/index.tsx
@@ -32,7 +32,14 @@ export const Dashboard = () => {
   }, []);
 
   const interfaces = useAsyncRetry(async () => {
-    const data = await callBackendBasic(Messages.GET_ALL_INTERFACES, undefined);
+    const data = await callBackendBasic(
+      Messages.GET_ALL_INTERFACES,
+      undefined,
+      undefined,
+      undefined,
+      undefined,
+      true
+    );
 
     return data?.data;
   }, []);
-Original file line number
+Diff line change
@@ Expand Up @@
       };
       const getDraftsCount = () => {
+        console.log(value, type);
         return size(value.filter((item) => item.draft || item.hasDraft));
       };
@@ Expand Down @@