Added the save local storage function in Queries and SQL recipients

msupply-foundation · Nov 23, 2023 · 412cbaa · 412cbaa
1 parent 37a53fb
commit 412cbaa
Show file tree

Hide file tree

Showing 6 changed files with 79 additions and 16 deletions.
diff --git a/frontend/packages/common/src/intl/locales/en/system.json b/frontend/packages/common/src/intl/locales/en/system.json
@@ -53,6 +53,7 @@
   "label.notification-type-TELEGRAM": "Telegram",
   "label.notification-type-UNKNOWN": "ERROR-UNSUPPORTED-NOTIFICATION-TYPE",
   "label.parameters-query-results": "Parameters and Query Results",
+  "label.parameters-save-local":"Save parameters in local storage",
   "label.password-strength": "Password Strength",
   "label.password-warning": "Warning",
   "label.phone-number": "Phone Number",

diff --git a/frontend/packages/common/src/localStorage/keys.ts b/frontend/packages/common/src/localStorage/keys.ts
@@ -1,6 +1,7 @@
 import { SupportedLocales } from '@common/intl';
 import { ThemeOptions } from '@mui/material';
 import { AuthError } from '../authentication/AuthContext';
+import { KeyedParams } from '@common/utils';
 
 export type GroupByItem = {
   outboundShipment?: boolean;
@@ -19,6 +20,7 @@ export type LocalStorageRecord = {
   '/theme/logo': string;
   '/mru/credentials': AuthenticationCredentials;
   '/auth/error': AuthError | undefined;
+  '/query_parameters': KeyedParams;
 };
 
 export type LocalStorageKey = keyof LocalStorageRecord;
diff --git a/frontend/packages/system/src/Queries/NotificationQueries/QueryEditor.tsx b/frontend/packages/system/src/Queries/NotificationQueries/QueryEditor.tsx
@@ -24,6 +24,7 @@ import {
   Paper,
   useToggle,
   Stack,
+  useLocalStorage,
 } from '@notify-frontend/common';
 import { DraftNotificationQuery } from './types';
 import { useUpdateNotificationQuery } from '../api';
@@ -117,12 +118,25 @@ export const QueryEditor = ({
     setIsSaved(true);
   };
 
+  const [userQueryParameters, setUserQueryParameters] = useLocalStorage('/query_parameters');
+
   const allParamsSet = TeraUtils.extractParams(draft.query).every(param => {
+    let result = false;
     if (param) {
-      return queryParams[param] !== undefined; // This allows the user to set the param to an empty string if they edit the field then delete the value
+      // when queryParams has values, use queryParams for allParamsSet, if not check if userQueryParameters (local storage) has values
+      if (Object.keys(queryParams).length > 0){
+        if(userQueryParameters){
+          result = queryParams[param] !== undefined ?  true : userQueryParameters[param] !== (undefined && "");
+        }else{
+          result = queryParams[param] !== undefined; // This allows the user to set the param to an empty string if they edit the field then delete the value
+        }
+      }else{
+        result = (userQueryParameters ?? queryParams)[param] !== (undefined && "");
+      }
     } else {
-      return false;
+      result =  false;
     }
+    return result;
   });
 
   let testQueryButton = (
@@ -132,7 +146,7 @@ export const QueryEditor = ({
       isLoading={queryLoading}
       startIcon={<ZapIcon />}
       onClick={() => {
-        runQuery(draft.query, TeraUtils.keyedParamsAsTeraJson(queryParams));
+        runQuery(draft.query, TeraUtils.keyedParamsAsTeraJson(Object.keys(queryParams).length == 0? (userQueryParameters ?? queryParams) : queryParams));
       }}
     >
       {t('label.test-sql-query')}
@@ -159,6 +173,8 @@ export const QueryEditor = ({
         queryParams={queryParams}
         onUpdateQueryParams={onUpdateQueryParams}
         generatedQuery={generatedQuery}
+        userQueryParameters={userQueryParameters}
+        setUserQueryParameters={setUserQueryParameters}
       />
       {/* Description/Details section */}
       <AppBarContentPortal sx={{ paddingBottom: '16px', flex: 1 }}>

diff --git a/frontend/packages/system/src/Queries/NotificationQueries/SidePanel.tsx b/frontend/packages/system/src/Queries/NotificationQueries/SidePanel.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
-import { BufferedTextArea } from '@notify-frontend/common';
-import { Box, DetailPanelPortal, PanelLabel, PanelRow } from '@common/ui';
-import { BufferedTextInput, DetailPanelSection } from '@common/components';
+import { BufferedTextArea} from '@notify-frontend/common';
+import { Box, DetailPanelPortal, PanelLabel, PanelRow, SaveIcon } from '@common/ui';
+import { BufferedTextInput, DetailPanelSection, IconButton } from '@common/components';
 import { KeyedParams, TeraUtils } from '@common/utils';
 import { useTranslation } from '@common/intl';
 
@@ -10,18 +10,38 @@ export interface ParamsPanelProps {
   queryParams: KeyedParams;
   onUpdateQueryParams: (key: string, value: string) => void;
   generatedQuery: string;
+  userQueryParameters: KeyedParams | null;
+  setUserQueryParameters: (queryParams: KeyedParams) => void;
 }
-
 export const SidePanel = ({
   query,
   queryParams,
   onUpdateQueryParams,
   generatedQuery,
+  userQueryParameters,
+  setUserQueryParameters,
 }: ParamsPanelProps) => {
   const t = useTranslation('system');
 
+  const onSaveInLocalStorage = (queryParams: KeyedParams) => {    
+    // When param is not changed from userQueryParameters, want to save it from userQueryParameters, 
+    // whne param is changed, want to save it from queryParams
+    setUserQueryParameters(queryParams);
+  };
+
   const paramEditor = (
-    <DetailPanelSection title={t('label.parameters')}>
+    <DetailPanelSection 
+      title={t('label.parameters')}
+      actionButtons={
+        <>
+          <IconButton
+            onClick={() => onSaveInLocalStorage(queryParams)}
+            icon={<SaveIcon />}
+            label={t('label.parameters-save-local')}
+          />
+        </>
+      }  
+    >
       {TeraUtils.extractParams(query).length === 0 ? (
         <PanelRow>
           <PanelLabel>{t('message.no-parameters')}</PanelLabel>
@@ -30,6 +50,7 @@ export const SidePanel = ({
         <>
           {TeraUtils.extractParams(query).map(param => {
             return (
+
               <Box key={`param-${param}`} paddingBottom={2}>
                 <PanelRow>
                   <PanelLabel>{param}</PanelLabel>
@@ -42,7 +63,7 @@ export const SidePanel = ({
                         backgroundColor: 'white',
                       },
                     }}
-                    value={queryParams[param ?? '']}
+                    value={(userQueryParameters?? queryParams)[param ?? '']}
                     onChange={e =>
                       onUpdateQueryParams(param ?? '', e.target.value)
                     }
@@ -67,6 +88,5 @@ export const SidePanel = ({
         />
     </DetailPanelSection>
   );
-
   return <DetailPanelPortal>{paramEditor}{generatedSQLViewer}</DetailPanelPortal>;
 };
diff --git a/frontend/packages/system/src/Recipients/SqlRecipientLists/RecipientQueryEditor.tsx b/frontend/packages/system/src/Recipients/SqlRecipientLists/RecipientQueryEditor.tsx
@@ -17,6 +17,7 @@ import {
   useNotification,
   useToggle,
   useTranslation,
+  useLocalStorage,
 } from '@notify-frontend/common';
 import { DraftSqlRecipientList } from './types';
 import { useCreateSqlRecipientList, useUpdateSqlRecipientList } from '../api';
@@ -105,9 +106,12 @@ export const RecipientQueryEditor = ({
     setIsSaved(true);
   };
 
+  const [userQueryParameters, setUserQueryParameters] = useLocalStorage('/query_parameters');
+
   const allParamsSet = TeraUtils.extractParams(draft.query).every(param => {
     if (param) {
-      return queryParams[param] !== undefined; // This allows the user to set the param to an empty string if they edit the field then delete the value
+      // This allows the user to set the param to an empty string if they edit the field then delete the value
+      return (Object.keys(queryParams).length > 0)? queryParams[param] !== undefined : (userQueryParameters ?? queryParams)[param] !== (undefined || '');
     } else {
       return false;
     }
@@ -122,7 +126,7 @@ export const RecipientQueryEditor = ({
       onClick={() => {
         queryRecipients(
           draft.query,
-          TeraUtils.keyedParamsAsTeraJson(queryParams)
+          TeraUtils.keyedParamsAsTeraJson(Object.keys(queryParams).length == 0? (userQueryParameters ?? queryParams) : queryParams)
         );
       }}
     >
@@ -149,6 +153,8 @@ export const RecipientQueryEditor = ({
         query={draft.query}
         queryParams={queryParams}
         onUpdateQueryParams={onUpdateQueryParams}
+        userQueryParameters={userQueryParameters}
+        setUserQueryParameters={setUserQueryParameters}
       />
       <Grid flexDirection="column" display="flex" gap={1}>
         {isEditingName ? (

diff --git a/frontend/packages/system/src/Recipients/SqlRecipientLists/SidePanel.tsx b/frontend/packages/system/src/Recipients/SqlRecipientLists/SidePanel.tsx
@@ -1,24 +1,42 @@
 import React from 'react';
-import { Box, DetailPanelPortal, PanelLabel, PanelRow } from '@common/ui';
-import { BufferedTextInput, DetailPanelSection } from '@common/components';
+import { Box, DetailPanelPortal, PanelLabel, PanelRow, SaveIcon } from '@common/ui';
+import { BufferedTextInput, DetailPanelSection, IconButton } from '@common/components';
 import { KeyedParams, TeraUtils } from '@common/utils';
 import { useTranslation } from '@common/intl';
 
 export interface ParamsPanelProps {
   query: string;
   queryParams: KeyedParams;
   onUpdateQueryParams: (key: string, value: string) => void;
+  userQueryParameters: KeyedParams | null;
+  setUserQueryParameters: (queryParams: KeyedParams) => void;
 }
 
 export const SidePanel = ({
   query,
   queryParams,
   onUpdateQueryParams,
+  userQueryParameters,
+  setUserQueryParameters
 }: ParamsPanelProps) => {
   const t = useTranslation('system');
+  const onSaveInLocalStorage = (queryParams: KeyedParams) => {
+    setUserQueryParameters(queryParams);
+  };
 
   const paramEditor = (
-    <DetailPanelSection title={t('label.parameters')}>
+    <DetailPanelSection 
+      title={t('label.parameters')}
+      actionButtons={
+        <>
+          <IconButton
+            onClick={() => onSaveInLocalStorage(queryParams)}
+            icon={<SaveIcon />}
+            label={t('label.parameters-save-local')}
+          />
+        </>
+      }
+    >
       {TeraUtils.extractParams(query).length === 0 ? (
         <PanelRow>
           <PanelLabel>{t('message.no-parameters')}</PanelLabel>
@@ -39,7 +57,7 @@ export const SidePanel = ({
                         backgroundColor: 'white',
                       },
                     }}
-                    value={queryParams[param ?? '']}
+                    value={(userQueryParameters?? queryParams)[param ?? '']}
                     onChange={e =>
                       onUpdateQueryParams(param ?? '', e.target.value)
                     }