feat: gh-141 docs list item show special attributes badges.

Only for table & grid layouts with "filterableAttributes" & "searchableAttributes" & "sortableAttributes".
riccox · Oct 18, 2024 · 1adf33e · 1adf33e
1 parent 3f62816
commit 1adf33e
Show file tree

Hide file tree

Showing 7 changed files with 91 additions and 13 deletions.
diff --git a/src/components/Document/AttrTags.tsx b/src/components/Document/AttrTags.tsx
@@ -0,0 +1,35 @@
+'use client';
+import { Tooltip } from '@arco-design/web-react';
+import { useTranslation } from 'react-i18next';
+import { Tag } from '@douyinfe/semi-ui';
+import { Settings } from 'meilisearch';
+
+export const AttrTags = ({ attr, indexSettings }: { attr: string; indexSettings: Settings }) => {
+  const { t } = useTranslation('index');
+
+  return (
+    <>
+      {indexSettings?.filterableAttributes?.includes(attr) && (
+        <Tooltip content={t('index:setting.filterableAttributes')}>
+          <Tag size="small" color="amber">
+            FL
+          </Tag>
+        </Tooltip>
+      )}
+      {indexSettings?.searchableAttributes?.includes(attr) && (
+        <Tooltip content={t('index:setting.searchableAttributes')}>
+          <Tag size="small" color="indigo">
+            SC
+          </Tag>
+        </Tooltip>
+      )}
+      {indexSettings?.sortableAttributes?.includes(attr) && (
+        <Tooltip content={t('index:setting.sortableAttributes')}>
+          <Tag size="small" color="cyan">
+            ST
+          </Tag>
+        </Tooltip>
+      )}
+    </>
+  );
+};
diff --git a/src/components/Document/GridItem.tsx b/src/components/Document/GridItem.tsx
@@ -2,17 +2,30 @@ import { Button } from '@arco-design/web-react';
 import { BaseDocItemProps, ValueDisplay } from './list';
 import { useTranslation } from 'react-i18next';
 import { Descriptions } from '@douyinfe/semi-ui';
+import { AttrTags } from './AttrTags';
+import { Settings } from 'meilisearch';
 
-export const GridItem = ({ doc, onClickDocumentDel, onClickDocumentUpdate }: BaseDocItemProps) => {
+export const GridItem = ({
+  doc,
+  onClickDocumentDel,
+  onClickDocumentUpdate,
+  indexSettings,
+}: BaseDocItemProps & { indexSettings?: Settings }) => {
   const { t } = useTranslation('document');
 
   return (
     <div
       className={`rounded-xl px-3 py-5 bg-primary-50/20 border border-transparent hover:border-primary group relative overflow-hidden`}
     >
       <Descriptions
+        align="center"
         data={Object.entries(doc.content).map(([k, v]) => ({
-          key: k,
+          key: (
+            <div className="flex justify-end items-center gap-1">
+              {indexSettings && <AttrTags attr={k} indexSettings={indexSettings} />}
+              <p>{k}</p>
+            </div>
+          ),
           value: <ValueDisplay name={k} value={v} />,
         }))}
       />

diff --git a/src/components/Document/list.tsx b/src/components/Document/list.tsx
@@ -1,7 +1,7 @@
 import { useMeiliClient } from '@/hooks/useMeiliClient';
 import { showTaskErrorNotification, showTaskSubmitNotification, stringifyJsonPretty } from '@/utils/text';
 import { toast } from '@/utils/toast';
-import { useMutation } from '@tanstack/react-query';
+import { useMutation, useQuery } from '@tanstack/react-query';
 import { useCallback, useMemo, useState } from 'react';
 import MonacoEditor from '@monaco-editor/react';
 import { useTranslation } from 'react-i18next';
@@ -13,6 +13,9 @@ import { Image, Modal } from '@douyinfe/semi-ui';
 import _ from 'lodash';
 import { Copyable } from '../Copyable';
 import { getTimeText, isValidDateTime, isValidImgUrl } from '@/utils/text';
+import { Index } from 'meilisearch';
+import { useCurrentInstance } from '@/hooks/useCurrentInstance';
+import { AttrTags } from './AttrTags';
 
 export type Doc = { indexId: string; content: Record<string, unknown>; primaryKey: string };
 export type BaseDocItemProps = {
@@ -23,6 +26,7 @@ export type BaseDocItemProps = {
 export type ListType = 'json' | 'table' | 'grid';
 
 interface Props {
+  currentIndex: Index;
   type?: ListType;
   docs?: Doc[];
   refetchDocs: () => void;
@@ -70,10 +74,22 @@ export const ValueDisplay = ({
   );
 };
 
-export const DocumentList = ({ docs = [], refetchDocs, type = 'json' }: Props) => {
+export const DocumentList = ({ docs = [], refetchDocs, type = 'json', currentIndex }: Props) => {
   const { t } = useTranslation('document');
   const client = useMeiliClient();
   const [editingDocument, setEditingDocument] = useState<Doc>();
+  const currentInstance = useCurrentInstance();
+
+  const indexSettingsQuery = useQuery({
+    queryKey: ['indexSettings', currentInstance.host, currentIndex.uid],
+    queryFn: async () => {
+      return await currentIndex.getSettings();
+    },
+  });
+
+  const indexSettings = useMemo(() => {
+    return indexSettingsQuery.data;
+  }, [indexSettingsQuery.data]);
 
   const editDocumentMutation = useMutation({
     mutationFn: async ({ indexId, docs }: { indexId: string; docs: object[] }) => {
@@ -194,9 +210,14 @@ export const DocumentList = ({ docs = [], refetchDocs, type = 'json' }: Props) =
                 )
               ),
             ].map((i) => ({
-              title: i,
+              title: (
+                <div className="flex items-center gap-1">
+                  <p>{i}</p>
+                  {indexSettings && <AttrTags attr={i} indexSettings={indexSettings} />}
+                </div>
+              ),
               dataIndex: i,
-              width: '10rem',
+              width: '15rem',
               ellipsis: true,
               render(_col, item) {
                 return <ValueDisplay name={i} value={item[i]} dateParser={false} />;
@@ -245,6 +266,7 @@ export const DocumentList = ({ docs = [], refetchDocs, type = 'json' }: Props) =
               <GridItem
                 doc={d}
                 key={i}
+                indexSettings={indexSettings}
                 onClickDocumentDel={onClickDocumentDel}
                 onClickDocumentUpdate={onClickDocumentUpdate}
               />
@@ -265,6 +287,6 @@ export const DocumentList = ({ docs = [], refetchDocs, type = 'json' }: Props) =
           })}
         </>
       ),
-    [docs, onClickDocumentDel, onClickDocumentUpdate, t, type]
+    [docs, indexSettings, onClickDocumentDel, onClickDocumentUpdate, t, type]
   );
 };
diff --git a/src/components/Document/search.tsx b/src/components/Document/search.tsx
@@ -10,6 +10,7 @@ import { Loader } from '../loader';
 import { SearchForm } from './searchForm';
 import { Button, Radio, RadioGroup } from '@douyinfe/semi-ui';
 import { exportToJSON } from '@/utils/file';
+import { Index } from 'meilisearch';
 
 const emptySearchResult = {
   hits: [],
@@ -18,7 +19,7 @@ const emptySearchResult = {
 };
 
 type Props = {
-  currentIndex: string;
+  currentIndex: Index;
 };
 
 export const DocSearchPage = ({ currentIndex }: Props) => {
@@ -31,7 +32,7 @@ export const DocSearchPage = ({ currentIndex }: Props) => {
   const client = useMeiliClient();
 
   const indexClient = useMemo(() => {
-    return currentIndex ? client.index(currentIndex) : undefined;
+    return currentIndex ? client.index(currentIndex.uid) : undefined;
   }, [client, currentIndex]);
 
   const searchForm = useForm({
@@ -173,9 +174,10 @@ export const DocSearchPage = ({ currentIndex }: Props) => {
             </div>
           ) : (
             <DocumentList
+              currentIndex={currentIndex}
               type={listType}
               docs={searchDocumentsQuery.data?.hits.map((i) => ({
-                indexId: currentIndex,
+                indexId: currentIndex.uid,
                 content: i,
                 primaryKey: indexPrimaryKeyQuery.data!,
               }))}

diff --git a/src/locales/en/index.json b/src/locales/en/index.json
@@ -29,7 +29,10 @@
         "label": "Index Configuration"
       },
       "danger_zone": "Danger Zone"
-    }
+    },
+    "filterableAttributes": "Filterable Attributes",
+    "searchableAttributes": "Searchable Attributes",
+    "sortableAttributes": "Sortable Attributes"
   },
   "search": {
     "tip": "Only the data presented on this page is searched here because Meilisearch does not provide a search interface for index lists!"

diff --git a/src/locales/zh/index.json b/src/locales/zh/index.json
@@ -29,7 +29,10 @@
         "label": "索引配置"
       },
       "danger_zone": "危险区"
-    }
+    },
+    "filterableAttributes": "可筛选属性",
+    "searchableAttributes": "可搜索属性",
+    "sortableAttributes": "可排序属性"
   },
   "search": {
     "tip": "此处仅搜索本页所展示的数据，这是因为 Meilisearch 并未提供对索引列表的搜索接口！"

diff --git a/src/routes/ins/$insID/_layout/index/$indexUID/_layout/documents/index.tsx b/src/routes/ins/$insID/_layout/index/$indexUID/_layout/documents/index.tsx
@@ -9,7 +9,7 @@ const Page = () => {
   const client = useMeiliClient();
   const currentIndex = useCurrentIndex(client);
 
-  return useMemo(() => <DocSearchPage currentIndex={currentIndex.index.uid} />, [currentIndex.index.uid]);
+  return useMemo(() => <DocSearchPage currentIndex={currentIndex.index} />, [currentIndex.index]);
 };
 export const Route = createFileRoute('/ins/$insID/_layout/index/$indexUID/_layout/documents/')({
   component: Page,