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

feat(editor): support use tags to filter data source
Clarence5 · Sep 7, 2023 · 3e97731 · 3e97731
2 parents 1d8287a ed0a1fd
commit 3e97731
Show file tree

Hide file tree

Showing 10 changed files with 139 additions and 33 deletions.
diff --git a/packages/core/src/application.ts b/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[];
   };

diff --git a/packages/core/src/metadata.ts b/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'

diff --git a/packages/editor/src/components/ComponentForm/ComponentForm.tsx b/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 (

diff --git a/packages/editor/src/components/ComponentForm/TagForm.tsx b/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>;
 };
diff --git a/packages/editor/src/components/ComponentsList/ComponentFilter.tsx b/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}

diff --git a/packages/editor/src/components/ComponentsList/ComponentList.tsx b/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>

diff --git a/packages/editor/src/components/DataSource/DataSourceList.tsx b/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

diff --git a/packages/editor/src/components/StructureTree/ComponentSearch.tsx b/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>
   );
 });
diff --git a/packages/editor/src/components/StructureTree/StructureTree.tsx b/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}

diff --git a/packages/editor/src/services/AppStorage.ts b/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 },
     {