feat: add user settings routes and layout (#16748)

Author: slate71

airbyte-webapp/src/area/layout/SideBar/SideBar.tsx

@@ -76,8 +76,8 @@ const OrganizationNavItems = () => {
   const multiWorkspaceUI = useFeature(FeatureItem.MultiWorkspaceUI);
   const displayOrganizationUsers = useFeature(FeatureItem.DisplayOrganizationUsers);
   const canViewOrgSettings = useIntent("ViewOrganizationSettings", { organizationId });
-  const canManageOrganizationBilling = useGeneratedIntent(Intent.ManageOrganizationBilling);
-  const canViewOrganizationUsage = useGeneratedIntent(Intent.ViewOrganizationUsage);
+  const canManageOrganizationBilling = useGeneratedIntent(Intent.ManageOrganizationBilling, { organizationId });
+  const canViewOrganizationUsage = useGeneratedIntent(Intent.ViewOrganizationUsage, { organizationId });
   const basePath = `${RoutePaths.Organization}/${organizationId}/`;
   return (
     <>
@@ -140,6 +140,8 @@ export const SideBar: React.FC<PropsWithChildren> = () => {
       ? formatMessage({ id: "sidebar.defaultUsername" })
       : user?.name?.trim() || user?.email?.trim();
 
+  const basePath = pathname.split("/").slice(0, 3).join("/");
+
   return (
     <nav className={classNames(styles.sidebar, { [styles.hidden]: isHidden })}>
       <AirbyteOrgPicker />
@@ -164,7 +166,7 @@ export const SideBar: React.FC<PropsWithChildren> = () => {
               options={[
                 {
                   as: "a",
-                  href: RoutePaths.Settings, // NOTE: This needs to be fixed once user paths are set up
+                  href: `${basePath}/${SettingsRoutePaths.User}`,
                   displayName: formatMessage({ id: "sidebar.userSettings" }),
                   internal: true,
                   icon: <Icon type="gear" />,

airbyte-webapp/src/area/settings/UserSettingsRoutes.tsx

@@ -0,0 +1,36 @@
+import React from "react";
+import { Navigate, Route, Routes } from "react-router-dom";
+
+import { CloudSettingsRoutePaths } from "packages/cloud/views/settings/routePaths";
+import { SettingsRoutePaths } from "pages/routePaths";
+
+import { UserSettingsLayout } from "./components/UserSettingsLayout";
+
+const AccountSettingsView = React.lazy(() =>
+  import("packages/cloud/views/users/AccountSettingsView/AccountSettingsView").then((module) => ({
+    default: module.AccountSettingsView,
+  }))
+);
+const ApplicationsView = React.lazy(() =>
+  import("packages/cloud/views/users/ApplicationSettingsView/ApplicationSettingsView").then((module) => ({
+    default: module.ApplicationSettingsView,
+  }))
+);
+const AdvancedSettingsPage = React.lazy(() =>
+  import("pages/SettingsPage/pages/AdvancedSettingsPage/AdvancedSettingsPage").then((module) => ({
+    default: module.AdvancedSettingsPage,
+  }))
+);
+
+export const UserSettingsRoutes: React.FC = () => {
+  return (
+    <Routes>
+      <Route element={<UserSettingsLayout />}>
+        <Route path={SettingsRoutePaths.Account} element={<AccountSettingsView />} />
+        <Route path={CloudSettingsRoutePaths.Applications} element={<ApplicationsView />} />
+        <Route path={CloudSettingsRoutePaths.Advanced} element={<AdvancedSettingsPage />} />
+        <Route path="*" element={<Navigate to={SettingsRoutePaths.Account} replace />} />
+      </Route>
+    </Routes>
+  );
+};

airbyte-webapp/src/area/settings/components/UserSettingsLayout.module.scss

@@ -0,0 +1,8 @@
+@use "scss/variables";
+@use "scss/colors";
+
+.container {
+  display: flex;
+  gap: variables.$spacing-xl;
+  height: 100%;
+}

airbyte-webapp/src/area/settings/components/UserSettingsLayout.tsx

@@ -0,0 +1,69 @@
+import React, { Suspense } from "react";
+import { useIntl } from "react-intl";
+import { Outlet } from "react-router-dom";
+
+import { HeadTitle } from "components/HeadTitle";
+import LoadingPage from "components/LoadingPage";
+
+import {
+  SettingsButton,
+  SettingsLink,
+  SettingsNavigation,
+  SettingsNavigationBlock,
+} from "area/settings/components/SettingsNavigation";
+import { useAuthService } from "core/services/auth";
+import { isOsanoActive, showOsanoDrawer } from "core/utils/dataPrivacy";
+import { useExperiment } from "hooks/services/Experiment";
+import { SettingsRoutePaths } from "pages/routePaths";
+
+import { SettingsLayoutContent } from "./SettingsLayout";
+import styles from "./UserSettingsLayout.module.scss";
+
+export const UserSettingsLayout: React.FC<React.PropsWithChildren> = () => {
+  const { formatMessage } = useIntl();
+  const { applicationSupport } = useAuthService();
+  const showAdvancedSettings = useExperiment("settings.showAdvancedSettings");
+
+  return (
+    <>
+      <HeadTitle titles={[{ id: "sidebar.userSettings" }]} />
+      <main className={styles.container}>
+        <SettingsNavigation>
+          <SettingsNavigationBlock title={formatMessage({ id: "settings.userSettings" })}>
+            <SettingsLink
+              iconType="user"
+              name={formatMessage({ id: "settings.account" })}
+              to={SettingsRoutePaths.Account}
+            />
+            {applicationSupport !== "none" && (
+              <SettingsLink
+                iconType="grid"
+                name={formatMessage({ id: "settings.applications" })}
+                to={SettingsRoutePaths.Applications}
+              />
+            )}
+            {isOsanoActive() && (
+              <SettingsButton
+                iconType="parameters"
+                onClick={() => showOsanoDrawer()}
+                name={formatMessage({ id: "settings.cookiePreferences" })}
+              />
+            )}
+            {showAdvancedSettings && (
+              <SettingsLink
+                iconType="gear"
+                name={formatMessage({ id: "settings.advanced" })}
+                to={SettingsRoutePaths.Advanced}
+              />
+            )}
+          </SettingsNavigationBlock>
+        </SettingsNavigation>
+        <SettingsLayoutContent>
+          <Suspense fallback={<LoadingPage />}>
+            <Outlet />
+          </Suspense>
+        </SettingsLayoutContent>
+      </main>
+    </>
+  );
+};

airbyte-webapp/src/packages/cloud/cloudRoutes.tsx

@@ -69,7 +69,6 @@ const CloudMainViewRoutes = () => {
 
       {isOrgPickerEnabled ? (
         <Route element={<MainLayout />}>
-          <Route path="account" element={<div>User Settings</div>} />
           <Route path={`${RoutePaths.Organization}/:organizationId/*`} element={<OrganizationRoutes />} />
           <Route path={`${RoutePaths.Workspaces}/:workspaceId/*`} element={<WorkspacesRoutes />} />
         </Route>

airbyte-webapp/src/packages/cloud/views/routes/WorkspacesRoutes.tsx

@@ -3,6 +3,7 @@ import { Navigate, Route, Routes } from "react-router-dom";
 
 import { EnterpriseSourcePage } from "components/source/enterpriseStubs/EnterpriseSourcePage";
 
+import { UserSettingsRoutes } from "area/settings/UserSettingsRoutes";
 import { useCurrentWorkspace } from "core/api";
 import { usePrefetchWorkspaceData } from "core/api/cloud";
 import { useAnalyticsRegisterValues } from "core/services/analytics/useAnalyticsService";
@@ -18,7 +19,7 @@ import { AccountSettingsView } from "packages/cloud/views/users/AccountSettingsV
 import { ApplicationSettingsView } from "packages/cloud/views/users/ApplicationSettingsView/ApplicationSettingsView";
 import { WorkspaceSettingsView } from "packages/cloud/views/workspaces/WorkspaceSettingsView";
 import WorkspaceUsagePage from "packages/cloud/views/workspaces/WorkspaceUsagePage";
-import { RoutePaths, DestinationPaths, SourcePaths } from "pages/routePaths";
+import { RoutePaths, DestinationPaths, SourcePaths, SettingsRoutePaths } from "pages/routePaths";
 import AdvancedSettingsPage from "pages/SettingsPage/pages/AdvancedSettingsPage";
 import {
   SourcesPage as SettingsSourcesPage,
@@ -123,6 +124,7 @@ export const WorkspacesRoutes: React.FC = () => {
         <Route path="*" element={<Navigate to={CloudSettingsRoutePaths.Account} replace />} />
       </Route>
       <Route path={`${RoutePaths.ConnectorBuilder}/*`} element={<ConnectorBuilderRoutes />} />
+      <Route path={`${SettingsRoutePaths.User}/*`} element={<UserSettingsRoutes />} />
       <Route path="*" element={<Navigate to={RoutePaths.Connections} replace />} />
     </Routes>
   );

airbyte-webapp/src/pages/organization/OrganizationRoutes.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import { Navigate, Route, Routes } from "react-router-dom";
 
 import { useCurrentOrganizationId } from "area/organization/utils";
+import { UserSettingsRoutes } from "area/settings/UserSettingsRoutes";
 import { FeatureItem, useFeature } from "core/services/features";
 import { Intent, useGeneratedIntent, useIntent } from "core/utils/rbac";
 import { useExperiment } from "hooks/services/Experiment";
@@ -10,7 +11,7 @@ import { EmbeddedOnboardingPage } from "pages/embedded/EmbeddedOnboardingPage/Em
 import { GeneralOrganizationSettingsPage } from "pages/SettingsPage/pages/Organization/GeneralOrganizationSettingsPage";
 import { OrganizationMembersPage } from "pages/SettingsPage/pages/Organization/OrganizationMembersPage";
 
-import { RoutePaths } from "../routePaths";
+import { RoutePaths, SettingsRoutePaths } from "../routePaths";
 
 // Import organization-related components
 const WorkspacesPage = React.lazy(() => import("pages/workspaces"));
@@ -42,6 +43,7 @@ export const OrganizationRoutes: React.FC = () => {
         <Route path={CloudSettingsRoutePaths.OrganizationUsage} element={<OrganizationUsagePage />} />
       )}
       <Route path={RoutePaths.Settings} element={<GeneralOrganizationSettingsPage />} />
+      <Route path={`${SettingsRoutePaths.User}/*`} element={<UserSettingsRoutes />} />
       <Route path="*" element={<Navigate to={defaultPath} replace />} />
     </Routes>
   );