Merge pull request #725 from smartxworks/feat/datasource-tag

feat(editor): support use tags to filter data source

packages/core/src/application.ts

@@ -1,12 +1,12 @@
-import { Metadata } from './metadata';
+import { ApplicationMetadata } from './metadata';
 import { parseVersion, Version } from './version';
 import { type PropsBeforeEvaled } from './schema';
 // spec
 
 export type Application = {
   version: string;
   kind: 'Application';
-  metadata: Metadata;
+  metadata: ApplicationMetadata;
   spec: {
     components: ComponentSchema[];
   };

packages/core/src/metadata.ts

@@ -10,6 +10,10 @@ export type Metadata<
   isDataSource?: boolean;
 };
 
+export type ApplicationMetadata = Metadata<{
+  componentsTagMap?: Record<string, string[]>;
+}>;
+
 type ComponentCategory =
   | (string & {})
   | 'Layout'

packages/editor/src/components/ComponentForm/ComponentForm.tsx

@@ -12,6 +12,7 @@ import ErrorBoundary from '../ErrorBoundary';
 import { StyleTraitForm } from './StyleTraitForm';
 import { EditorServices } from '../../types';
 import { FormSection } from './FormSection';
+import { TagForm } from './TagForm';
 
 // avoid the expression tip would be covered
 const ComponentFormStyle = css`
@@ -127,6 +128,10 @@ export const ComponentForm: React.FC<Props> = observer(props => {
       title: 'Traits',
       node: <GeneralTraitFormList component={selectedComponent} services={services} />,
     },
+    {
+      title: 'Tags',
+      node: <TagForm services={services} />,
+    },
   ];
 
   return (

packages/editor/src/components/ComponentForm/TagForm.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import { Text, VStack, Checkbox } from '@chakra-ui/react';
+import { EditorServices } from '../../types';
+
+type Props = {
+  services: EditorServices;
+};
+
+export const TagForm: React.FC<Props> = ({ services }) => {
+  const { editorStore } = services;
+  const tagMap = editorStore.app.metadata.annotations?.componentsTagMap;
+  const componentId = editorStore.selectedComponentId;
+
+  if (!tagMap) return null;
+
+  const tagItems = Object.keys(tagMap).map(tag => {
+    const checked = tagMap[tag].includes(editorStore.selectedComponentId);
+
+    const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+      const newTagMap = tagMap;
+      const nextValue = e.target.checked;
+      if (nextValue) {
+        newTagMap[tag].push(componentId);
+      } else {
+        newTagMap[tag] = tagMap[tag].filter(id => id !== componentId);
+      }
+      services.editorStore.appStorage.saveAppAnnotations({
+        componentsTagMap: newTagMap,
+      });
+    };
+
+    return (
+      <Checkbox key={tag} defaultChecked={checked} onChange={onChange}>
+        <Text>{tag}</Text>
+      </Checkbox>
+    );
+  });
+
+  return <VStack align="flex-start">{tagItems}</VStack>;
+};

packages/editor/src/components/ComponentsList/ComponentFilter.tsx

@@ -57,37 +57,43 @@ const FilterIcon = createIcon({
 });
 
 type FilterProps = {
-  versions: string[];
-  checkedVersions: string[];
-  setCheckedVersions: React.Dispatch<React.SetStateAction<string[]>>;
+  options: string[];
+  checkedOptions: string[];
+  onChange: (v: string[]) => void;
 };
 
 export const ComponentFilter: React.FC<FilterProps> = ({
-  versions,
-  checkedVersions,
-  setCheckedVersions,
+  options,
+  checkedOptions,
+  onChange,
 }) => {
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const checked = e.target.checked;
     const value = e.target.value;
-    const newCheckedVersions = [...checkedVersions];
+    const newCheckedOptions = [...checkedOptions];
     if (checked) {
-      newCheckedVersions.push(value);
+      newCheckedOptions.push(value);
     } else {
-      const idx = newCheckedVersions.findIndex(c => c === value);
-      newCheckedVersions.splice(idx, 1);
+      const idx = newCheckedOptions.findIndex(c => c === value);
+      newCheckedOptions.splice(idx, 1);
     }
-    setCheckedVersions(newCheckedVersions);
+    onChange(newCheckedOptions);
   };
 
   const checkVersion = (version: string) => {
-    return checkedVersions.includes(version);
+    return checkedOptions.includes(version);
   };
 
   return (
     <Popover isLazy closeOnBlur placement="bottom">
       <PopoverTrigger>
-        <Button _focus={{ boxShadow: 'none' }} bg="transparent" h="1.75rem" size="sm">
+        <Button
+          _focus={{ boxShadow: 'none' }}
+          colorScheme="blue"
+          variant={checkedOptions.length > 0 ? 'solid' : 'ghost'}
+          h="1.75rem"
+          size="sm"
+        >
           <FilterIcon />
         </Button>
       </PopoverTrigger>
@@ -110,7 +116,7 @@ export const ComponentFilter: React.FC<FilterProps> = ({
           width="200px"
           _focus={{ boxShadow: 'none' }}
         >
-          {versions.map(version => {
+          {options.map(version => {
             return (
               <Checkbox
                 key={version}

packages/editor/src/components/ComponentsList/ComponentList.tsx

@@ -113,9 +113,9 @@ export const ComponentList: React.FC<Props> = ({ services }) => {
         />
         <InputRightElement>
           <ComponentFilter
-            versions={versions}
-            checkedVersions={checkedVersions}
-            setCheckedVersions={setCheckedVersions}
+            options={versions}
+            checkedOptions={checkedVersions}
+            onChange={setCheckedVersions}
           />
         </InputRightElement>
       </InputGroup>

packages/editor/src/components/DataSource/DataSourceList.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useMemo } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
 import {
   VStack,
   Spacer,
@@ -21,6 +21,7 @@ import { generateDefaultValueFromSpec } from '@sunmao-ui/shared';
 import { JSONSchema7 } from 'json-schema';
 import { ToolMenuTabs } from '../../constants/enum';
 import { ComponentSearch } from '../StructureTree/ComponentSearch';
+import { ComponentSchema } from '@sunmao-ui/core';
 
 interface Props {
   services: EditorServices;
@@ -30,8 +31,23 @@ export const DataSourceList: React.FC<Props> = props => {
   const { services } = props;
   const { editorStore, eventBus, registry } = services;
   const { dataSources, setSelectedComponentId, setToolMenuTab } = editorStore;
-  const tDataSources = dataSources.filter(ds => ds.type === 'core/v1/dummy');
-  const cDataSources = dataSources.filter(ds => ds.type !== 'core/v1/dummy');
+  const [checkedTags, setCheckedTags] = useState<string[]>([]);
+  const tagMap = services.editorStore.app.metadata.annotations?.componentsTagMap;
+  // filter datasources by tag
+  const filteredDataSources = useMemo(() => {
+    if (!tagMap || checkedTags.length === 0) {
+      return dataSources;
+    }
+
+    const dataSourceIds = checkedTags.reduce<string[]>((result, curr) => {
+      return result.concat(tagMap[curr]);
+    }, []);
+
+    return dataSources.filter(d => dataSourceIds.includes(d.id)) as ComponentSchema[];
+  }, [checkedTags, dataSources, tagMap]);
+
+  const tDataSources = filteredDataSources.filter(ds => ds.type === 'core/v1/dummy');
+  const cDataSources = filteredDataSources.filter(ds => ds.type !== 'core/v1/dummy');
   const cdsMap = groupBy(cDataSources, c => c.type);
   const tdsMap = groupBy(tDataSources, c => c.traits[0]?.type || '');
   const cdsGroups = Object.keys(cdsMap).map(type => {
@@ -165,6 +181,9 @@ export const DataSourceList: React.FC<Props> = props => {
         components={dataSources}
         onChange={id => setSelectedComponentId(id)}
         services={props.services}
+        tags={tagMap ? Object.keys(tagMap) : []}
+        checkedTags={checkedTags}
+        onTagsChange={v => setCheckedTags(v)}
       />
       <Accordion
         reduceMotion

packages/editor/src/components/StructureTree/ComponentSearch.tsx

@@ -4,9 +4,14 @@ import { css } from '@emotion/css';
 import { observer } from 'mobx-react-lite';
 import { ComponentSchema } from '@sunmao-ui/core';
 import { Select } from '@sunmao-ui/editor-sdk';
+import { ComponentFilter } from '../ComponentsList/ComponentFilter';
+import { HStack } from '@chakra-ui/react';
 type Props = {
   components: ComponentSchema[];
   onChange: (id: string) => void;
+  tags: string[];
+  checkedTags: string[];
+  onTagsChange: (v: string[]) => void;
   services: EditorServices;
 };
 
@@ -28,7 +33,7 @@ const SelectStyle = css`
 `;
 
 export const ComponentSearch: React.FC<Props> = observer(props => {
-  const { components, onChange } = props;
+  const { components, onChange, tags, checkedTags, onTagsChange } = props;
 
   const options = useMemo(() => {
     return components.map(c => ({
@@ -38,15 +43,24 @@ export const ComponentSearch: React.FC<Props> = observer(props => {
   }, [components]);
 
   return (
-    <Select
-      bordered={false}
-      className={SelectStyle}
-      placeholder="Search component"
-      onSelect={onChange}
-      showArrow={false}
-      showSearch
-      style={{ width: '100%' }}
-      options={options}
-    />
+    <HStack width="full">
+      <Select
+        bordered={false}
+        className={SelectStyle}
+        placeholder="Search component"
+        onSelect={onChange}
+        showArrow={false}
+        showSearch
+        style={{ width: '100%' }}
+        options={options}
+      />
+      {tags.length > 0 ? (
+        <ComponentFilter
+          options={tags}
+          checkedOptions={checkedTags}
+          onChange={v => onTagsChange(v)}
+        />
+      ) : null}
+    </HStack>
   );
 });

packages/editor/src/components/StructureTree/StructureTree.tsx

@@ -102,6 +102,9 @@ export const StructureTree: React.FC<Props> = observer(props => {
           Components
         </Text>
         <ComponentSearch
+          tags={[]}
+          checkedTags={[]}
+          onTagsChange={() => null}
           components={components}
           onChange={id => setSelectedComponentId(id)}
           services={props.services}

packages/editor/src/services/AppStorage.ts

@@ -1,6 +1,7 @@
 import { observable, makeObservable, action, toJS } from 'mobx';
 import {
   Application,
+  ApplicationMetadata,
   ComponentSchema,
   Module,
   ModuleMethodSpec,
@@ -159,6 +160,20 @@ export class AppStorage {
     this.saveApplication();
   }
 
+  saveAppAnnotations(annotations: ApplicationMetadata['annotations']) {
+    if (!annotations) return;
+    const newApp = produce(toJS(this.app), draft => {
+      if (!draft.metadata.annotations) {
+        draft.metadata.annotations = {};
+      }
+      Object.keys(annotations).forEach(key => {
+        draft.metadata.annotations![key] = annotations[key];
+      });
+    });
+    this.setApp(newApp);
+    this.saveApplication();
+  }
+
   saveModuleMetaData(
     { originName, originVersion }: { originName: string; originVersion: string },
     {