feat: consumer credentials list, add page

Author: SkyeYoung

src/apis/credentials.ts

@@ -0,0 +1,45 @@
+import { API_CREDENTIALS, SKIP_INTERCEPTOR_HEADER } from '@/config/constant';
+import { req } from '@/config/req';
+import type { APISIXType } from '@/types/schema/apisix';
+import type { APISIXListResponse } from '@/types/schema/apisix/type';
+import { queryOptions } from '@tanstack/react-query';
+
+type WithUsername = Pick<APISIXType['Consumer'], 'username'>;
+export const getCredentialListQueryOptions = (props: WithUsername) => {
+  const { username } = props;
+  return queryOptions({
+    queryKey: ['credentials', username],
+    queryFn: () =>
+      req
+        .get<unknown, APISIXType['RespCredentialList']>(
+          API_CREDENTIALS(username),
+          {
+            headers: {
+              [SKIP_INTERCEPTOR_HEADER]: ['404'],
+            },
+          }
+        )
+        .then((v) => v.data)
+        .catch((e) => {
+          // 404 means credentials is empty
+          if (e.response.status === 404) {
+            const res: APISIXListResponse<APISIXType['Credential']> = {
+              total: 0,
+              list: [],
+            };
+            return res;
+          }
+          throw e;
+        }),
+  });
+};
+
+export const putCredentialReq = (
+  data: APISIXType['CredentialPut'] & WithUsername
+) => {
+  const { username, id, ...rest } = data;
+  return req.put<
+    APISIXType['CredentialPut'],
+    APISIXType['RespCredentialDetail']
+  >(`${API_CREDENTIALS(username)}/${id}`, rest);
+};

src/apis/plugins.ts

@@ -38,13 +38,13 @@ export const getPluginsListQueryOptions = () => {
     queryKey: ['plugins-list'],
     queryFn: () =>
       req
-        .get<unknown, APISIXType['RespPluginsList']>(API_PLUGINS_LIST)
+        .get<unknown, APISIXType['RespPluginList']>(API_PLUGINS_LIST)
         .then((v) => v.data),
   });
 };
 
 export const getPluginsListWithSchemaQueryOptions = (
-  props: APISIXType['PluginsQuery'] & NeedPluginSchema = { schema: 'normal' }
+  props: APISIXType['PluginsQuery'] & NeedPluginSchema = { schema: 'schema' }
 ) => {
   const { subsystem, schema } = props;
   return queryOptions({

src/components/form-slice/FormItemPlugins/PluginCardList.tsx

@@ -10,7 +10,7 @@ import {
 import { PluginCard, type PluginCardProps } from './PluginCard';
 import { useTranslation } from 'react-i18next';
 import { observer, useLocalObservable } from 'mobx-react-lite';
-import { useLayoutEffect } from 'react';
+import { useEffect } from 'react';
 
 type PluginCardListSearchProps = Pick<TextInputProps, 'placeholder'> & {
   search: string;
@@ -91,9 +91,18 @@ const PluginCardListCore = (props: PluginCardListProps) => {
   const { t } = useTranslation();
   const combobox = useVirtualizedCombobox();
   const optionsOb = useLocalObservable(() => ({
-    search: search,
-    plugins: plugins,
-    mode: mode,
+    search: '',
+    plugins: [] as string[],
+    mode: 'add' as OptionProps['mode'],
+    setSearch(search: string) {
+      this.search = search.toLowerCase().trim();
+    },
+    setPlugins(plugins: string[]) {
+      this.plugins = plugins;
+    },
+    setMode(mode: PluginCardProps['mode']) {
+      this.mode = mode;
+    },
     get list() {
       const arr = !this.search
         ? this.plugins
@@ -109,12 +118,9 @@ const PluginCardListCore = (props: PluginCardListProps) => {
     },
   }));
 
-  // handle state and useLocalObservable
-  useLayoutEffect(() => {
-    optionsOb.search = search.toLowerCase().trim();
-    optionsOb.plugins = plugins;
-    optionsOb.mode = mode;
-  }, [optionsOb, search, plugins, mode]);
+  useEffect(() => optionsOb.setPlugins(plugins), [optionsOb, plugins]);
+  useEffect(() => optionsOb.setSearch(search), [optionsOb, search]);
+  useEffect(() => optionsOb.setMode(mode), [optionsOb, mode]);
 
   return (
     <Combobox store={combobox}>

src/components/form-slice/FormItemPlugins/PluginEditorDrawer.tsx

@@ -6,7 +6,7 @@ import { isEmpty } from 'rambdax';
 import { FormSubmitBtn } from '@/components/form/Btn';
 import type { PluginCardListProps } from './PluginCardList';
 import { observer } from 'mobx-react-lite';
-import { useDeepCompareEffect } from 'react-use';
+import { useEffect } from 'react';
 
 export type PluginConfig = { name: string; config: object };
 export type PluginEditorDrawerProps = Pick<PluginCardListProps, 'mode'> & {
@@ -34,9 +34,9 @@ const PluginEditorDrawerCore = (props: PluginEditorDrawerProps) => {
     methods.reset();
   };
 
-  useDeepCompareEffect(() => {
+  useEffect(() => {
     methods.setValue('config', toConfigStr(config));
-  }, [config]);
+  }, [config, methods]);
 
   return (
     <Drawer

src/components/form-slice/FormItemPlugins/index.tsx

@@ -12,39 +12,41 @@ import {
 } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import { useEffect, useMemo } from 'react';
-import { useQuery, useSuspenseQuery } from '@tanstack/react-query';
-import {
-  getPluginSchemaQueryOptions,
-  getPluginsListQueryOptions,
-} from '@/apis/plugins';
 import { PluginCardList, PluginCardListSearch } from './PluginCardList';
 import { SelectPluginsDrawer } from './SelectPluginsDrawer';
 import { difference } from 'rambdax';
-import {
-  PluginEditorDrawer,
-  type PluginConfig,
-  type PluginEditorDrawerProps,
-} from './PluginEditorDrawer';
+import { PluginEditorDrawer, type PluginConfig } from './PluginEditorDrawer';
 import { observer, useLocalObservable } from 'mobx-react-lite';
 import type { PluginCardProps } from './PluginCard';
+import {
+  getPluginsListWithSchemaQueryOptions,
+  type NeedPluginSchema,
+} from '@/apis/plugins';
+import { useSuspenseQuery } from '@tanstack/react-query';
+import { useDeepCompareEffect } from 'react-use';
+import type { APISIXType } from '@/types/schema/apisix';
+import { toJS } from 'mobx';
 
 export type FormItemPluginsProps<T extends FieldValues> = InputWrapperProps &
   UseControllerProps<T> & {
     onChange?: (value: Record<string, unknown>) => void;
-  } & Pick<PluginEditorDrawerProps, 'schema'>;
+  } & Partial<NeedPluginSchema>;
 
 const FormItemPluginsCore = <T extends FieldValues>(
   props: FormItemPluginsProps<T>
 ) => {
-  const { controllerProps, restProps } = genControllerProps(props, {});
+  const {
+    controllerProps,
+    restProps: { schema = 'schema', ...restProps },
+  } = genControllerProps(props, {});
   const { t } = useTranslation();
 
   const {
     field: { value: rawObject, onChange: fOnChange, name: fName, ...restField },
     fieldState,
   } = useController<T>(controllerProps);
   const isView = useMemo(() => restField.disabled, [restField.disabled]);
-  const pluginsListReq = useSuspenseQuery(getPluginsListQueryOptions());
+
   const pluginsOb = useLocalObservable(() => ({
     __map: new Map<string, object>(),
     init(obj: Record<string, object>) {
@@ -54,11 +56,21 @@ const FormItemPluginsCore = <T extends FieldValues>(
       this.__map.delete(name);
       this.save();
     },
+    allPluginNames: [] as string[],
+    pluginSchemaObj: new Map<string, APISIXType['PluginSchema']>(),
+    initPlugins(props: {
+      names: string[];
+      originObj: Record<string, Record<string, unknown>>;
+    }) {
+      const { names, originObj } = props;
+      this.allPluginNames = names;
+      this.pluginSchemaObj = new Map(Object.entries(originObj));
+    },
     get selected() {
       return Array.from(this.__map.keys());
     },
     get unSelected() {
-      return difference(pluginsListReq.data, this.selected);
+      return difference(this.allPluginNames, this.selected);
     },
     save() {
       const obj = Object.fromEntries(this.__map);
@@ -77,6 +89,11 @@ const FormItemPluginsCore = <T extends FieldValues>(
       } as PluginConfig;
       this.setEditorOpened(true);
     },
+    get curPluginSchema() {
+      const d = this.pluginSchemaObj.get(this.curPlugin.name);
+      if (!d) return {};
+      return d[schema];
+    },
     editorOpened: false,
     setEditorOpened(val: boolean) {
       this.editorOpened = val;
@@ -101,14 +118,17 @@ const FormItemPluginsCore = <T extends FieldValues>(
     },
   }));
 
-  const getSchemaReq = useQuery(
-    getPluginSchemaQueryOptions(pluginsOb.curPlugin.name)
+  const pluginsListReq = useSuspenseQuery(
+    getPluginsListWithSchemaQueryOptions({ schema })
   );
 
   // init the selected plugins
   useEffect(() => {
     pluginsOb.init(rawObject);
   }, [pluginsOb, rawObject]);
+  useDeepCompareEffect(() => {
+    pluginsOb.initPlugins(pluginsListReq.data);
+  }, [pluginsOb, pluginsListReq.data]);
 
   return (
     <InputWrapper error={fieldState.error?.message} {...restProps}>
@@ -122,8 +142,8 @@ const FormItemPluginsCore = <T extends FieldValues>(
           <SelectPluginsDrawer
             plugins={pluginsOb.unSelected}
             opened={pluginsOb.selectPluginsOpened}
-            onAdd={(name) => pluginsOb.on('add', name)}
             setOpened={pluginsOb.setSelectPluginsOpened}
+            onAdd={(name) => pluginsOb.on('add', name)}
             disabled={restField.disabled}
           />
         </Group>
@@ -139,7 +159,7 @@ const FormItemPluginsCore = <T extends FieldValues>(
         />
         <PluginEditorDrawer
           mode={isView ? 'view' : 'edit'}
-          schema={getSchemaReq.data}
+          schema={toJS(pluginsOb.curPluginSchema)}
           opened={pluginsOb.editorOpened}
           onClose={pluginsOb.closeEditor}
           plugin={pluginsOb.curPlugin}
@@ -151,3 +171,4 @@ const FormItemPluginsCore = <T extends FieldValues>(
 };
 
 export const FormItemPlugins = observer(FormItemPluginsCore);
+

src/components/form-slice/FormPartCredential.tsx

@@ -0,0 +1,18 @@
+import { useTranslation } from 'react-i18next';
+import { FormPartBasic } from './FormPartBasic';
+import { FormSectionGeneral } from './FormSectionGeneral';
+import { FormSection } from './FormSection';
+import { FormItemPlugins } from './FormItemPlugins';
+
+export const FormPartCredential = () => {
+  const { t } = useTranslation();
+  return (
+    <>
+      <FormSectionGeneral showDate={false} />
+      <FormPartBasic showName={false} />
+      <FormSection legend={t('form.plugins.label')}>
+        <FormItemPlugins name="plugins" schema="consumer_schema" />
+      </FormSection>
+    </>
+  );
+};

src/components/form-slice/FormSection/index.tsx

@@ -7,6 +7,7 @@ import {
 import {
   createContext,
   useContext,
+  useEffect,
   useMemo,
   useRef,
   type FC,
@@ -15,7 +16,6 @@ import {
 } from 'react';
 import classes from './style.module.css';
 import { APPSHELL_HEADER_HEIGHT } from '@/config/constant';
-import { useDeepCompareEffect } from 'react-use';
 
 const SectionDepthCtx = createContext<number>(0);
 
@@ -66,7 +66,7 @@ export const FormTOCBox = (props: FormTOCBoxProps) => {
   const { children, deps } = props;
   const reinitializeRef = useRef(() => {});
 
-  useDeepCompareEffect(() => {
+  useEffect(() => {
     reinitializeRef.current();
   }, [deps]);
 

src/components/form-slice/FormSectionGeneral.tsx

@@ -34,7 +34,7 @@ type FormSectionInfoProps = {
 };
 
 export const FormSectionGeneral = (props: FormSectionInfoProps) => {
-  const { showDate = true, showID = false } = props;
+  const { showDate = true, showID = true } = props;
   const { t } = useTranslation();
   return (
     <FormSection legend={t('form.general.title')} >

src/components/page/ToAddPageBtn.tsx

@@ -10,15 +10,16 @@ type FilterKeys<T, R extends string> = {
 type ToAddPageBtnProps = {
   to: keyof FilterKeys<FileRoutesByTo, 'add'>;
   label: string;
-};
+} & Pick<LinkProps, 'params'>;
 
-export const ToAddPageBtn = ({ to, label }: ToAddPageBtnProps) => {
+export const ToAddPageBtn = ({ to, params, label }: ToAddPageBtnProps) => {
   return (
     <RouteLinkBtn
       leftSection={<IconPlus />}
       size="compact-sm"
       variant="gradient"
       to={to}
+      params={params}
     >
       {label}
     </RouteLinkBtn>

src/config/constant.ts

@@ -13,6 +13,8 @@ export const API_PLUGINS = '/plugins';
 export const API_PLUGINS_LIST = '/plugins/list';
 export const API_PLUGIN_METADATA = '/plugin_metadata';
 export const API_CONSUMERS = '/consumers';
+export const API_CREDENTIALS = (username: string) =>
+  `${API_CONSUMERS}/${username}/credentials` as const;
 
 export const SKIP_INTERCEPTOR_HEADER = '__dashboard__skipInterceptor';
 export const APPSHELL_HEADER_HEIGHT = 60;