diff --git a/components/dashboard/src/admin/License.tsx b/components/dashboard/src/admin/License.tsx index 92c7a3199af9e4..1586edeef36d05 100644 --- a/components/dashboard/src/admin/License.tsx +++ b/components/dashboard/src/admin/License.tsx @@ -17,7 +17,7 @@ import { ReactComponent as LinkSvg } from "../images/external-link.svg"; import SolidCard from "../components/SolidCard"; import Card from "../components/Card"; import { isGitpodIo } from "../utils"; -import { AdminPageHeader } from "./AdminPageHeader"; +import { SettingsLayout } from "./Settings"; export default function License() { const { license, setLicense } = useContext(LicenseContext); @@ -42,54 +42,50 @@ export default function License() { return (
- -
-
- - - {licenseLevel} - {paid} -
Available features:
-
- {features && - features.map((feat: string) => ( - - {featureList?.includes(feat) ? ( - - ) : ( - - )} - {capitalizeInitials(feat)} - - ))} + +
+ + + {licenseLevel} + {paid} +
Available features:
+
+ {features && + features.map((feat: string) => ( + + {featureList?.includes(feat) ? ( + + ) : ( + + )} + {capitalizeInitials(feat)} + + ))} +
+
+
+ + +
{statusMessage}
+

Registered Users

+ {license?.userCount || 0} + / {userLimit} +

License Type

+

{capitalizeInitials(license?.type || "")}

+ + Compare Plans +
+
-
- - - -
{statusMessage}
-

Registered Users

- {license?.userCount || 0} - / {userLimit} -

License Type

-

- {capitalizeInitials(license?.type || "")} -

-
- Compare Plans -
- -
-
- -
-
+ + +
- +
); } diff --git a/components/dashboard/src/admin/Settings.tsx b/components/dashboard/src/admin/Settings.tsx index d9320c45631974..16c675693d6ac2 100644 --- a/components/dashboard/src/admin/Settings.tsx +++ b/components/dashboard/src/admin/Settings.tsx @@ -4,7 +4,7 @@ * See License.AGPL.txt in the project root for license information. */ -import { useContext } from "react"; +import React, { useContext } from "react"; import { TelemetryData, InstallationAdminSettings } from "@gitpod/gitpod-protocol"; import { AdminContext } from "../admin-context"; import CheckBox from "../components/CheckBox"; @@ -12,7 +12,21 @@ import { getGitpodService } from "../service/service"; import { useEffect, useState } from "react"; import InfoBox from "../components/InfoBox"; import { isGitpodIo } from "../utils"; -import { AdminPageHeader } from "./AdminPageHeader"; +import { PageWithSubMenu } from "../components/PageWithSubMenu"; +import { getAdminTabs, getAdminSettingsMenu } from "./admin.routes"; + +export function SettingsLayout(props: { children: React.ReactNode }) { + return ( + + {props.children} + + ); +} export default function Settings() { const { adminSettings, setAdminSettings } = useContext(AdminContext); @@ -38,55 +52,53 @@ export default function Settings() { return (
- -
-

Usage Statistics

-

- We collect usage telemetry to gain insights on how you use your Gitpod instance, so we can - provide a better overall experience. -

-

- - Read our Privacy Policy - -

- - Enable usage telemetry on your Gitpod instance. A preview of your telemetry is available - below. - - } - checked={adminSettings?.sendTelemetry ?? false} - onChange={(evt) => - actuallySetTelemetryPrefs({ - ...adminSettings, - sendTelemetry: evt.target.checked, - } as InstallationAdminSettings) - } - /> - - Include an optional customer ID in usage telemetry to provide individualized support. - - } - checked={adminSettings?.sendCustomerID ?? false} - onChange={(evt) => - actuallySetTelemetryPrefs({ - ...adminSettings, - sendCustomerID: evt.target.checked, - } as InstallationAdminSettings) - } - /> -

Telemetry preview

- -
{JSON.stringify(telemetryData, null, 2)}
-
-
-
+ +

Usage Statistics

+

+ We collect usage telemetry to gain insights on how you use your Gitpod instance, so we can provide a + better overall experience. +

+

+ + Read our Privacy Policy + +

+ + Enable usage telemetry on your Gitpod instance. A preview of your telemetry is available + below. + + } + checked={adminSettings?.sendTelemetry ?? false} + onChange={(evt) => + actuallySetTelemetryPrefs({ + ...adminSettings, + sendTelemetry: evt.target.checked, + } as InstallationAdminSettings) + } + /> + + Include an optional customer ID in usage telemetry to provide individualized support. + + } + checked={adminSettings?.sendCustomerID ?? false} + onChange={(evt) => + actuallySetTelemetryPrefs({ + ...adminSettings, + sendCustomerID: evt.target.checked, + } as InstallationAdminSettings) + } + /> +

Telemetry preview

+ +
{JSON.stringify(telemetryData, null, 2)}
+
+
); } diff --git a/components/dashboard/src/admin/admin.routes.ts b/components/dashboard/src/admin/admin.routes.ts index d809ca032c0963..aeece38de7031d 100644 --- a/components/dashboard/src/admin/admin.routes.ts +++ b/components/dashboard/src/admin/admin.routes.ts @@ -28,13 +28,23 @@ export function getAdminTabs(): TabEntry[] { title: "Blocked Repositories", link: "/admin/blocked-repositories", }, - { - title: "License", - link: "/admin/license", - }, { title: "Settings", link: "/admin/settings", + alternatives: getAdminSettingsMenu().flatMap((e) => e.link), + }, + ]; +} + +export function getAdminSettingsMenu() { + return [ + { + title: "General", + link: ["/admin/settings"], + }, + { + title: "License", + link: ["/admin/license"], }, ]; } diff --git a/components/dashboard/src/menu/Menu.tsx b/components/dashboard/src/menu/Menu.tsx index 9b0940542c7cbe..1a1755e1fa78ef 100644 --- a/components/dashboard/src/menu/Menu.tsx +++ b/components/dashboard/src/menu/Menu.tsx @@ -68,7 +68,15 @@ export default function Menu() { const adminMenu: Entry = { title: "Admin", link: "/admin", - alternatives: [...getAdminTabs().map((entry) => entry.link)], + alternatives: [ + ...getAdminTabs().reduce( + (prevEntry, currEntry) => + currEntry.alternatives + ? [...prevEntry, ...currEntry.alternatives, currEntry.link] + : [...prevEntry, currEntry.link], + [] as string[], + ), + ], }; const handleFeedbackFormClick = () => {