This is an automated email from the ASF dual-hosted git repository.

juzhiyuan pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/apisix-dashboard.git


The following commit(s) were added to refs/heads/master by this push:
     new e063e3477 feat: disable editing of IDs while editing (#3098)
e063e3477 is described below

commit e063e3477eac739a62670ceb0acf150eaa5094dd
Author: YYYoung <isk...@outlook.com>
AuthorDate: Wed Jun 4 15:20:12 2025 +0800

    feat: disable editing of IDs while editing (#3098)
---
 src/components/form-slice/FormPartCredential.tsx               |  7 +------
 src/components/form-slice/FormPartGlobalRules.tsx              | 10 +++-------
 src/components/form-slice/FormPartPluginConfig.tsx             |  8 +-------
 src/components/form-slice/FormSectionGeneral.tsx               |  3 ++-
 src/routes/consumer_groups/add.tsx                             |  7 +++----
 src/routes/consumer_groups/detail.$id.tsx                      |  7 +++----
 src/routes/consumers/detail.$username/credentials/add.tsx      |  2 ++
 .../consumers/detail.$username/credentials/detail.$id.tsx      |  4 +++-
 src/routes/consumers/detail.$username/index.tsx                |  2 +-
 src/routes/global_rules/add.tsx                                |  2 ++
 src/routes/global_rules/detail.$id.tsx                         |  2 ++
 src/routes/plugin_configs/add.tsx                              |  4 +++-
 src/routes/plugin_configs/detail.$id.tsx                       |  2 ++
 src/routes/protos/detail.$id.tsx                               |  2 +-
 src/routes/routes/detail.$id.tsx                               |  2 +-
 src/routes/secrets/add.tsx                                     |  2 +-
 src/routes/services/detail.$id.tsx                             |  2 +-
 src/routes/ssls/detail.$id.tsx                                 |  2 +-
 src/routes/stream_routes/detail.$id.tsx                        |  2 +-
 src/routes/upstreams/detail.$id.tsx                            |  2 +-
 20 files changed, 35 insertions(+), 39 deletions(-)

diff --git a/src/components/form-slice/FormPartCredential.tsx 
b/src/components/form-slice/FormPartCredential.tsx
index a2bf4db58..877a68336 100644
--- a/src/components/form-slice/FormPartCredential.tsx
+++ b/src/components/form-slice/FormPartCredential.tsx
@@ -19,16 +19,11 @@ import { useTranslation } from 'react-i18next';
 import { FormItemPlugins } from './FormItemPlugins';
 import { FormPartBasic } from './FormPartBasic';
 import { FormSection } from './FormSection';
-import {
-  FormSectionGeneral,
-  type FormSectionGeneralProps,
-} from './FormSectionGeneral';
 
-export const FormPartCredential = (props: FormSectionGeneralProps) => {
+export const FormPartCredential = () => {
   const { t } = useTranslation();
   return (
     <>
-      <FormSectionGeneral showDate={false} {...props} />
       <FormPartBasic showName={false} />
       <FormSection legend={t('form.plugins.label')}>
         <FormItemPlugins name="plugins" schema="consumer_schema" />
diff --git a/src/components/form-slice/FormPartGlobalRules.tsx 
b/src/components/form-slice/FormPartGlobalRules.tsx
index ec83ef65c..7f26098dc 100644
--- a/src/components/form-slice/FormPartGlobalRules.tsx
+++ b/src/components/form-slice/FormPartGlobalRules.tsx
@@ -18,15 +18,11 @@ import { t } from 'i18next';
 
 import { FormItemPlugins } from './FormItemPlugins';
 import { FormSection } from './FormSection';
-import { FormSectionGeneral } from './FormSectionGeneral';
 
 export const FormPartGlobalRules = () => {
   return (
-    <>
-      <FormSectionGeneral showDate={false} />
-      <FormSection legend={t('form.plugins.label')}>
-        <FormItemPlugins name="plugins" />
-      </FormSection>
-    </>
+    <FormSection legend={t('form.plugins.label')}>
+      <FormItemPlugins name="plugins" />
+    </FormSection>
   );
 };
diff --git a/src/components/form-slice/FormPartPluginConfig.tsx 
b/src/components/form-slice/FormPartPluginConfig.tsx
index 6faa90c45..c2b7523a9 100644
--- a/src/components/form-slice/FormPartPluginConfig.tsx
+++ b/src/components/form-slice/FormPartPluginConfig.tsx
@@ -16,21 +16,15 @@
  */
 import { FormPartBasic, type FormPartBasicProps } from './FormPartBasic';
 import { FormSectionPluginsOnly } from './FormPartConsumer';
-import {
-  FormSectionGeneral,
-  type FormSectionGeneralProps,
-} from './FormSectionGeneral';
 
 export const FormPartPluginConfig = (
   props: {
     basicProps?: FormPartBasicProps;
-    generalProps?: FormSectionGeneralProps;
   } = {}
 ) => {
-  const { generalProps, basicProps } = props;
+  const { basicProps } = props;
   return (
     <>
-      <FormSectionGeneral {...generalProps} />
       <FormPartBasic {...basicProps} />
       <FormSectionPluginsOnly />
     </>
diff --git a/src/components/form-slice/FormSectionGeneral.tsx 
b/src/components/form-slice/FormSectionGeneral.tsx
index 59030facd..e36b2fe98 100644
--- a/src/components/form-slice/FormSectionGeneral.tsx
+++ b/src/components/form-slice/FormSectionGeneral.tsx
@@ -46,13 +46,14 @@ const FormItemID = () => {
 };
 
 export type FormSectionGeneralProps = {
+  /** will be default to `readOnly` */
   showDate?: boolean;
   showID?: boolean;
   readOnly?: boolean;
 };
 
 export const FormSectionGeneral = (props: FormSectionGeneralProps) => {
-  const { showDate = true, showID = true, readOnly = false } = props;
+  const { showDate = props.readOnly, showID = true, readOnly = false } = props;
   const { t } = useTranslation();
   // we use fieldset disabled to show readonly state
   // because mantine readOnly style looks like we can edit
diff --git a/src/routes/consumer_groups/add.tsx 
b/src/routes/consumer_groups/add.tsx
index 1b09c9a44..ed216f38d 100644
--- a/src/routes/consumer_groups/add.tsx
+++ b/src/routes/consumer_groups/add.tsx
@@ -26,6 +26,7 @@ import { putConsumerGroupReq } from '@/apis/consumer_groups';
 import { FormSubmitBtn } from '@/components/form/Btn';
 import { FormPartPluginConfig } from 
'@/components/form-slice/FormPartPluginConfig';
 import { FormTOCBox } from '@/components/form-slice/FormSection';
+import { FormSectionGeneral } from 
'@/components/form-slice/FormSectionGeneral';
 import PageHeader from '@/components/page/PageHeader';
 import { req } from '@/config/req';
 import { APISIX, type APISIXType } from '@/types/schema/apisix';
@@ -67,10 +68,8 @@ const ConsumerGroupAddForm = () => {
           putConsumerGroup.mutateAsync(pipeProduce()(d))
         )}
       >
-        <FormPartPluginConfig
-          generalProps={{ showDate: false }}
-          basicProps={{ showName: false }}
-        />
+        <FormSectionGeneral />
+        <FormPartPluginConfig basicProps={{ showName: false }} />
         <FormSubmitBtn>{t('form.btn.add')}</FormSubmitBtn>
       </form>
     </FormProvider>
diff --git a/src/routes/consumer_groups/detail.$id.tsx 
b/src/routes/consumer_groups/detail.$id.tsx
index c306a226b..8d396ab95 100644
--- a/src/routes/consumer_groups/detail.$id.tsx
+++ b/src/routes/consumer_groups/detail.$id.tsx
@@ -33,6 +33,7 @@ import { getConsumerGroupQueryOptions } from '@/apis/hooks';
 import { FormSubmitBtn } from '@/components/form/Btn';
 import { FormPartPluginConfig } from 
'@/components/form-slice/FormPartPluginConfig';
 import { FormTOCBox } from '@/components/form-slice/FormSection';
+import { FormSectionGeneral } from 
'@/components/form-slice/FormSectionGeneral';
 import { DeleteResourceBtn } from '@/components/page/DeleteResourceBtn';
 import PageHeader from '@/components/page/PageHeader';
 import { API_CONSUMER_GROUPS } from '@/config/constant';
@@ -87,10 +88,8 @@ const ConsumerGroupDetailForm = (props: Props) => {
           putConsumerGroup.mutateAsync(pipeProduce()({ ...d, id }))
         )}
       >
-        <FormPartPluginConfig
-          generalProps={{ showDate: true }}
-          basicProps={{ showName: false }}
-        />
+        <FormSectionGeneral readOnly />
+        <FormPartPluginConfig basicProps={{ showName: false }} />
         {!readOnly && (
           <Group>
             <FormSubmitBtn>{t('form.btn.save')}</FormSubmitBtn>
diff --git a/src/routes/consumers/detail.$username/credentials/add.tsx 
b/src/routes/consumers/detail.$username/credentials/add.tsx
index d5f3dd844..b5165a394 100644
--- a/src/routes/consumers/detail.$username/credentials/add.tsx
+++ b/src/routes/consumers/detail.$username/credentials/add.tsx
@@ -26,6 +26,7 @@ import { putCredentialReq } from '@/apis/credentials';
 import { FormSubmitBtn } from '@/components/form/Btn';
 import { FormPartCredential } from 
'@/components/form-slice/FormPartCredential';
 import { FormTOCBox } from '@/components/form-slice/FormSection';
+import { FormSectionGeneral } from 
'@/components/form-slice/FormSectionGeneral';
 import PageHeader from '@/components/page/PageHeader';
 import { DetailCredentialsTabs } from 
'@/components/page-slice/consumers/DetailCredentialsTabs';
 import { req } from '@/config/req';
@@ -69,6 +70,7 @@ const CredentialAddForm = () => {
   return (
     <FormProvider {...form}>
       <form onSubmit={form.handleSubmit((d) => putCredential.mutateAsync(d))}>
+        <FormSectionGeneral />
         <FormPartCredential />
         <FormSubmitBtn>{t('form.btn.add')}</FormSubmitBtn>
       </form>
diff --git a/src/routes/consumers/detail.$username/credentials/detail.$id.tsx 
b/src/routes/consumers/detail.$username/credentials/detail.$id.tsx
index d848bcea0..7c56cab89 100644
--- a/src/routes/consumers/detail.$username/credentials/detail.$id.tsx
+++ b/src/routes/consumers/detail.$username/credentials/detail.$id.tsx
@@ -33,6 +33,7 @@ import { getCredentialQueryOptions } from '@/apis/hooks';
 import { FormSubmitBtn } from '@/components/form/Btn';
 import { FormPartCredential } from 
'@/components/form-slice/FormPartCredential';
 import { FormTOCBox } from '@/components/form-slice/FormSection';
+import { FormSectionGeneral } from 
'@/components/form-slice/FormSectionGeneral';
 import { DeleteResourceBtn } from '@/components/page/DeleteResourceBtn';
 import PageHeader from '@/components/page/PageHeader';
 import { DetailCredentialsTabs } from 
'@/components/page-slice/consumers/DetailCredentialsTabs';
@@ -93,7 +94,8 @@ const CredentialDetailForm = (props: CredentialFormProps) => {
   return (
     <FormProvider {...form}>
       <form onSubmit={form.handleSubmit((d) => putCredential.mutateAsync(d))}>
-        <FormPartCredential showDate />
+        <FormSectionGeneral readOnly />
+        <FormPartCredential />
         {!readOnly && (
           <Group>
             <FormSubmitBtn>{t('form.btn.save')}</FormSubmitBtn>
diff --git a/src/routes/consumers/detail.$username/index.tsx 
b/src/routes/consumers/detail.$username/index.tsx
index e7585dded..079d62eed 100644
--- a/src/routes/consumers/detail.$username/index.tsx
+++ b/src/routes/consumers/detail.$username/index.tsx
@@ -92,7 +92,7 @@ const ConsumerDetailForm = (props: Props) => {
           putConsumer.mutateAsync(pipeProduce()(d));
         })}
       >
-        <FormSectionGeneral showID={false} />
+        <FormSectionGeneral showID={false} readOnly />
         <FormPartConsumer />
         {!readOnly && (
           <Group>
diff --git a/src/routes/global_rules/add.tsx b/src/routes/global_rules/add.tsx
index 3f0641f6f..80a787341 100644
--- a/src/routes/global_rules/add.tsx
+++ b/src/routes/global_rules/add.tsx
@@ -29,6 +29,7 @@ import { putGlobalRuleReq } from '@/apis/global_rules';
 import { FormSubmitBtn } from '@/components/form/Btn';
 import { FormPartGlobalRules } from 
'@/components/form-slice/FormPartGlobalRules';
 import { FormTOCBox } from '@/components/form-slice/FormSection';
+import { FormSectionGeneral } from 
'@/components/form-slice/FormSectionGeneral';
 import PageHeader from '@/components/page/PageHeader';
 import { req } from '@/config/req';
 import type { APISIXType } from '@/types/schema/apisix';
@@ -67,6 +68,7 @@ const GlobalRuleAddForm = () => {
   return (
     <FormProvider {...form}>
       <form onSubmit={form.handleSubmit((d) => putGlobalRule.mutateAsync(d))}>
+        <FormSectionGeneral />
         <FormPartGlobalRules />
         <FormSubmitBtn>{t('form.btn.add')}</FormSubmitBtn>
       </form>
diff --git a/src/routes/global_rules/detail.$id.tsx 
b/src/routes/global_rules/detail.$id.tsx
index 8ea27f920..9000a8a72 100644
--- a/src/routes/global_rules/detail.$id.tsx
+++ b/src/routes/global_rules/detail.$id.tsx
@@ -33,6 +33,7 @@ import { getGlobalRuleQueryOptions } from '@/apis/hooks';
 import { FormSubmitBtn } from '@/components/form/Btn';
 import { FormPartGlobalRules } from 
'@/components/form-slice/FormPartGlobalRules';
 import { FormTOCBox } from '@/components/form-slice/FormSection';
+import { FormSectionGeneral } from 
'@/components/form-slice/FormSectionGeneral';
 import { DeleteResourceBtn } from '@/components/page/DeleteResourceBtn';
 import PageHeader from '@/components/page/PageHeader';
 import { API_GLOBAL_RULES } from '@/config/constant';
@@ -79,6 +80,7 @@ const GlobalRuleDetailForm = (props: Props) => {
   return (
     <FormProvider {...form}>
       <form onSubmit={form.handleSubmit((d) => putGlobalRule.mutateAsync(d))}>
+        <FormSectionGeneral readOnly />
         <FormPartGlobalRules />
         {!readOnly && (
           <Group>
diff --git a/src/routes/plugin_configs/add.tsx 
b/src/routes/plugin_configs/add.tsx
index 4f4ea71aa..ee9ef397b 100644
--- a/src/routes/plugin_configs/add.tsx
+++ b/src/routes/plugin_configs/add.tsx
@@ -26,6 +26,7 @@ import { putPluginConfigReq } from '@/apis/plugin_configs';
 import { FormSubmitBtn } from '@/components/form/Btn';
 import { FormPartPluginConfig } from 
'@/components/form-slice/FormPartPluginConfig';
 import { FormTOCBox } from '@/components/form-slice/FormSection';
+import { FormSectionGeneral } from 
'@/components/form-slice/FormSectionGeneral';
 import PageHeader from '@/components/page/PageHeader';
 import { req } from '@/config/req';
 import { APISIX, type APISIXType } from '@/types/schema/apisix';
@@ -67,7 +68,8 @@ const PluginConfigAddForm = () => {
           putPluginConfig.mutateAsync(pipeProduce()(d))
         )}
       >
-        <FormPartPluginConfig generalProps={{ showDate: false }} />
+        <FormSectionGeneral />
+        <FormPartPluginConfig />
         <FormSubmitBtn>{t('form.btn.add')}</FormSubmitBtn>
       </form>
     </FormProvider>
diff --git a/src/routes/plugin_configs/detail.$id.tsx 
b/src/routes/plugin_configs/detail.$id.tsx
index 431dc2c90..b85a574f1 100644
--- a/src/routes/plugin_configs/detail.$id.tsx
+++ b/src/routes/plugin_configs/detail.$id.tsx
@@ -33,6 +33,7 @@ import { putPluginConfigReq } from '@/apis/plugin_configs';
 import { FormSubmitBtn } from '@/components/form/Btn';
 import { FormPartPluginConfig } from 
'@/components/form-slice/FormPartPluginConfig';
 import { FormTOCBox } from '@/components/form-slice/FormSection';
+import { FormSectionGeneral } from 
'@/components/form-slice/FormSectionGeneral';
 import { DeleteResourceBtn } from '@/components/page/DeleteResourceBtn';
 import PageHeader from '@/components/page/PageHeader';
 import { API_PLUGIN_CONFIGS } from '@/config/constant';
@@ -85,6 +86,7 @@ const PluginConfigDetailForm = (props: Props) => {
   return (
     <FormProvider {...form}>
       <form onSubmit={form.handleSubmit((d) => 
putPluginConfig.mutateAsync(d))}>
+        <FormSectionGeneral readOnly />
         <FormPartPluginConfig />
         {!readOnly && (
           <Group>
diff --git a/src/routes/protos/detail.$id.tsx b/src/routes/protos/detail.$id.tsx
index 7035a9384..c19d184d7 100644
--- a/src/routes/protos/detail.$id.tsx
+++ b/src/routes/protos/detail.$id.tsx
@@ -88,7 +88,7 @@ const ProtoDetailForm = ({ id, readOnly, setReadOnly }: 
ProtoFormProps) => {
   return (
     <FormProvider {...form}>
       <form onSubmit={form.handleSubmit((d) => putProto.mutateAsync(d))}>
-        <FormSectionGeneral />
+        <FormSectionGeneral readOnly />
         <FormPartProto allowUpload={!readOnly} />
         {!readOnly && (
           <Group>
diff --git a/src/routes/routes/detail.$id.tsx b/src/routes/routes/detail.$id.tsx
index 8e30383b7..fa29a67ad 100644
--- a/src/routes/routes/detail.$id.tsx
+++ b/src/routes/routes/detail.$id.tsx
@@ -92,7 +92,7 @@ const RouteDetailForm = (props: Props) => {
   return (
     <FormProvider {...form}>
       <form onSubmit={form.handleSubmit((d) => putRoute.mutateAsync(d))}>
-        <FormSectionGeneral />
+        <FormSectionGeneral readOnly />
         <FormPartRoute />
         {!readOnly && (
           <Group>
diff --git a/src/routes/secrets/add.tsx b/src/routes/secrets/add.tsx
index 752b42e9a..cfc060dcd 100644
--- a/src/routes/secrets/add.tsx
+++ b/src/routes/secrets/add.tsx
@@ -64,7 +64,7 @@ const SecretAddForm = () => {
   return (
     <FormProvider {...form}>
       <form onSubmit={form.handleSubmit((d) => putSecret.mutateAsync(d))}>
-        <FormSectionGeneral showDate={false} />
+        <FormSectionGeneral />
         <FormPartSecret />
         <FormSubmitBtn>{t('form.btn.add')}</FormSubmitBtn>
       </form>
diff --git a/src/routes/services/detail.$id.tsx 
b/src/routes/services/detail.$id.tsx
index c36d2bf86..8254b7278 100644
--- a/src/routes/services/detail.$id.tsx
+++ b/src/routes/services/detail.$id.tsx
@@ -92,7 +92,7 @@ const ServiceDetailForm = (props: Props) => {
   return (
     <FormProvider {...form}>
       <form onSubmit={form.handleSubmit((d) => putService.mutateAsync(d))}>
-        <FormSectionGeneral />
+        <FormSectionGeneral readOnly />
         <FormPartService />
         {!readOnly && (
           <Group>
diff --git a/src/routes/ssls/detail.$id.tsx b/src/routes/ssls/detail.$id.tsx
index 729585e6c..ba5009c07 100644
--- a/src/routes/ssls/detail.$id.tsx
+++ b/src/routes/ssls/detail.$id.tsx
@@ -96,7 +96,7 @@ const SSLDetailForm = (props: Props & { id: string }) => {
             putSSL.mutateAsync(pipeProduce()(d))
           )}
         >
-          <FormSectionGeneral />
+          <FormSectionGeneral readOnly />
           <FormPartSSL />
           {!readOnly && (
             <Group>
diff --git a/src/routes/stream_routes/detail.$id.tsx 
b/src/routes/stream_routes/detail.$id.tsx
index cb1e8d178..4458ebd32 100644
--- a/src/routes/stream_routes/detail.$id.tsx
+++ b/src/routes/stream_routes/detail.$id.tsx
@@ -88,7 +88,7 @@ const StreamRouteDetailForm = (props: Props) => {
   return (
     <FormProvider {...form}>
       <form onSubmit={form.handleSubmit((d) => putStreamRoute.mutateAsync(d))}>
-        <FormSectionGeneral />
+        <FormSectionGeneral readOnly />
         <FormPartStreamRoute />
         {!readOnly && (
           <Group>
diff --git a/src/routes/upstreams/detail.$id.tsx 
b/src/routes/upstreams/detail.$id.tsx
index 441826d21..ca5f8e9c4 100644
--- a/src/routes/upstreams/detail.$id.tsx
+++ b/src/routes/upstreams/detail.$id.tsx
@@ -105,7 +105,7 @@ const UpstreamDetailForm = (
             putUpstream.mutateAsync(pipeProduce()(d));
           })}
         >
-          <FormSectionGeneral />
+          <FormSectionGeneral readOnly />
           <FormPartUpstream />
           {!readOnly && (
             <Group>

Reply via email to