(rocketmq-dashboard) branch rocketmq-studio updated: fix: keep SSL settings state and actions consistent (#675)

[lizhimin]

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

lizhimins pushed a commit to branch rocketmq-studio
in repository https://gitbox.apache.org/repos/asf/rocketmq-dashboard.git


The following commit(s) were added to refs/heads/rocketmq-studio by this push:
     new 9755eeb9 fix: keep SSL settings state and actions consistent (#675)
9755eeb9 is described below

commit 9755eeb98209f4b079e1d836345dafe120a1e4c9
Author: yx9o <yangx_s...@163.com>
AuthorDate: Fri Jul 31 16:18:16 2026 +0800

    fix: keep SSL settings state and actions consistent (#675)
---
 web/src/pages/studio/SslSettings.tsx               | 31 +++++++++-------------
 .../pages/studio/__tests__/SslSettings.test.tsx    | 28 +++++++++++++++++++
 2 files changed, 40 insertions(+), 19 deletions(-)

diff --git a/web/src/pages/studio/SslSettings.tsx 
b/web/src/pages/studio/SslSettings.tsx
index 652615b2..26b77a64 100644
--- a/web/src/pages/studio/SslSettings.tsx
+++ b/web/src/pages/studio/SslSettings.tsx
@@ -67,7 +67,6 @@ interface FormValues {
 const SslSettingsPage = () => {
   const [form] = Form.useForm<FormValues>();
   const [loading, setLoading] = useState(false);
-  const [sslEnabled, setSslEnabled] = useState(false);
   const [sslConfig, setSslConfig] = useState<SslConfig>({
     enabled: false,
     protocol: 'TLSv1.3',
@@ -81,6 +80,7 @@ const SslSettingsPage = () => {
     certificateExpiry: '2025-12-31',
     certificateIssuer: "Let's Encrypt",
   });
+  const sslEnabled = Form.useWatch('enabled', form) ?? sslConfig.enabled;
   const clientAuth = Form.useWatch('clientAuth', form) ?? sslConfig.clientAuth;
   const { t } = useLang();
   const { message } = App.useApp();
@@ -94,11 +94,6 @@ const SslSettingsPage = () => {
     }, 1000);
   };
 
-  const handleToggleSsl = (checked: boolean) => {
-    setSslEnabled(checked);
-    form.setFieldsValue({ enabled: checked });
-  };
-
   const uploadProps = {
     name: 'certificate',
     multiple: false,
@@ -144,8 +139,6 @@ const SslSettingsPage = () => {
         <Form form={form} layout="vertical" onFinish={handleSave} 
initialValues={sslConfig}>
           <Form.Item name="enabled" label={t('ssl.enabled')} 
valuePropName="checked">
             <Switch
-              checked={sslEnabled}
-              onChange={handleToggleSsl}
               checkedChildren={<CheckCircle size={12} />}
               unCheckedChildren={<XCircle size={12} />}
             />
@@ -276,19 +269,19 @@ const SslSettingsPage = () => {
                   </Form.Item>
                 </>
               )}
-
-              <Divider />
-
-              <Form.Item>
-                <Space>
-                  <Button type="primary" htmlType="submit" loading={loading}>
-                    {t('ssl.save')}
-                  </Button>
-                  <Button onClick={() => 
form.resetFields()}>{t('common.reset')}</Button>
-                </Space>
-              </Form.Item>
             </>
           )}
+
+          <Divider />
+
+          <Form.Item>
+            <Space>
+              <Button type="primary" htmlType="submit" loading={loading}>
+                {t('ssl.save')}
+              </Button>
+              <Button onClick={() => 
form.setFieldsValue(sslConfig)}>{t('common.reset')}</Button>
+            </Space>
+          </Form.Item>
         </Form>
       </Card>
 
diff --git a/web/src/pages/studio/__tests__/SslSettings.test.tsx 
b/web/src/pages/studio/__tests__/SslSettings.test.tsx
index f653dbc3..a921c7e8 100644
--- a/web/src/pages/studio/__tests__/SslSettings.test.tsx
+++ b/web/src/pages/studio/__tests__/SslSettings.test.tsx
@@ -96,6 +96,34 @@ describe('SslSettings Page', () => {
     expect(screen.getByText('KeyStore 密码')).toBeInTheDocument();
   });
 
+  it('should restore the saved SSL state when resetting the form', async () => 
{
+    const user = userEvent.setup();
+    renderWithProviders(<SslSettings />);
+    const switchEl = screen.getByRole('switch');
+
+    await user.click(switchEl);
+    expect(switchEl).toBeChecked();
+    expect(screen.getByText('KeyStore 配置')).toBeInTheDocument();
+
+    await user.click(screen.getByRole('button', { name: /重\s*置/ }));
+
+    expect(switchEl).not.toBeChecked();
+    expect(screen.queryByText('KeyStore 配置')).not.toBeInTheDocument();
+  });
+
+  it('should keep form actions available after disabling SSL', async () => {
+    const user = userEvent.setup();
+    renderWithProviders(<SslSettings />);
+    const switchEl = screen.getByRole('switch');
+
+    await user.click(switchEl);
+    await user.click(switchEl);
+
+    expect(switchEl).not.toBeChecked();
+    expect(screen.getByRole('button', { name: /保\s*存/ })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /重\s*置/ })).toBeInTheDocument();
+  });
+
   it('should show TrustStore fields when client authentication is required', 
async () => {
     const user = userEvent.setup();
     renderWithProviders(<SslSettings />);