[feat] Create user settings page (#315)

package.json

@@ -37,79 +37,79 @@
     "@emotion/react": "^11.13.3",
     "@emotion/styled": "^11.13.0",
     "@fontsource-variable/plus-jakarta-sans": "^5.1.0",
-    "@lingui/macro": "^4.11.4",
-    "@lingui/react": "^4.11.4",
-    "@mui/icons-material": "^6.1.3",
-    "@mui/lab": "^6.0.0-beta.10",
-    "@mui/material": "^6.1.3",
-    "@mui/system": "^6.1.3",
-    "@mui/x-charts": "^7.19.0",
-    "@mui/x-charts-pro": "^7.0.0-beta.3",
-    "@mui/x-data-grid-premium": "^7.19.0",
-    "@mui/x-date-pickers-pro": "^7.19.0",
-    "@mui/x-tree-view": "^7.19.0",
-    "@tanstack/react-query": "^5.59.6",
+    "@lingui/macro": "^4.13.0",
+    "@lingui/react": "^4.13.0",
+    "@mui/icons-material": "^6.1.4",
+    "@mui/lab": "^6.0.0-beta.12",
+    "@mui/material": "^6.1.4",
+    "@mui/system": "^6.1.4",
+    "@mui/x-charts": "^7.21.0",
+    "@mui/x-charts-pro": "^7.0.0-beta.5",
+    "@mui/x-data-grid-premium": "^7.21.0",
+    "@mui/x-date-pickers-pro": "^7.21.0",
+    "@mui/x-tree-view": "^7.21.0",
+    "@tanstack/react-query": "^5.59.15",
     "@uidotdev/usehooks": "^2.4.1",
     "axios": "^1.7.7",
     "d3": "^7.9.0",
     "dayjs": "^1.11.13",
     "diff": "^7.0.0",
     "flag-icons": "^7.2.3",
-    "hast-util-to-jsx-runtime": "^2.3.0",
+    "hast-util-to-jsx-runtime": "^2.3.2",
     "highlight.js": "^11.10.0",
     "immer": "^10.1.1",
     "js-cookie": "^3.0.5",
     "lowlight": "^3.1.0",
     "mustache": "^4.2.0",
-    "posthog-js": "^1.167.0",
+    "posthog-js": "^1.174.2",
     "qrcode": "^1.5.4",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-error-boundary": "^4.0.13",
+    "react-error-boundary": "^4.1.2",
     "react-lazy-load-image-component": "^1.6.2",
-    "react-router-dom": "^6.26.2",
+    "react-router-dom": "^6.27.0",
     "react-transition-group": "^4.4.5",
     "react-window": "^1.8.10",
-    "recharts": "^2.12.7",
+    "recharts": "^2.13.0",
     "trackjs": "^3.10.4",
     "typescript-parsec": "^0.3.4",
-    "yaml": "^2.5.1"
+    "yaml": "^2.6.0"
   },
   "devDependencies": {
     "@emotion/styled": "^11.13.0",
-    "@eslint/compat": "^1.2.0",
+    "@eslint/compat": "^1.2.1",
     "@eslint/eslintrc": "^3.1.0",
-    "@eslint/js": "^9.12.0",
-    "@lingui/cli": "^4.11.4",
+    "@eslint/js": "^9.13.0",
+    "@lingui/cli": "^4.13.0",
     "@lingui/swc-plugin": "^4.0.10",
-    "@lingui/vite-plugin": "^4.11.4",
-    "@storybook/addon-essentials": "^8.3.5",
-    "@storybook/addon-links": "^8.3.5",
-    "@storybook/blocks": "^8.3.5",
-    "@storybook/react": "^8.3.5",
-    "@storybook/react-vite": "^8.3.5",
-    "@storybook/test": "^8.3.5",
-    "@testing-library/jest-dom": "^6.5.0",
+    "@lingui/vite-plugin": "^4.13.0",
+    "@storybook/addon-essentials": "^8.3.6",
+    "@storybook/addon-links": "^8.3.6",
+    "@storybook/blocks": "^8.3.6",
+    "@storybook/react": "^8.3.6",
+    "@storybook/react-vite": "^8.3.6",
+    "@storybook/test": "^8.3.6",
+    "@testing-library/jest-dom": "^6.6.2",
     "@types/d3": "^7.4.3",
     "@types/diff": "^5.2.3",
     "@types/js-cookie": "^3.0.6",
     "@types/mustache": "^4.2.5",
     "@types/qrcode": "^1.5.5",
     "@types/react": "^18.3.11",
-    "@types/react-dom": "^18.3.0",
+    "@types/react-dom": "^18.3.1",
     "@types/react-is": "^18.3.0",
     "@types/react-lazy-load-image-component": "^1.6.4",
     "@types/react-window": "^1.8.8",
     "@vitejs/plugin-react-swc": "^3.7.1",
-    "@vitest/coverage-v8": "^2.1.2",
-    "@vitest/ui": "^2.1.2",
+    "@vitest/coverage-v8": "^2.1.3",
+    "@vitest/ui": "^2.1.3",
     "babel-plugin-macros": "3.1.0",
     "esbuild": "^0.24.0",
-    "eslint": "^9.12.0",
+    "eslint": "^9.13.0",
     "eslint-plugin-prettier": "^5.2.1",
-    "eslint-plugin-react-hooks": "^5.1.0-rc.0",
-    "eslint-plugin-react-refresh": "^0.4.12",
-    "eslint-plugin-storybook": "^0.9.0",
+    "eslint-plugin-react-hooks": "^5.0.0",
+    "eslint-plugin-react-refresh": "^0.4.13",
+    "eslint-plugin-storybook": "^0.10.1",
     "globals": "^15.11.0",
     "husky": "^9.1.6",
     "lint-staged": "^15.2.10",
@@ -118,18 +118,18 @@
     "prop-types": "15",
     "react-refresh": "^0.14.2",
     "shx": "^0.3.4",
-    "storybook": "^8.3.5",
+    "storybook": "^8.3.6",
     "tsc-files": "^1.1.4",
     "type-fest": "^4.26.1",
     "typescript": "^5.6.3",
-    "typescript-eslint": "^8.8.1",
+    "typescript-eslint": "^8.10.0",
     "unique-names-generator": "^4.7.1",
     "uuid": "^10.0.0",
-    "vite": "^5.4.8",
+    "vite": "^5.4.9",
     "vite-plugin-html": "^3.2.2",
     "vite-plugin-mock-dev-server": "^1.8.0",
     "vite-plugin-svgr": "^4.2.0",
-    "vitest": "^2.1.2",
+    "vitest": "^2.1.3",
     "web-vitals": "^4.2.3"
   },
   "browserslist": {

src/assets/icons/icon-list.ts

@@ -11,17 +11,20 @@ import BucketIconComp from './bucket-icon.svg?react'
 import CalendarMonthIconComp from './calendar-month-icon.svg?react'
 import CancelIconComp from './cancel-icon.svg?react'
 import CheckIconComp from './check-icon.svg?react'
+import CheckSmallIconComp from './check-small-icon.svg?react'
 import ChevronRightIconComp from './chevron-right-icon.svg?react'
 import CloseIconComp from './close-icon.svg?react'
 import CloseSmallIconComp from './close-small-icon.svg?react'
 import CloudIconComp from './cloud-icon.svg?react'
 import CodeBlocksIconComp from './code-blocks-icon.svg?react'
+import CopyAllIconComp from './copy-all-icon.svg?react'
 import CorporateFareIconComp from './corporate-fare-icon.svg?react'
 import { createIcon } from './createIcon'
 import CrownComp from './crown.svg?react'
 import DashboardIconComp from './dashboard-icon.svg?react'
 import DatabaseIconComp from './database-icon.svg?react'
 import DatabaseOldIconComp from './database-old-icon.svg?react'
+import DeleteIconComp from './delete-icon.svg?react'
 import DescriptionIconComp from './description-icon.svg?react'
 import DiscordIconComp from './discord-icon.svg?react'
 import DiscordWithTextLogoComp from './discord-with-text-logo.svg?react'
@@ -65,7 +68,10 @@ import OpenInNewIconComp from './open-in-new-icon.svg?react'
 import OpsgenieLogoComp from './opsgenie-logo.svg?react'
 import PagerdutyLogoComp from './pagerduty-logo.svg?react'
 import PasswordIconComp from './password-icon.svg?react'
+import PowerIconComp from './power-icon.svg?react'
+import PowerOffIconComp from './power-off-icon.svg?react'
 import ReceiptIconComp from './receipt-icon.svg?react'
+import RefreshIconComp from './refresh-icon.svg?react'
 import ScheduleIconComp from './schedule-icon.svg?react'
 import SearchIconComp from './search-icon.svg?react'
 import SettingsIconComp from './settings-icon.svg?react'
@@ -76,7 +82,9 @@ import TeamsLogoComp from './teams-logo.svg?react'
 import TickSmallIconComp from './tick-small-icon.svg?react'
 import TroubleshootIconComp from './troubleshoot-icon.svg?react'
 import VerifiedUserIconComp from './verified-user-icon.svg?react'
+import VisibilityIconComp from './visibility-icon.svg?react'
 import VisibilityOffIconComp from './visibility-off-icon.svg?react'
+import VPNKeyIconComp from './vpn-key-icon.svg?react'
 import WarningIconComp from './warning-icon.svg?react'
 import WorkspaceSettingsIconComp from './workspace-settings-icon.svg?react'
 
@@ -93,16 +101,19 @@ export const BucketIcon = createIcon(BucketIconComp)
 export const CalendarMonthIcon = createIcon(CalendarMonthIconComp)
 export const CancelIcon = createIcon(CancelIconComp)
 export const CheckIcon = createIcon(CheckIconComp)
+export const CheckSmallIcon = createIcon(CheckSmallIconComp)
 export const ChevronRightIcon = createIcon(ChevronRightIconComp)
 export const CloseIcon = createIcon(CloseIconComp)
 export const CloseSmallIcon = createIcon(CloseSmallIconComp)
 export const CloudIcon = createIcon(CloudIconComp)
 export const CodeBlocksIcon = createIcon(CodeBlocksIconComp)
+export const CopyAllIcon = createIcon(CopyAllIconComp)
 export const CorporateFareIcon = createIcon(CorporateFareIconComp)
 export const Crown = createIcon(CrownComp)
 export const DashboardIcon = createIcon(DashboardIconComp)
 export const DatabaseIcon = createIcon(DatabaseIconComp)
 export const DatabaseOldIcon = createIcon(DatabaseOldIconComp)
+export const DeleteIcon = createIcon(DeleteIconComp)
 export const DescriptionIcon = createIcon(DescriptionIconComp)
 export const DiscordIcon = createIcon(DiscordIconComp)
 export const DiscordWithTextLogo = createIcon(DiscordWithTextLogoComp)
@@ -146,7 +157,10 @@ export const OpenInNewIcon = createIcon(OpenInNewIconComp)
 export const OpsgenieLogo = createIcon(OpsgenieLogoComp)
 export const PagerdutyLogo = createIcon(PagerdutyLogoComp)
 export const PasswordIcon = createIcon(PasswordIconComp)
+export const PowerIcon = createIcon(PowerIconComp)
+export const PowerOffIcon = createIcon(PowerOffIconComp)
 export const ReceiptIcon = createIcon(ReceiptIconComp)
+export const RefreshIcon = createIcon(RefreshIconComp)
 export const ScheduleIcon = createIcon(ScheduleIconComp)
 export const SearchIcon = createIcon(SearchIconComp)
 export const SettingsIcon = createIcon(SettingsIconComp)
@@ -157,6 +171,8 @@ export const TeamsLogo = createIcon(TeamsLogoComp)
 export const TickSmallIcon = createIcon(TickSmallIconComp)
 export const TroubleshootIcon = createIcon(TroubleshootIconComp)
 export const VerifiedUserIcon = createIcon(VerifiedUserIconComp)
+export const VisibilityIcon = createIcon(VisibilityIconComp)
 export const VisibilityOffIcon = createIcon(VisibilityOffIconComp)
+export const VPNKeyIcon = createIcon(VPNKeyIconComp)
 export const WarningIcon = createIcon(WarningIconComp)
 export const WorkspaceSettingsIcon = createIcon(WorkspaceSettingsIconComp)

src/containers/panel-settings/PanelSettingsContainer.tsx

@@ -0,0 +1,19 @@
+import { Suspense } from 'react'
+import { ErrorBoundaryFallback, NetworkErrorBoundary } from 'src/shared/error-boundary-fallback'
+import { ContentRegion, PanelSettingsLayout } from 'src/shared/layouts/panel-settings-layout'
+import { LoadingSuspenseFallback } from 'src/shared/loading'
+import { PanelSettingsRoutes } from './PanelSettingsRoutes'
+
+export default function PanelSettingsContainer() {
+  return (
+    <PanelSettingsLayout>
+      <ContentRegion>
+        <NetworkErrorBoundary FallbackComponent={ErrorBoundaryFallback}>
+          <Suspense fallback={<LoadingSuspenseFallback />}>
+            <PanelSettingsRoutes />
+          </Suspense>
+        </NetworkErrorBoundary>
+      </ContentRegion>
+    </PanelSettingsLayout>
+  )
+}