Merge pull request #1125 from merico-dev/1124-show-filter-name-as-lab…

…el-in-querys-run-condition-selector

1124 show filter name as label in querys run condition selector

api/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@devtable/api",
-  "version": "10.17.0",
+  "version": "10.18.0",
   "description": "",
   "main": "index.js",
   "scripts": {

dashboard/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@devtable/dashboard",
-  "version": "10.17.0",
+  "version": "10.18.0",
   "license": "Apache-2.0",
   "publishConfig": {
     "access": "public",

dashboard/src/components/widgets/custom-selector-item/index.tsx

@@ -0,0 +1,21 @@
+import { Group, Stack, Text } from '@mantine/core';
+import { forwardRef } from 'react';
+interface ItemProps extends React.ComponentPropsWithoutRef<'div'> {
+  image: string;
+  label: string;
+  description: string;
+}
+
+export const CustomSelectorItem = forwardRef<HTMLDivElement, ItemProps>((props: ItemProps, ref) => {
+  const { label, description, ...rest } = props;
+  return (
+    <div ref={ref} {...rest}>
+      <Group position="apart" noWrap>
+        <Text>{label}</Text>
+        <Text size="xs" color="dimmed">
+          {description}
+        </Text>
+      </Group>
+    </div>
+  );
+});

dashboard/src/dashboard-editor/ui/settings/content/edit-query/query-editor-form/configurations.tsx

@@ -5,6 +5,7 @@ import { useEffect, useState } from 'react';
 import { QueryRenderModelInstance } from '~/model';
 import { DeleteQuery } from './delete-query';
 import { SelectDataSource } from './select-data-source';
+import { CustomSelectorItem } from '~/components/widgets/custom-selector-item';
 
 interface IQueryConfigurations {
   queryModel: QueryRenderModelInstance;
@@ -60,6 +61,8 @@ export const QueryConfigurations = observer(({ queryModel }: IQueryConfiguration
           data={queryModel.conditionOptions}
           value={[...queryModel.run_by]}
           onChange={queryModel.setRunBy}
+          itemComponent={CustomSelectorItem}
+          maxDropdownHeight={500}
         />
         {queryModel.typedAsHTTP && (
           <MultiSelect
@@ -68,6 +71,8 @@ export const QueryConfigurations = observer(({ queryModel }: IQueryConfiguration
             data={queryModel.conditionOptions}
             value={[...queryModel.react_to]}
             onChange={queryModel.setReactTo}
+            itemComponent={CustomSelectorItem}
+            maxDropdownHeight={500}
           />
         )}
 

dashboard/src/model/render-model/dashboard/content/queries/mute-query.ts

@@ -1,3 +1,4 @@
+import { SelectItem } from '@mantine/core';
 import _ from 'lodash';
 import { getRoot, Instance, isAlive } from 'mobx-state-tree';
 import { QueryMeta } from '~/model';
@@ -8,15 +9,24 @@ export const MuteQueryModel = QueryMeta.views((self) => ({
       return [];
     }
     // @ts-expect-error untyped getRoot(self)
-    const { context, filters } = getRoot(self).content.payloadForSQL;
-    const contextOptions = Object.keys({ ...context }).map((k) => `context.${k}`);
-    const filterOptions = Object.keys(filters).map((k) => `filters.${k}`);
-    const keys = [...contextOptions, ...filterOptions];
-    return keys.map((k) => ({
-      label: k.split('.')[1],
-      value: k,
-      group: _.capitalize(k.split('.')[0]),
+    const contentModel = getRoot(self).content;
+
+    const { context } = contentModel.payloadForSQL;
+    const contextOptions: SelectItem[] = Object.keys(context).map((k) => ({
+      group: 'Context',
+      label: k,
+      value: `context.${k}`,
+      description: undefined,
+    }));
+
+    const filterOptions: SelectItem[] = contentModel.filters.keyLabelOptions.map((o: SelectItem) => ({
+      group: 'Filters',
+      label: o.label,
+      value: `filters.${o.value}`,
+      description: o.value,
     }));
+
+    return [...contextOptions, ...filterOptions];
   },
   get unmetRunByConditions() {
     // this computed has dependencies on reactive values outside the model,

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@devtable/root",
-  "version": "10.17.0",
+  "version": "10.18.0",
   "private": true,
   "workspaces": [
     "api",

settings-form/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@devtable/settings-form",
-  "version": "10.17.0",
+  "version": "10.18.0",
   "license": "Apache-2.0",
   "publishConfig": {
     "access": "public",

website/package.json

@@ -2,7 +2,7 @@
   "name": "@devtable/website",
   "private": true,
   "license": "Apache-2.0",
-  "version": "10.17.0",
+  "version": "10.18.0",
   "scripts": {
     "dev": "vite",
     "preview": "vite preview"