Skip to content

Commit d3f0f59

Browse files
Devansu-Yadavroboquat
Devansu-Yadav
authored and
roboquat
committed
update: re-use submenu for settings and license
1 parent 02f323d commit d3f0f59

File tree

3 files changed

+120
-102
lines changed

3 files changed

+120
-102
lines changed

‎components/dashboard/src/admin/License.tsx

Lines changed: 43 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ import { ReactComponent as LinkSvg } from "../images/external-link.svg";
1717
import SolidCard from "../components/SolidCard";
1818
import Card from "../components/Card";
1919
import { isGitpodIo } from "../utils";
20-
import { AdminPageHeader } from "./AdminPageHeader";
20+
import { SettingsLayout } from "./Settings";
2121

2222
export default function License() {
2323
const { license, setLicense } = useContext(LicenseContext);
@@ -42,54 +42,50 @@ export default function License() {
4242

4343
return (
4444
<div>
45-
<AdminPageHeader title="Admin" subtitle="Configure and manage instance settings.">
46-
<div className="app-container mt-8">
47-
<div className="flex flex-row space-x-4">
48-
<Card className="w-72 h-64">
49-
<span>
50-
{licenseLevel}
51-
{paid}
52-
<div className="mt-4 font-semibold text-sm">Available features:</div>
53-
<div className="flex flex-col items-start text-sm">
54-
{features &&
55-
features.map((feat: string) => (
56-
<span className="inline-flex space-x-1">
57-
{featureList?.includes(feat) ? (
58-
<CheckSvg fill="currentColor" className="self-center mt-1" />
59-
) : (
60-
<XSvg fill="currentColor" className="self-center h-2 mt-1" />
61-
)}
62-
<span>{capitalizeInitials(feat)}</span>
63-
</span>
64-
))}
45+
<SettingsLayout>
46+
<div className="flex flex-row space-x-4">
47+
<Card className="w-72 h-64">
48+
<span>
49+
{licenseLevel}
50+
{paid}
51+
<div className="mt-4 font-semibold text-sm">Available features:</div>
52+
<div className="flex flex-col items-start text-sm">
53+
{features &&
54+
features.map((feat: string) => (
55+
<span className="inline-flex space-x-1">
56+
{featureList?.includes(feat) ? (
57+
<CheckSvg fill="currentColor" className="self-center mt-1" />
58+
) : (
59+
<XSvg fill="currentColor" className="self-center h-2 mt-1" />
60+
)}
61+
<span>{capitalizeInitials(feat)}</span>
62+
</span>
63+
))}
64+
</div>
65+
</span>
66+
</Card>
67+
<SolidCard className="w-72 h-64">
68+
<span>
69+
<div className="my-2">{statusMessage}</div>
70+
<p className="dark:text-gray-500 font-semibold">Registered Users</p>
71+
<span className="dark:text-gray-300 text-lg">{license?.userCount || 0}</span>
72+
<span className="dark:text-gray-500 text-gray-400 pt-1 text-lg"> / {userLimit} </span>
73+
<p className="dark:text-gray-500 pt-2 font-semibold">License Type</p>
74+
<h4 className="dark:text-gray-300 text-lg">{capitalizeInitials(license?.type || "")}</h4>
75+
<a
76+
className="gp-link flex flex-row mr-2 justify-end font-semibold space-x-2 mt-6"
77+
href="https://www.gitpod.io/self-hosted"
78+
target="_blank"
79+
>
80+
<span className="text-sm">Compare Plans</span>
81+
<div className="self-end">
82+
<LinkSvg />
6583
</div>
66-
</span>
67-
</Card>
68-
<SolidCard className="w-72 h-64">
69-
<span>
70-
<div className="my-2">{statusMessage}</div>
71-
<p className="dark:text-gray-500 font-semibold">Registered Users</p>
72-
<span className="dark:text-gray-300 text-lg">{license?.userCount || 0}</span>
73-
<span className="dark:text-gray-500 text-gray-400 pt-1 text-lg"> / {userLimit} </span>
74-
<p className="dark:text-gray-500 pt-2 font-semibold">License Type</p>
75-
<h4 className="dark:text-gray-300 text-lg">
76-
{capitalizeInitials(license?.type || "")}
77-
</h4>
78-
<a
79-
className="gp-link flex flex-row mr-2 justify-end font-semibold space-x-2 mt-6"
80-
href="https://www.gitpod.io/self-hosted"
81-
target="_blank"
82-
>
83-
<span className="text-sm">Compare Plans</span>
84-
<div className="self-end">
85-
<LinkSvg />
86-
</div>
87-
</a>
88-
</span>
89-
</SolidCard>
90-
</div>
84+
</a>
85+
</span>
86+
</SolidCard>
9187
</div>
92-
</AdminPageHeader>
88+
</SettingsLayout>
9389
</div>
9490
);
9591
}

‎components/dashboard/src/admin/Settings.tsx

Lines changed: 63 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -4,15 +4,29 @@
44
* See License.AGPL.txt in the project root for license information.
55
*/
66

7-
import { useContext } from "react";
7+
import React, { useContext } from "react";
88
import { TelemetryData, InstallationAdminSettings } from "@gitpod/gitpod-protocol";
99
import { AdminContext } from "../admin-context";
1010
import CheckBox from "../components/CheckBox";
1111
import { getGitpodService } from "../service/service";
1212
import { useEffect, useState } from "react";
1313
import InfoBox from "../components/InfoBox";
1414
import { isGitpodIo } from "../utils";
15-
import { AdminPageHeader } from "./AdminPageHeader";
15+
import { PageWithSubMenu } from "../components/PageWithSubMenu";
16+
import { getAdminTabs, getAdminSettingsMenu } from "./admin.routes";
17+
18+
export function SettingsLayout(props: { children: React.ReactNode }) {
19+
return (
20+
<PageWithSubMenu
21+
subMenu={getAdminSettingsMenu()}
22+
title="Admin"
23+
subtitle="Configure and manage instance settings."
24+
tabs={getAdminTabs()}
25+
>
26+
{props.children}
27+
</PageWithSubMenu>
28+
);
29+
}
1630

1731
export default function Settings() {
1832
const { adminSettings, setAdminSettings } = useContext(AdminContext);
@@ -38,55 +52,53 @@ export default function Settings() {
3852

3953
return (
4054
<div>
41-
<AdminPageHeader title="Admin" subtitle="Configure and manage instance settings.">
42-
<div className="app-container mt-8">
43-
<h3>Usage Statistics</h3>
44-
<p className="text-base text-gray-500 pb-4 max-w-2xl">
45-
We collect usage telemetry to gain insights on how you use your Gitpod instance, so we can
46-
provide a better overall experience.
47-
</p>
48-
<p>
49-
<a className="gp-link" href="https://www.gitpod.io/privacy">
50-
Read our Privacy Policy
51-
</a>
52-
</p>
53-
<CheckBox
54-
title="Enable usage telemetry"
55-
desc={
56-
<span>
57-
Enable usage telemetry on your Gitpod instance. A preview of your telemetry is available
58-
below.
59-
</span>
60-
}
61-
checked={adminSettings?.sendTelemetry ?? false}
62-
onChange={(evt) =>
63-
actuallySetTelemetryPrefs({
64-
...adminSettings,
65-
sendTelemetry: evt.target.checked,
66-
} as InstallationAdminSettings)
67-
}
68-
/>
69-
<CheckBox
70-
title="Include customer ID in telemetry"
71-
desc={
72-
<span>
73-
Include an optional customer ID in usage telemetry to provide individualized support.
74-
</span>
75-
}
76-
checked={adminSettings?.sendCustomerID ?? false}
77-
onChange={(evt) =>
78-
actuallySetTelemetryPrefs({
79-
...adminSettings,
80-
sendCustomerID: evt.target.checked,
81-
} as InstallationAdminSettings)
82-
}
83-
/>
84-
<h3 className="mt-4">Telemetry preview</h3>
85-
<InfoBox>
86-
<pre>{JSON.stringify(telemetryData, null, 2)}</pre>
87-
</InfoBox>
88-
</div>
89-
</AdminPageHeader>
55+
<SettingsLayout>
56+
<h3>Usage Statistics</h3>
57+
<p className="text-base text-gray-500 pb-4 max-w-2xl">
58+
We collect usage telemetry to gain insights on how you use your Gitpod instance, so we can provide a
59+
better overall experience.
60+
</p>
61+
<p>
62+
<a className="gp-link" href="https://www.gitpod.io/privacy">
63+
Read our Privacy Policy
64+
</a>
65+
</p>
66+
<CheckBox
67+
title="Enable usage telemetry"
68+
desc={
69+
<span>
70+
Enable usage telemetry on your Gitpod instance. A preview of your telemetry is available
71+
below.
72+
</span>
73+
}
74+
checked={adminSettings?.sendTelemetry ?? false}
75+
onChange={(evt) =>
76+
actuallySetTelemetryPrefs({
77+
...adminSettings,
78+
sendTelemetry: evt.target.checked,
79+
} as InstallationAdminSettings)
80+
}
81+
/>
82+
<CheckBox
83+
title="Include customer ID in telemetry"
84+
desc={
85+
<span>
86+
Include an optional customer ID in usage telemetry to provide individualized support.
87+
</span>
88+
}
89+
checked={adminSettings?.sendCustomerID ?? false}
90+
onChange={(evt) =>
91+
actuallySetTelemetryPrefs({
92+
...adminSettings,
93+
sendCustomerID: evt.target.checked,
94+
} as InstallationAdminSettings)
95+
}
96+
/>
97+
<h3 className="mt-4">Telemetry preview</h3>
98+
<InfoBox>
99+
<pre>{JSON.stringify(telemetryData, null, 2)}</pre>
100+
</InfoBox>
101+
</SettingsLayout>
90102
</div>
91103
);
92104
}

‎components/dashboard/src/admin/admin.routes.ts

Lines changed: 14 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -28,13 +28,23 @@ export function getAdminTabs(): TabEntry[] {
2828
title: "Blocked Repositories",
2929
link: "/admin/blocked-repositories",
3030
},
31-
{
32-
title: "License",
33-
link: "/admin/license",
34-
},
3531
{
3632
title: "Settings",
3733
link: "/admin/settings",
34+
alternatives: getAdminSettingsMenu().flatMap((e) => e.link),
35+
},
36+
];
37+
}
38+
39+
export function getAdminSettingsMenu() {
40+
return [
41+
{
42+
title: "General",
43+
link: ["/admin/settings"],
44+
},
45+
{
46+
title: "License",
47+
link: ["/admin/license"],
3848
},
3949
];
4050
}

0 commit comments

Comments
 (0)