From 195a07e00b7e7dbe08e0312ba714fe9eebdfa63b Mon Sep 17 00:00:00 2001
From: DingDongSoLong4 <99329275+DingDongSoLong4@users.noreply.github.com>
Date: Mon, 8 Jan 2024 03:08:09 +0200
Subject: [PATCH] Fix settings tab links (#4430)

---
 ui/v2.5/src/components/Settings/Settings.tsx | 145 +++++++++++++------
 1 file changed, 98 insertions(+), 47 deletions(-)

diff --git a/ui/v2.5/src/components/Settings/Settings.tsx b/ui/v2.5/src/components/Settings/Settings.tsx
index fb1b95d2a17..324f8afd5e3 100644
--- a/ui/v2.5/src/components/Settings/Settings.tsx
+++ b/ui/v2.5/src/components/Settings/Settings.tsx
@@ -1,6 +1,7 @@
 import React from "react";
 import { Tab, Nav, Row, Col } from "react-bootstrap";
-import { useHistory, useLocation } from "react-router-dom";
+import { Redirect, RouteComponentProps } from "react-router-dom";
+import { LinkContainer } from "react-router-bootstrap";
 import { FormattedMessage } from "react-intl";
 import { Helmet } from "react-helmet";
 import { useTitleProps } from "src/hooks/title";
@@ -18,83 +19,133 @@ import { SettingsLibraryPanel } from "./SettingsLibraryPanel";
 import { SettingsSecurityPanel } from "./SettingsSecurityPanel";
 import Changelog from "../Changelog/Changelog";
 
-export const Settings: React.FC = () => {
-  const location = useLocation();
-  const history = useHistory();
-  const defaultTab = new URLSearchParams(location.search).get("tab") ?? "tasks";
+const validTabs = [
+  "tasks",
+  "library",
+  "interface",
+  "security",
+  "metadata-providers",
+  "services",
+  "system",
+  "plugins",
+  "logs",
+  "tools",
+  "changelog",
+  "about",
+] as const;
+type TabKey = (typeof validTabs)[number];
 
-  const onSelect = (val: string) => history.push(`?tab=${val}`);
+const defaultTab: TabKey = "tasks";
+
+function isTabKey(tab: string | null): tab is TabKey {
+  return validTabs.includes(tab as TabKey);
+}
+
+const Settings: React.FC<RouteComponentProps> = ({ location }) => {
+  const tab = new URLSearchParams(location.search).get("tab");
 
   const titleProps = useTitleProps({ id: "settings" });
+
+  if (!isTabKey(tab)) {
+    return (
+      <Redirect
+        to={{
+          ...location,
+          search: `tab=${defaultTab}`,
+        }}
+      />
+    );
+  }
+
   return (
-    <Tab.Container
-      activeKey={defaultTab}
-      id="configuration-tabs"
-      onSelect={(tab) => tab && onSelect(tab)}
-    >
+    <Tab.Container activeKey={tab} id="configuration-tabs">
       <Helmet {...titleProps} />
       <Row>
         <Col id="settings-menu-container" sm={3} md={3} xl={2}>
           <Nav variant="pills" className="flex-column">
             <Nav.Item>
-              <Nav.Link eventKey="tasks">
-                <FormattedMessage id="config.categories.tasks" />
-              </Nav.Link>
+              <LinkContainer to="/settings?tab=tasks">
+                <Nav.Link eventKey="tasks">
+                  <FormattedMessage id="config.categories.tasks" />
+                </Nav.Link>
+              </LinkContainer>
             </Nav.Item>
             <Nav.Item>
-              <Nav.Link eventKey="library">
-                <FormattedMessage id="library" />
-              </Nav.Link>
+              <LinkContainer to="/settings?tab=library">
+                <Nav.Link eventKey="library">
+                  <FormattedMessage id="library" />
+                </Nav.Link>
+              </LinkContainer>
             </Nav.Item>
             <Nav.Item>
-              <Nav.Link eventKey="interface">
-                <FormattedMessage id="config.categories.interface" />
-              </Nav.Link>
+              <LinkContainer to="/settings?tab=interface">
+                <Nav.Link eventKey="interface">
+                  <FormattedMessage id="config.categories.interface" />
+                </Nav.Link>
+              </LinkContainer>
             </Nav.Item>
             <Nav.Item>
-              <Nav.Link eventKey="security">
-                <FormattedMessage id="config.categories.security" />
-              </Nav.Link>
+              <LinkContainer to="/settings?tab=security">
+                <Nav.Link eventKey="security">
+                  <FormattedMessage id="config.categories.security" />
+                </Nav.Link>
+              </LinkContainer>
             </Nav.Item>
             <Nav.Item>
-              <Nav.Link eventKey="metadata-providers">
-                <FormattedMessage id="config.categories.metadata_providers" />
-              </Nav.Link>
+              <LinkContainer to="/settings?tab=metadata-providers">
+                <Nav.Link eventKey="metadata-providers">
+                  <FormattedMessage id="config.categories.metadata_providers" />
+                </Nav.Link>
+              </LinkContainer>
             </Nav.Item>
             <Nav.Item>
-              <Nav.Link eventKey="services">
-                <FormattedMessage id="config.categories.services" />
-              </Nav.Link>
+              <LinkContainer to="/settings?tab=services">
+                <Nav.Link eventKey="services">
+                  <FormattedMessage id="config.categories.services" />
+                </Nav.Link>
+              </LinkContainer>
             </Nav.Item>
             <Nav.Item>
-              <Nav.Link eventKey="system">
-                <FormattedMessage id="config.categories.system" />
-              </Nav.Link>
+              <LinkContainer to="/settings?tab=system">
+                <Nav.Link eventKey="system">
+                  <FormattedMessage id="config.categories.system" />
+                </Nav.Link>
+              </LinkContainer>
             </Nav.Item>
             <Nav.Item>
-              <Nav.Link eventKey="plugins">
-                <FormattedMessage id="config.categories.plugins" />
-              </Nav.Link>
+              <LinkContainer to="/settings?tab=plugins">
+                <Nav.Link eventKey="plugins">
+                  <FormattedMessage id="config.categories.plugins" />
+                </Nav.Link>
+              </LinkContainer>
             </Nav.Item>
             <Nav.Item>
-              <Nav.Link eventKey="logs">
-                <FormattedMessage id="config.categories.logs" />
-              </Nav.Link>
+              <LinkContainer to="/settings?tab=logs">
+                <Nav.Link eventKey="logs">
+                  <FormattedMessage id="config.categories.logs" />
+                </Nav.Link>
+              </LinkContainer>
             </Nav.Item>
             <Nav.Item>
-              <Nav.Link eventKey="tools">
-                <FormattedMessage id="config.categories.tools" />
-              </Nav.Link>
+              <LinkContainer to="/settings?tab=tools">
+                <Nav.Link eventKey="tools">
+                  <FormattedMessage id="config.categories.tools" />
+                </Nav.Link>
+              </LinkContainer>
             </Nav.Item>
             <Nav.Item>
-              <Nav.Link eventKey="changelog">
-                <FormattedMessage id="config.categories.changelog" />
-              </Nav.Link>
+              <LinkContainer to="/settings?tab=changelog">
+                <Nav.Link eventKey="changelog">
+                  <FormattedMessage id="config.categories.changelog" />
+                </Nav.Link>
+              </LinkContainer>
             </Nav.Item>
             <Nav.Item>
-              <Nav.Link eventKey="about">
-                <FormattedMessage id="config.categories.about" />
-              </Nav.Link>
+              <LinkContainer to="/settings?tab=about">
+                <Nav.Link eventKey="about">
+                  <FormattedMessage id="config.categories.about" />
+                </Nav.Link>
+              </LinkContainer>
             </Nav.Item>
             <hr className="d-sm-none" />
           </Nav>