enhance AutoField and QodexActionExec components with metadata support and default response handling

.github/workflows/pull-request.yml

@@ -17,6 +17,9 @@ jobs:
     env:
       QORUS_TOKEN: ${{ secrets.QORUS_TOKEN }}
     # Steps represent a sequence of tasks that will be executed as part of the job
+    concurrency:
+      group: ${{ github.workflow }}-${{ github.event.pull_request.number }}
+      cancel-in-progress: true
     steps:
       # Get current time for the commit
       - name: Get current time
@@ -73,11 +76,9 @@ jobs:
         run: |
           yarn test
 
-      - name: Serve Storybook and run tests
+      - name: Run story tests
         run: |
-          npx concurrently -k -s first -n "SB,TEST" -c "magenta,blue" \
-            "npx http-server storybook-static --port 6006 --silent" \
-            "npx wait-on tcp:6006 && yarn test-storybook"
+          yarn vitest src/stories
 
       - name: Publish to Chromatic
         id: chromatic_publish

.storybook/preview.tsx

@@ -30,11 +30,14 @@ const StorybookWrapper = ({ context, Story }: any) => {
   );
 
   React.useEffect(() => {
-    if (context.args.isFullIDE) {
+    if (context.args.isFullIDE || context.args.useRealWebSockets) {
       // @ts-ignore
       window._useWebsocketsInStorybook = true;
+    } else {
+      // @ts-ignore
+      window._useWebsocketsInStorybook = false;
     }
-  }, [context.args.isFullIDE]);
+  }, [context.args.isFullIDE, context.args.useRealWebSockets]);
 
   // @ts-ignore
   React.useEffect(() => {

.vscode/settings.json

@@ -2,5 +2,6 @@
 {
   // Turn off tsc task auto detection since we have the necessary tasks as npm scripts
   "typescript.tsc.autoDetect": "off",
-  "typescript.tsdk": "node_modules/typescript/lib"
+  "typescript.tsdk": "node_modules/typescript/lib",
+  "deepscan.enable": true
 }

__tests__/fields/select.test.tsx

@@ -20,7 +20,7 @@ test('renders <SelectField /> with default items', () => {
 
   render(
     <ReqoreUIProvider>
-      <Select defaultItems={items} onChange={onChange} name="test" />
+      <Select defaultItems={items} onChange={onChange} name='test' />
     </ReqoreUIProvider>
   );
 
@@ -42,7 +42,7 @@ test('renders <SelectField /> with default items and value', () => {
 
   render(
     <ReqoreUIProvider>
-      <Select defaultItems={items} value="Test3" onChange={onChange} name="test" />
+      <Select defaultItems={items} value='Test3' onChange={onChange} name='test' />
     </ReqoreUIProvider>
   );
 
@@ -56,7 +56,7 @@ test('renders <SelectField /> with default items, onChange is fired', () => {
 
   render(
     <ReqoreUIProvider>
-      <Select defaultItems={items} onChange={onChange} name="test" />
+      <Select defaultItems={items} onChange={onChange} name='test' />
     </ReqoreUIProvider>
   );
 
@@ -79,7 +79,7 @@ test('renders <SelectField /> with 1 item, auto selects it', () => {
 
   render(
     <ReqoreUIProvider>
-      <Select defaultItems={[{ name: 'Single item' }]} autoSelect onChange={onChange} name="test" />
+      <Select defaultItems={[{ name: 'Single item' }]} autoSelect onChange={onChange} name='test' />
     </ReqoreUIProvider>
   );
 
@@ -95,7 +95,7 @@ test('renders <SelectField /> with default items with description and value', ()
 
   render(
     <ReqoreUIProvider>
-      <Select defaultItems={itemsWithDescription} value="Test3" onChange={onChange} name="test" />
+      <Select defaultItems={itemsWithDescription} value='Test3' onChange={onChange} name='test' />
     </ReqoreUIProvider>
   );
 
@@ -120,9 +120,9 @@ test('renders <SelectField /> with default items and value, with forced dropdown
     <ReqoreUIProvider>
       <Select
         defaultItems={itemsWithDescription}
-        value="Test3"
+        value='Test3'
         onChange={onChange}
-        name="test"
+        name='test'
         forceDropdown
       />
     </ReqoreUIProvider>
@@ -144,7 +144,7 @@ test('renders <SelectField /> with items fetched from backend', async () => {
         get_message={{ action: 'select-items' }}
         return_message={{ action: 'select-items-response', return_value: 'testData' }}
         onChange={onChange}
-        name="test"
+        name='test'
       />
     </ReqoreUIProvider>
   );
@@ -174,7 +174,7 @@ test('renders <SelectField /> with items fetched from backend and with filters',
         get_message={{ action: 'select-items' }}
         return_message={{ action: 'select-items-response', return_value: 'testData' }}
         onChange={onChange}
-        name="test"
+        name='test'
         filters={['filterMe']}
       />
     </ReqoreUIProvider>
@@ -189,7 +189,7 @@ test('renders <SelectField /> with items fetched from backend and with filters',
 
   expect(document.querySelectorAll('.reqore-modal').length).toBe(1);
   expect(document.querySelectorAll('.reqore-collection-item').length).toBe(4);
-  expect(document.querySelectorAll('.reqore-button-badge').length).toBe(2);
+  expect(document.querySelectorAll('.reqore-button-badge').length).toBe(3);
 
   fireEvent.click(screen.getAllByText('Filterme')[0]);
 
@@ -207,7 +207,7 @@ test('renders <SelectField /> with predicate filter', () => {
       <Select
         defaultItems={items}
         onChange={onChange}
-        name="test"
+        name='test'
         predicate={(name) => name.includes('filter me')}
       />
     </ReqoreUIProvider>

chromatic.config.json

@@ -1,5 +1,6 @@
 {
   "projectId": "Project:65aa373e9d8605ecea107ce1",
   "projectToken": "chpt_1aaa74dd9c1b035",
-  "zip": true
+  "zip": true,
+  "onlyChanged": true
 }

package.json

@@ -8,9 +8,9 @@
     "@monaco-editor/react": "^4.6.0",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.3",
     "@qoretechnologies/python-parser": "^0.4.10",
-    "@qoretechnologies/reqore": "^0.48.18",
-    "@qoretechnologies/reqraft": "^0.6.9",
-    "@qoretechnologies/ts-toolkit": "^0.4.8",
+    "@qoretechnologies/reqore": "^0.48.24",
+    "@qoretechnologies/reqraft": "^0.6.10",
+    "@qoretechnologies/ts-toolkit": "0.4.13",
     "@sentry/browser": "^7.109.0",
     "@svgr/webpack": "^5.5.0",
     "@testing-library/jest-dom": "^5.16.5",

src/App.tsx

@@ -318,6 +318,7 @@ const App: FunctionComponent<IApp> = ({
                         {tab === 'Interfaces' && <InterfacesView type={subtab} />}
                         {!tab || (tab == 'CreateInterface' && <InterfaceCreator />)}
                       </>
+                      <div id='reqore-portal' />
                     </div>
                   </div>
                 </div>

src/Topbar.tsx

@@ -10,11 +10,14 @@ import { useReqraftStorage } from '@qoretechnologies/reqraft';
 import { useState } from 'react';
 import { GlobalSearch } from './components/GlobalSearch';
 import { GlobalSettings } from './components/GlobalSettings';
+import { useWhyDidYouUpdate } from './hooks/useWhyDidYouUpdate';
 
 export const Topbar = () => {
   const [isSidebarOpen, update] = useReqraftStorage<boolean>('sidebar-open', true, false);
   const [isSettingsOpen, setIsSettingsOpen] = useState(false);
 
+  useWhyDidYouUpdate('TopBar', { isSidebarOpen, isSettingsOpen });
+
   return (
     <>
       {isSettingsOpen && (

src/common/common.scss

@@ -12,7 +12,6 @@ a:hover,
 a:focus,
 a:visited,
 a:active {
-  text-decoration: none;
   color: inherit;
 }
 

src/common/vscode.ts

@@ -414,20 +414,24 @@ export const vscode =
                 action: 'select-items-response',
                 testData: [
                   {
-                    name: 'Item 1',
+                    display_name: 'Item 1',
+                    value: 'Item 1',
                     desc: 'Item 1 description',
                   },
                   {
-                    name: 'Item 2',
+                    display_name: 'Item 2',
+                    value: 'Item 2',
                     desc: 'Item 2 description',
                   },
                   {
-                    name: 'Item 3',
+                    display_name: 'Item 3',
+                    value: 'Item 3',
                     desc: 'Item 3 description',
                     filterMe: true,
                   },
                   {
-                    name: 'Item 4',
+                    display_name: 'Item 4',
+                    value: 'Item 4',
                     desc: 'Item 4 description',
                   },
                 ],

src/components/AllowedValues/index.tsx

@@ -0,0 +1,175 @@
+import { ReqoreMultiSelect } from '@qoretechnologies/reqore';
+import { IReqoreButtonProps } from '@qoretechnologies/reqore/dist/components/Button';
+import { IReqorePanelProps } from '@qoretechnologies/reqore/dist/components/Panel';
+import { TQorusType } from '@qoretechnologies/ts-toolkit';
+import { size as count } from 'lodash';
+import { memo, useCallback, useMemo } from 'react';
+import { apiHost } from '../../common/vscode';
+import { useSavedValues } from '../../hooks/useSavedValues';
+import { ConnectionManagement } from '../ConnectionManagement';
+import Select, { ISelectFieldItem } from '../Field/select';
+
+export interface IFieldAllowedValuesProps
+  extends Pick<IReqoreButtonProps, 'size' | 'disabled' | 'readOnly'> {
+  items: ISelectFieldItem[];
+  type: TQorusType;
+  value: unknown;
+  name?: string;
+  onChange: (name: string, value: unknown) => void;
+  allowCreation?: boolean;
+  showDescription?: boolean;
+  app?: string;
+  action?: string;
+  showSavedValues?: boolean;
+}
+
+export const FieldAllowedValues = memo(
+  ({
+    items = [],
+    type,
+    onChange,
+    value,
+    allowCreation,
+    showSavedValues,
+    showDescription,
+    size,
+    disabled,
+    app,
+    action,
+    name,
+    readOnly,
+  }: IFieldAllowedValuesProps) => {
+    const savedValues = useSavedValues(type);
+
+    const getAllowedItemActionsByType = useCallback(
+      (
+        type: TQorusType,
+        item: unknown,
+        items: ISelectFieldItem[],
+        metadata?: ISelectFieldItem['metadata']
+      ): IReqorePanelProps['actions'] => {
+        switch (type) {
+          case 'connection': {
+            return [
+              {
+                as: ConnectionManagement,
+                props: {
+                  selectedConnection: item,
+                  //onChange: (value) => handleChange(name, value),
+                  allowedValues: items,
+                  redirectUri: `${apiHost}grant`,
+                  app,
+                  metadata,
+                  action,
+                  compact: true,
+                  size,
+                },
+              },
+            ];
+          }
+          default: {
+            return [];
+          }
+        }
+      },
+      [size, app, action]
+    );
+
+    const fullItems = useMemo(() => {
+      let result: ISelectFieldItem[] = [
+        ...items.map(({ metadata, ...rest }) => ({
+          actions: getAllowedItemActionsByType(type, value, items, metadata),
+          ...rest,
+        })),
+      ];
+
+      if (showSavedValues && !readOnly && !disabled) {
+        result = [
+          ...result,
+          ...savedValues.map(({ display_name, value, short_desc, actions }) => ({
+            display_name: display_name.value,
+            short_desc: short_desc.value,
+            value: value.value,
+            icon: 'SaveLine',
+            badge: 'Saved',
+            actions,
+          })),
+        ] as ISelectFieldItem[];
+      }
+
+      return result;
+    }, [items, savedValues, type, value, showSavedValues, disabled, readOnly]);
+
+    const handleMultiSelectChange = useCallback(
+      (value: string[]) => {
+        onChange(name, value);
+      },
+      [onChange]
+    );
+
+    const multiSelectItems = useMemo(
+      () =>
+        items.map((item) => ({
+          value: item.value,
+          label: item.display_name,
+          description: item.short_desc,
+          intent: item.intent,
+        })),
+      [JSON.stringify(items)]
+    );
+
+    if (!count(fullItems) || type === 'enum' || (!count(items) && !showSavedValues)) {
+      return null;
+    }
+
+    if (type === 'list' && count(items)) {
+      return (
+        <ReqoreMultiSelect
+          items={multiSelectItems}
+          canCreateItems={allowCreation}
+          canRemoveItems
+          selectedItemSize='small'
+          value={value as string[]}
+          onValueChange={handleMultiSelectChange}
+        />
+      );
+    }
+
+    // These are simple allowed values
+    if (count(items) && !allowCreation) {
+      return (
+        <Select
+          defaultItems={fullItems}
+          value={value}
+          autoSelect
+          name={name}
+          onChange={onChange}
+          type={type}
+          fluid
+          fixed={false}
+          showDescription={Boolean(showDescription || showDescription === undefined)}
+          style={{ width: '100%' }}
+          size={size}
+          disabled={disabled}
+        />
+      );
+    }
+
+    return (
+      <Select
+        defaultItems={fullItems}
+        name={name}
+        onChange={onChange}
+        type={type}
+        fluid
+        fixed={false}
+        showDescription={false}
+        style={{ width: '100%' }}
+        placeholder={'Saved & Suggested Values'}
+        size={size}
+        disabled={disabled}
+        icon='SaveFill'
+      />
+    );
+  }
+);