Remove console.log statements and update test data

qoretechnologies · Jan 18, 2024 · f030ce6 · f030ce6
1 parent 5b9e1a6
commit f030ce6
Show file tree

Hide file tree

Showing 31 changed files with 33,405 additions and 23,682 deletions.
diff --git a/frontend/build-storybook.log b/frontend/build-storybook.log
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
@@ -232,7 +232,6 @@ const App: FunctionComponent<IApp> = ({
   }, []);
 
   useMount(() => {
-    console.log('mounting');
     if (isWebSocketSupported && is_hosted_instance) {
       createOrGetWebSocket(qorus_instance, 'creator', {
         onOpen: () => {

diff --git a/frontend/src/common/vscode.ts b/frontend/src/common/vscode.ts
@@ -1,9 +1,9 @@
-import { reduce, size } from 'lodash';
 import { Messages } from '../constants/messages';
 import configItems from '../stories/Data/configItems';
 import directories from '../stories/Data/directories.json';
 import fields from '../stories/Data/fields.json';
 import items from '../stories/Data/interfaces.json';
+import interfacesWithCount from '../stories/Data/interfacesWithCount.json';
 import objects from '../stories/Data/objects.json';
 import projectConfig from '../stories/Data/projectConfig.json';
 import { sleep } from '../stories/Tests/utils';
@@ -38,6 +38,9 @@ export const vscode =
 
               break;
             }
+            case 'save-draft': {
+              break;
+            }
             case 'get-all-text':
               messageData = {
                 action: 'return-all-text',
@@ -94,19 +97,10 @@ export const vscode =
             }
             case Messages.GET_ALL_INTERFACES_COUNT: {
               messageData = {
-                action: `${Messages.GET_ALL_INTERFACES_COUNT}-complete`,
-                data: reduce(
-                  items,
-                  (newItems, item, type) => ({
-                    ...newItems,
-                    [type]: {
-                      items: size(items[type]),
-                    },
-                  }),
-                  {}
-                ),
+                ...interfacesWithCount,
                 request_id: data.request_id,
               };
+
               break;
             }
             case 'get-latest-draft': {

diff --git a/frontend/src/components/Field/select.tsx b/frontend/src/components/Field/select.tsx
@@ -313,8 +313,6 @@ const SelectField: React.FC<ISelectField & IField & IReqoreControlGroupProps> =
     return item?.desc || item?.short_desc;
   };
 
-  console.log(filteredItems);
-
   const reqoreItems: IReqoreMenuItemProps[] = filteredItems.map((item) => ({
     label: item.name,
     description: getItemDescription(item.name),

diff --git a/frontend/src/components/Field/systemOptions.tsx b/frontend/src/components/Field/systemOptions.tsx
@@ -30,6 +30,7 @@ import { InitialContext } from '../../context/init';
 import { TextContext } from '../../context/text';
 import { insertAtIndex } from '../../helpers/functions';
 import { hasAllDependenciesFullfilled, validateField } from '../../helpers/validations';
+import { useTemplates } from '../../hooks/useTemplates';
 import { Description } from '../Description';
 import AutoField from './auto';
 import { NegativeColorEffect, PositiveColorEffect } from './multiPair';
@@ -172,7 +173,7 @@ export interface IOptionsSchemaArg {
   sensitive?: boolean;
   desc?: string;
   arg_schema?: IOptionsSchema;
-  disallow_template?: boolean;
+  supports_templates?: boolean;
 
   app?: string;
   action?: string;
@@ -248,6 +249,7 @@ export interface IOptionsProps extends Omit<IReqoreCollectionProps, 'onChange'>
   readOnly?: boolean;
   allowTemplates?: boolean;
   stringTemplates?: IReqoreTextareaProps['templates'];
+  interfaceContext?: string;
 }
 
 export const getTypeAndCanBeNull = (
@@ -274,6 +276,8 @@ export const getTypeAndCanBeNull = (
   };
 };
 
+const templatesCache: { [key: string]: IReqoreTextareaProps['templates'] } = {};
+
 const Options = ({
   name,
   value,
@@ -391,6 +395,8 @@ const Options = ({
     }
   }, [operatorsUrl, qorus_instance]);
 
+  const templates = useTemplates(allowTemplates, rest.stringTemplates);
+
   const handleValueChange = (
     optionName: string,
     currentValue: any = {},
@@ -622,7 +628,7 @@ const Options = ({
     );
   }
 
-  if ((operatorsUrl && !operators) || (!rest.options && !options)) {
+  if ((operatorsUrl && !operators) || (!rest.options && !options) || templates.loading) {
     return (
       <ReqorePanel fill flat transparent>
         <ReqoreSpinner
@@ -789,8 +795,8 @@ const Options = ({
                 ) : null}
                 <TemplateField
                   {...options[optionName]}
-                  allowTemplates={allowTemplates && !options[optionName].disallow_template}
-                  templates={rest?.stringTemplates}
+                  allowTemplates={!!(allowTemplates && options[optionName].supports_templates)}
+                  templates={templates.value}
                   component={AutoField}
                   {...getTypeAndCanBeNull(type, options[optionName].allowed_values, other.op)}
                   className="system-option"

diff --git a/frontend/src/components/Field/template.tsx b/frontend/src/components/Field/template.tsx
@@ -5,14 +5,13 @@ import {
   ReqoreTag,
   ReqoreTagGroup,
 } from '@qoretechnologies/reqore';
+import { IReqoreTextareaProps } from '@qoretechnologies/reqore/dist/components/Textarea';
 import { useContext, useState } from 'react';
-import { useAsyncRetry, useUpdateEffect } from 'react-use';
-import { templatesList } from '../../containers/ConfigItemManager/modal';
+import { useUpdateEffect } from 'react-use';
 import { TextContext } from '../../context/text';
-import { fetchData } from '../../helpers/functions';
-import Loader from '../Loader';
-import Select from './select';
-import String from './string';
+import { filterTemplatesByType } from '../../helpers/functions';
+import Auto from './auto';
+import LongStringField from './longString';
 
 /**
  * It checks if a string starts with a dollar sign, contains a colon, and if the text between the
@@ -24,10 +23,8 @@ export const isValueTemplate = (value?: any) => {
   if (typeof value !== 'string' || !value?.startsWith('$') || !value?.includes(':')) {
     return false;
   }
-  // Get everything between first $ and first colon
-  const template = value.substring(value.indexOf('$') + 1, value.indexOf(':'));
-  // Check if the template matches a template from the list
-  return templatesList.includes(template);
+
+  return true;
 };
 
 /**
@@ -61,67 +58,59 @@ export interface ITemplateFieldProps {
   onChange?: (name: string, value: any) => void;
   // React element
   component: React.FC<any>;
-  [key: string]: any;
-  templateContext?: 1 | 2 | 4 | 7 | 8 | 15;
+  interfaceContext?: string;
   allowTemplates?: boolean;
+  templates?: IReqoreTextareaProps['templates'];
+  [key: string]: any;
 }
 
 export const TemplateField = ({
   value,
   name,
   onChange,
-  component: Comp,
-  templateContext = 15,
+  component: Comp = Auto,
+  templates,
+  interfaceContext,
   allowTemplates = true,
   ...rest
 }: ITemplateFieldProps) => {
   const [isTemplate, setIsTemplate] = useState<boolean>(isValueTemplate(value));
-  const [templateKey, setTemplateKey] = useState<string | null>(getTemplateKey(value));
-  const [templateValue, setTemplateValue] = useState<string | null>(getTemplateValue(value));
-
-  const templates = useAsyncRetry(async () => {
-    if (allowTemplates) {
-      const serverTemplates = await fetchData(`/system/templates?filter=${templateContext}`);
-
-      if (serverTemplates.ok) {
-        return serverTemplates.data;
-      }
-
-      return null;
-    }
-    return null;
-  }, [allowTemplates]);
-
-  useUpdateEffect(() => {
-    if (isValueTemplate(value)) {
-      setIsTemplate(true);
-      setTemplateKey(getTemplateKey(value));
-      setTemplateValue(getTemplateValue(value));
-    } else {
-      setIsTemplate(false);
-      setTemplateKey(null);
-      setTemplateValue(null);
-    }
-  }, [value]);
+  const [templateValue, setTemplateValue] = useState<string | null>(value);
+  const t = useContext(TextContext);
 
   // When template key or template value change run the onChange function
   useUpdateEffect(() => {
-    if (templateKey && templateValue) {
-      onChange?.(name, `$${templateKey}:${templateValue}`);
+    if (templateValue) {
+      onChange?.(name, templateValue);
     }
-  }, [templateKey, templateValue]);
-
-  const t = useContext(TextContext);
-
-  if (!allowTemplates) {
-    return <Comp value={value} onChange={onChange} name={name} {...rest} />;
+  }, [templateValue]);
+
+  const disableTemplateTab =
+    !allowTemplates ||
+    (rest.type !== 'number' &&
+      rest.type !== 'boolean' &&
+      rest.type !== 'date' &&
+      rest.type !== 'bool' &&
+      rest.type !== 'int');
+
+  if (disableTemplateTab) {
+    return (
+      <Comp
+        value={value}
+        onChange={onChange}
+        name={name}
+        {...rest}
+        className={`${rest.className} template-selector`}
+        templates={allowTemplates ? filterTemplatesByType(templates, rest.type) : undefined}
+      />
+    );
   }
 
   if (rest.disabled) {
     if (isTemplate) {
       return (
         <ReqoreTagGroup>
-          <ReqoreTag labelKey={`$${templateKey}:`} label={templateValue} />
+          <ReqoreTag label={templateValue} />
         </ReqoreTagGroup>
       );
     }
@@ -158,7 +147,6 @@ export const TemplateField = ({
       onTabChange={(newTabId: string): void => {
         if (newTabId === 'custom') {
           setIsTemplate(false);
-          setTemplateKey(null);
           setTemplateValue(null);
           onChange(name, null);
         } else {
@@ -171,28 +159,16 @@ export const TemplateField = ({
         <Comp value={value} onChange={onChange} name={name} {...rest} />
       </ReqoreTabsContent>
       <ReqoreTabsContent tabId={'template'}>
-        {templates.loading && <Loader />}
-        {templates.value ? (
-          <ReqoreControlGroup fluid stack fill>
-            <Select
-              defaultItems={templates.value.map((template) => template)}
-              onChange={(_n, val) => setTemplateKey(val)}
-              value={templateKey}
-              name="templateKey"
-              icon="ExchangeDollarLine"
-              className="template-selector"
-            />
-            <ReqoreTag label=":" />
-            <String
-              fill
-              fillVertically
-              type="string"
-              name="templateVal"
-              value={templateValue}
-              onChange={(_n, val) => setTemplateValue(val)}
-            />
-          </ReqoreControlGroup>
-        ) : null}
+        <ReqoreControlGroup fluid stack fill>
+          <LongStringField
+            className="template-selector"
+            type="string"
+            name="templateVal"
+            value={templateValue}
+            templates={allowTemplates ? filterTemplatesByType(templates, rest.type) : undefined}
+            onChange={(_n, val) => setTemplateValue(val)}
+          />
+        </ReqoreControlGroup>
       </ReqoreTabsContent>
     </ReqoreTabs>
   );