feat: protos page, FileUploadTextarea component (#3001)

* chore: add routeFileIgnorePrefix, rm useless css import

* feat: FileUploadTextarea component

* feat(req): adjust apisix return data.list

* feat: proto schema, api path

* feat: protos list page

* feat: protos add page

* feat: protos detail

* fix(FormDisplayDate): date not exist show hyphen

* fix: type

* fix: solve comments

Author: SkyeYoung

package.json

@@ -23,6 +23,7 @@
     "antd": "^5.24.8",
     "axios": "^1.8.4",
     "clsx": "^2.1.1",
+    "dayjs": "^1.11.13",
     "fast-clean": "^1.4.0",
     "i18next": "^25.0.1",
     "immer": "^10.1.1",

pnpm-lock.yaml

@@ -0,0 +1,16 @@
+import { InputWrapper, Text, type InputWrapperProps } from '@mantine/core';
+import dayjs from 'dayjs';
+
+type FormDisplayDateProps = InputWrapperProps & {
+  date: dayjs.ConfigType;
+};
+export const FormDisplayDate = (props: FormDisplayDateProps) => {
+  const { date, ...rest } = props;
+  return (
+    <InputWrapper {...rest}>
+      <Text size="sm" c="gray.6">
+        {date ? dayjs(date).format('YYYY-MM-DD HH:mm:ss') : '-'}
+      </Text>
+    </InputWrapper>
+  );
+};

src/components/form-slice/FormDisplayDate.tsx

@@ -6,25 +6,13 @@ import { FormItemTextarea } from '../form/Textarea';
 import { useFormContext } from 'react-hook-form';
 import type { A6Type } from '@/types/schema/apisix';
 
-export type FormPartBasicProps = Omit<FormSectionProps, 'form'> & {
-  showId?: boolean;
-};
+export type FormPartBasicProps = Omit<FormSectionProps, 'form'>;
 
 export const FormPartBasic = (props: FormPartBasicProps) => {
-  const { showId, ...restProps } = props;
-  const { control } = useFormContext<A6Type['Basic'] & { id?: string }>();
+  const { control } = useFormContext<A6Type['Basic']>();
   const { t } = useTranslation();
   return (
-    <FormSection legend={t('form.basic.title')} {...restProps}>
-      {showId && (
-        <FormItemTextInput
-          name="id"
-          label="ID"
-          control={control}
-          readOnly
-          disabled
-        />
-      )}
+    <FormSection legend={t('form.basic.title')} {...props}>
       <FormItemTextInput
         name="name"
         label={t('form.basic.name')}

src/components/form-slice/FormPartBasic.tsx

@@ -0,0 +1,25 @@
+import type { A6Type } from '@/types/schema/apisix';
+import { useFormContext, type FieldValues } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+import {
+  FileUploadTextarea,
+  type FileUploadTextareaProps,
+} from '../form/FileUploadTextarea';
+
+export const FormPartProto = <T extends FieldValues>(
+  props: Pick<FileUploadTextareaProps<T>, 'allowUpload'>
+) => {
+  const { t } = useTranslation();
+  const form = useFormContext<A6Type['ProtoPost']>();
+  return (
+    <FileUploadTextarea
+      name="content"
+      label={t('protos.form.content')}
+      placeholder={t('protos.form.contentPlaceholder')}
+      control={form.control}
+      minRows={10}
+      acceptFileTypes=".proto,.pb"
+      {...props}
+    />
+  );
+};

src/components/form-slice/FormPartProto.tsx

@@ -196,11 +196,11 @@ export const FormSectionKeepAlive = () => {
     </FormSection>
   );
 };
-export const FormPartUpstream = ({ showId }: { showId?: boolean }) => {
+export const FormPartUpstream = () => {
   const { t } = useTranslation();
   return (
     <>
-      <FormPartBasic showId={showId} />
+      <FormPartBasic />
       <FormSection legend={t('form.upstream.findUpstreamFrom')}>
         <FormSection legend={t('form.upstream.nodes.title')}>
           <FormItemNodes

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

@@ -0,0 +1,28 @@
+import { useFormContext, useWatch } from 'react-hook-form';
+import type { A6Type } from '@/types/schema/apisix';
+import { FormItemTextInput } from '../form/TextInput';
+import { FormSection } from './FormSection';
+import { useTranslation } from 'react-i18next';
+import { FormDisplayDate } from './FormDisplayDate';
+import { Divider } from '@mantine/core';
+
+export const FormSectionInfo = () => {
+  const { control } = useFormContext<A6Type['Info']>();
+  const { t } = useTranslation();
+  const createTime = useWatch({ control, name: 'create_time' });
+  const updateTime = useWatch({ control, name: 'update_time' });
+  return (
+    <FormSection legend={t('form.info.title')}>
+      <FormItemTextInput
+        control={control}
+        name="id"
+        label="ID"
+        readOnly
+        disabled
+      />
+      <Divider my="lg" />
+      <FormDisplayDate date={createTime} label={t('form.info.create_time')} />
+      <FormDisplayDate date={updateTime} label={t('form.info.update_time')} />
+    </FormSection>
+  );
+};

src/components/form-slice/FormSectionInfo.tsx

@@ -0,0 +1,114 @@
+import {
+  Textarea as MTextarea,
+  type TextareaProps as MTextareaProps,
+  Box,
+  Group,
+  Button,
+  Input,
+} from '@mantine/core';
+import {
+  useController,
+  type FieldValues,
+  type UseControllerProps,
+} from 'react-hook-form';
+import { genControllerProps } from './util';
+import IconUpload from '~icons/material-symbols/upload';
+import { useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+export type FileUploadTextareaProps<T extends FieldValues> = UseControllerProps<T> &
+  MTextareaProps & {
+    acceptFileTypes?: string;
+    uploadButtonText?: string;
+    maxFileSize?: number;
+    onFileLoaded?: (content: string, fileName: string) => void;
+    allowUpload?: boolean;
+  };
+
+export const FileUploadTextarea = <T extends FieldValues>(
+  props: FileUploadTextareaProps<T>
+) => {
+  const { allowUpload = true } = props;
+  const { controllerProps, restProps } = genControllerProps(props, '');
+  const {
+    field: { value, onChange: fOnChange, ...restField },
+    fieldState,
+  } = useController<T>(controllerProps);
+  const { t } = useTranslation();
+
+  const [fileError, setFileError] = useState<string | null>(null);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  const {
+    acceptFileTypes = '.txt,.json,.yaml,.yml',
+    uploadButtonText = '',
+    maxFileSize = 10 * 1024 * 1024,
+    onFileLoaded,
+    onChange,
+    ...textareaProps
+  } = restProps;
+
+  const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0];
+    if (!file) return;
+
+    if (file.size > maxFileSize) {
+      const size = Math.round(maxFileSize / 1024 / 1024);
+      setFileError(`${t('form.upload.fileOverSize')} ${size}MB`);
+      return;
+    }
+
+    setFileError(null);
+    if (fileInputRef.current) fileInputRef.current.value = '';
+
+    const reader = new FileReader();
+    reader.onload = (e) => {
+      const content = e.target?.result as string;
+      fOnChange(content);
+      onFileLoaded?.(content, file.name);
+    };
+
+    reader.onerror = (e) => {
+      setFileError(`${t('form.upload.readError')} ${e.target?.error}`);
+    };
+
+    reader.readAsText(file);
+  };
+
+  return (
+    <Box>
+      <MTextarea
+        value={value}
+        onChange={(e) => {
+          fOnChange(e);
+          onChange?.(e);
+        }}
+        resize="vertical"
+        autosize={restField.disabled}
+        {...restField}
+        {...textareaProps}
+      />
+      {allowUpload && (
+        <Group mb="xs" mt={4}>
+          <Button
+            leftSection={<IconUpload />}
+            size="compact-xs"
+            variant="outline"
+            onClick={() => fileInputRef.current?.click()}
+            disabled={restField.disabled}
+          >
+            {uploadButtonText || t('form.btn.upload')}
+          </Button>
+          <input
+            type="file"
+            accept={acceptFileTypes}
+            onChange={handleFileChange}
+            style={{ display: 'none' }}
+            ref={fileInputRef}
+          />
+        </Group>
+      )}
+      <Input.Error>{fieldState.error?.message || fileError}</Input.Error>
+    </Box>
+  );
+};

src/components/form/FileUploadTextarea.tsx

@@ -5,6 +5,7 @@ export const LOCAL_STORAGE_ADMIN_KEY = 'apisix-admin-key';
 export const API_PREFIX = '/apisix/admin';
 export const API_ROUTES = '/routes';
 export const API_UPSTREAMS = '/upstreams';
+export const API_PROTOS = '/protos';
 
 export const APPSHELL_HEADER_HEIGHT = 60;
 export const APPSHELL_NAVBAR_WIDTH = 250;

src/config/constant.ts

@@ -34,4 +34,8 @@ export const navRoutes: NavRoute[] = [
     to: '/secret',
     label: 'secret',
   },
+  {
+    to: '/protos',
+    label: 'protos',
+  },
 ];