Dataset Settings: Refactor as React functional components (#8719)

In preparation of restyling this component in a similar fashion as the
account and organization settings, I first refactored several datasets
settings & tab components as React functional components to use modern
hook APIs etc.

I move the beforeUnload into it's own hook. This might be related to
issue #5977

### URL of deployed dev instance (used for testing):
- https://functionaldatasetsettings.webknossos.xyz/

### Issues:
- Related to #8672 

------
(Please delete unneeded items, merge only when none are left open)
- [x] Added changelog entry (create a `$PR_NUMBER.md` file in
`unreleased_changes` or use `./tools/create-changelog-entry.py`)
- [ ] Added migration guide entry if applicable (edit the same file as
for the changelog)
- [ ] Updated [documentation](../blob/master/docs) if applicable
- [ ] Adapted [wk-libs python
client](https://github.com/scalableminds/webknossos-libs/tree/master/webknossos/webknossos/client)
if relevant API parts change
- [ ] Removed dev-only changes like prints and application.conf edits
- [ ] Considered [common edge
cases](../blob/master/.github/common_edge_cases.md)
- [ ] Needs datastore update after deployment

---------

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>

Author: hotzenklotz

frontend/javascripts/admin/account/account_auth_token_view.tsx

@@ -4,7 +4,7 @@ import { Button, Col, Row, Spin, Typography } from "antd";
 import { useWkSelector } from "libs/react_hooks";
 import Toast from "libs/toast";
 import { useEffect, useState } from "react";
-import { SettingsCard } from "./helpers/settings_card";
+import { SettingsCard, type SettingsCardProps } from "./helpers/settings_card";
 import { SettingsTitle } from "./helpers/settings_title";
 
 const { Text } = Typography;
@@ -41,20 +41,20 @@ function AccountAuthTokenView() {
     }
   };
 
-  const APIitems = [
+  const APIitems: SettingsCardProps[] = [
     {
       title: "Auth Token",
-      value: (
+      content: (
         <Text code copyable>
           {currentToken}
         </Text>
       ),
     },
     {
       title: "Token Revocation",
-      explanation:
+      tooltip:
         "Revoke your token if it has been compromised or if you suspect someone else has gained access to it. This will invalidate all active sessions.",
-      value: (
+      content: (
         <Button icon={<SwapOutlined />} type="primary" ghost onClick={handleRevokeToken}>
           Revoke and Generate New Token
         </Button>
@@ -64,7 +64,7 @@ function AccountAuthTokenView() {
       ? [
           {
             title: "Organization ID",
-            value: (
+            content: (
               <Text code copyable>
                 {activeUser.organization}
               </Text>
@@ -74,7 +74,7 @@ function AccountAuthTokenView() {
       : []),
     {
       title: "API Documentation",
-      value: (
+      content: (
         <a href="https://docs.webknossos.org/webknossos-py/index.html">
           Read the docs <ExportOutlined />
         </a>
@@ -92,11 +92,7 @@ function AccountAuthTokenView() {
         <Row gutter={[24, 24]} style={{ marginBottom: 24 }}>
           {APIitems.map((item) => (
             <Col span={12} key={item.title}>
-              <SettingsCard
-                title={item.title}
-                description={item.value}
-                explanation={item.explanation}
-              />
+              <SettingsCard title={item.title} content={item.content} tooltip={item.tooltip} />
             </Col>
           ))}
         </Row>

frontend/javascripts/admin/account/account_password_view.tsx

@@ -7,7 +7,7 @@ import { useState } from "react";
 import { useNavigate } from "react-router-dom";
 import { logoutUserAction } from "viewer/model/actions/user_actions";
 import Store from "viewer/store";
-import { SettingsCard } from "./helpers/settings_card";
+import { SettingsCard, type SettingsCardProps } from "./helpers/settings_card";
 import { SettingsTitle } from "./helpers/settings_title";
 const FormItem = Form.Item;
 const { Password } = Input;
@@ -155,10 +155,10 @@ function AccountPasswordView() {
     setResetPasswordVisible(true);
   }
 
-  const passKeyList = [
+  const passKeyList: SettingsCardProps[] = [
     {
       title: "Coming soon",
-      value: "Passwordless login with passkeys is coming soon",
+      content: "Passwordless login with passkeys is coming soon",
       // action: <Button type="default" shape="circle" icon={<DeleteOutlined />} size="small" />,
       action: undefined,
     },
@@ -171,7 +171,7 @@ function AccountPasswordView() {
         <Col span={12}>
           <SettingsCard
             title="Password"
-            description={getPasswordComponent()}
+            content={getPasswordComponent()}
             action={
               <Button
                 type="default"
@@ -189,7 +189,7 @@ function AccountPasswordView() {
       <Row gutter={[24, 24]} style={{ marginBottom: 24 }}>
         {passKeyList.map((item) => (
           <Col span={12} key={item.title}>
-            <SettingsCard title={item.title} description={item.value} action={item.action} />
+            <SettingsCard title={item.title} content={item.content} action={item.action} />
           </Col>
         ))}
       </Row>

frontend/javascripts/admin/account/account_profile_view.tsx

@@ -9,7 +9,7 @@ import { formatUserName } from "viewer/model/accessors/user_accessor";
 import { setThemeAction } from "viewer/model/actions/ui_actions";
 import { setActiveUserAction } from "viewer/model/actions/user_actions";
 import Store from "viewer/store";
-import { SettingsCard } from "./helpers/settings_card";
+import { SettingsCard, type SettingsCardProps } from "./helpers/settings_card";
 import { SettingsTitle } from "./helpers/settings_title";
 
 function AccountProfileView() {
@@ -56,29 +56,29 @@ function AccountProfileView() {
     },
   ];
 
-  const profileItems = [
+  const profileItems: SettingsCardProps[] = [
     {
       title: "Name",
-      value: formatUserName(activeUser, activeUser),
+      content: formatUserName(activeUser, activeUser),
     },
     {
       title: "Email",
-      value: activeUser.email,
+      content: activeUser.email,
     },
     {
       title: "Organization",
-      value: activeOrganization?.name || activeUser.organization,
+      content: activeOrganization?.name || activeUser.organization,
     },
     {
       title: "Role",
-      value: role,
-      explanation: (
+      content: role,
+      tooltip: (
         <a href="https://docs.webknossos.org/webknossos/users/access_rights.html">Learn More</a>
       ),
     },
     {
       title: "Theme",
-      value: (
+      content: (
         <Dropdown.Button menu={{ items: themeItems }} trigger={["click"]} icon={<DownOutlined />}>
           {themeItems.find((item) => item.key === selectedTheme)?.label}
         </Dropdown.Button>
@@ -95,11 +95,7 @@ function AccountProfileView() {
       <Row gutter={[24, 24]} style={{ marginBottom: 24 }}>
         {profileItems.map((item) => (
           <Col span={12} key={item.title}>
-            <SettingsCard
-              title={item.title}
-              description={item.value}
-              explanation={item.explanation}
-            />
+            <SettingsCard title={item.title} content={item.content} tooltip={item.tooltip} />
           </Col>
         ))}
       </Row>

frontend/javascripts/admin/account/account_settings_view.tsx

@@ -44,7 +44,11 @@ const MENU_ITEMS: MenuItemGroupType[] = [
 function AccountSettingsView() {
   const location = useLocation();
   const navigate = useNavigate();
-  const selectedKey = location.pathname.split("/").filter(Boolean).pop() || "profile";
+  const selectedKey =
+    location.pathname
+      .split("/")
+      .filter((p) => p.length > 0)
+      .pop() || "profile";
 
   const breadcrumbItems = [
     {

frontend/javascripts/admin/account/helpers/settings_card.tsx

@@ -1,31 +1,32 @@
 import { InfoCircleOutlined } from "@ant-design/icons";
-import { Card, Flex, Popover, Typography } from "antd";
+import { Card, Flex, Tooltip, Typography } from "antd";
 
-interface SettingsCardProps {
+export type SettingsCardProps = {
   title: string;
-  description: React.ReactNode;
-  explanation?: React.ReactNode;
+  content: React.ReactNode;
+  tooltip?: React.ReactNode;
   action?: React.ReactNode;
-}
+  style?: React.CSSProperties;
+};
 
-export function SettingsCard({ title, description, explanation, action }: SettingsCardProps) {
+export function SettingsCard({ title, content, tooltip, action, style }: SettingsCardProps) {
   return (
-    <Card style={{ minHeight: 105 }}>
+    <Card style={{ minHeight: 105, ...style }}>
       <Typography.Text type="secondary" style={{ fontSize: 14 }}>
         <Flex justify="space-between">
           <div>
             {title}
 
-            {explanation != null ? (
-              <Popover content={explanation}>
-                <InfoCircleOutlined style={{ marginLeft: 4 }} />
-              </Popover>
+            {tooltip != null ? (
+              <Tooltip title={tooltip}>
+                <InfoCircleOutlined style={{ marginLeft: 8 }} />
+              </Tooltip>
             ) : null}
           </div>
           {action}
         </Flex>
       </Typography.Text>
-      <div style={{ fontSize: 16, marginTop: 4 }}>{description}</div>
+      <div style={{ fontSize: 16, marginTop: 4 }}>{content}</div>
     </Card>
   );
 }