diff --git a/components/dashboard/src/admin/AdminPageHeader.tsx b/components/dashboard/src/admin/AdminPageHeader.tsx new file mode 100644 index 00000000000000..55f92fbfc7467a --- /dev/null +++ b/components/dashboard/src/admin/AdminPageHeader.tsx @@ -0,0 +1,23 @@ +/** + * Copyright (c) 2022 Gitpod GmbH. All rights reserved. + * Licensed under the GNU Affero General Public License (AGPL). + * See License.AGPL.txt in the project root for license information. + */ + +import Header from "../components/Header"; +import { getAdminTabs } from "./admin.routes"; + +export interface AdminPageHeaderProps { + title: string; + subtitle: string; + children: React.ReactNode; +} + +export function AdminPageHeader({ title, subtitle, children }: AdminPageHeaderProps) { + return ( + <> +
+ {children} + + ); +} diff --git a/components/dashboard/src/admin/BlockedRepositories.tsx b/components/dashboard/src/admin/BlockedRepositories.tsx index 506e5ca2bf1635..04f4425f9b6629 100644 --- a/components/dashboard/src/admin/BlockedRepositories.tsx +++ b/components/dashboard/src/admin/BlockedRepositories.tsx @@ -7,7 +7,7 @@ import { AdminGetListResult } from "@gitpod/gitpod-protocol"; import { useEffect, useRef, useState } from "react"; import { getGitpodService } from "../service/service"; -import { PageWithAdminSubMenu } from "./PageWithAdminSubMenu"; +import { AdminPageHeader } from "./AdminPageHeader"; import { BlockedRepository } from "@gitpod/gitpod-protocol/lib/blocked-repositories-protocol"; import ConfirmationModal from "../components/ConfirmationModal"; import Modal from "../components/Modal"; @@ -18,9 +18,9 @@ import Alert from "../components/Alert"; export function BlockedRepositories() { return ( - + - + ); } @@ -99,78 +99,80 @@ export function BlockedRepositoriesList(props: Props) { return ( <> - {isAddModalVisible && ( - setAddModalVisible(false)} - /> - )} - {isDeleteModalVisible && ( - deleteBlockedRepository(currentBlockedRepository)} - onClose={() => setDeleteModalVisible(false)} - /> - )} -
-
-
-
- {searching ? ( - - - + {isAddModalVisible && ( + setAddModalVisible(false)} + /> + )} + {isDeleteModalVisible && ( + deleteBlockedRepository(currentBlockedRepository)} + onClose={() => setDeleteModalVisible(false)} + /> + )} +
+
+
+
+ {searching ? ( + + + + + + ) : ( + + - - - ) : ( - - - - )} + + )} +
+ ke.key === "Enter" && search()} + onChange={(v) => { + setQueryTerm(v.target.value.trim()); + }} + /> +
+
+
- ke.key === "Enter" && search()} - onChange={(v) => { - setQueryTerm(v.target.value.trim()); - }} - /> -
-
-
-
- - Search entries by their repository URL RegEx. - -
-
-
Repository URL (RegEx)
-
Block Users
-
+ + Search entries by their repository URL RegEx. + +
+
+
Repository URL (RegEx)
+
Block Users
+
+
+ {searchResult.rows.map((br) => ( + + ))}
- {searchResult.rows.map((br) => ( - - ))}
); diff --git a/components/dashboard/src/admin/License.tsx b/components/dashboard/src/admin/License.tsx index 2313f9eeb63bc2..92c7a3199af9e4 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 { PageWithAdminSubMenu } from "./PageWithAdminSubMenu"; +import { AdminPageHeader } from "./AdminPageHeader"; export default function License() { const { license, setLicense } = useContext(LicenseContext); @@ -42,50 +42,54 @@ export default function License() { return (
- -
- - - {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 -
- + +
+
+ + + {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 +
+ +
+ + + +
- +
); } diff --git a/components/dashboard/src/admin/PageWithAdminSubMenu.tsx b/components/dashboard/src/admin/PageWithAdminSubMenu.tsx deleted file mode 100644 index fd806ca474b167..00000000000000 --- a/components/dashboard/src/admin/PageWithAdminSubMenu.tsx +++ /dev/null @@ -1,22 +0,0 @@ -/** - * Copyright (c) 2022 Gitpod GmbH. All rights reserved. - * Licensed under the GNU Affero General Public License (AGPL). - * See License.AGPL.txt in the project root for license information. - */ - -import { PageWithSubMenu } from "../components/PageWithSubMenu"; -import { getAdminMenu } from "./admin-menu"; - -export interface PageWithAdminSubMenuProps { - title: string; - subtitle: string; - children: React.ReactNode; -} - -export function PageWithAdminSubMenu({ title, subtitle, children }: PageWithAdminSubMenuProps) { - return ( - - {children} - - ); -} diff --git a/components/dashboard/src/admin/ProjectsSearch.tsx b/components/dashboard/src/admin/ProjectsSearch.tsx index 3c2f5ccd47475c..93fd13819eb9d0 100644 --- a/components/dashboard/src/admin/ProjectsSearch.tsx +++ b/components/dashboard/src/admin/ProjectsSearch.tsx @@ -12,14 +12,14 @@ import { useState, useEffect } from "react"; import ProjectDetail from "./ProjectDetail"; import { getGitpodService } from "../service/service"; import { AdminGetListResult, Project } from "@gitpod/gitpod-protocol"; -import { PageWithAdminSubMenu } from "./PageWithAdminSubMenu"; +import { AdminPageHeader } from "./AdminPageHeader"; import Pagination from "../Pagination/Pagination"; export default function ProjectsSearchPage() { return ( - + - + ); } @@ -92,65 +92,67 @@ export function ProjectsSearch() { return ( <> -
-
-
-
- {searching ? ( - - - +
+
+
+
+ {searching ? ( + + + + + + ) : ( + + - - - ) : ( - - - - )} + + )} +
+ k.key === "Enter" && search()} + onChange={(v) => { + setSearchTerm(v.target.value.trim()); + }} + />
- k.key === "Enter" && search()} - onChange={(v) => { - setSearchTerm(v.target.value.trim()); - }} - /> +
-
-
-
-
-
Name
-
Clone URL
-
Created
+
+
+
Name
+
Clone URL
+
Created
+
+ {searchResult.rows.map((project) => ( + + ))}
- {searchResult.rows.map((project) => ( - - ))} +
- ); diff --git a/components/dashboard/src/admin/Settings.tsx b/components/dashboard/src/admin/Settings.tsx index a54bf6d6884a0e..d9320c45631974 100644 --- a/components/dashboard/src/admin/Settings.tsx +++ b/components/dashboard/src/admin/Settings.tsx @@ -12,7 +12,7 @@ import { getGitpodService } from "../service/service"; import { useEffect, useState } from "react"; import InfoBox from "../components/InfoBox"; import { isGitpodIo } from "../utils"; -import { PageWithAdminSubMenu } from "./PageWithAdminSubMenu"; +import { AdminPageHeader } from "./AdminPageHeader"; export default function Settings() { const { adminSettings, setAdminSettings } = useContext(AdminContext); @@ -38,53 +38,55 @@ 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/TeamsSearch.tsx b/components/dashboard/src/admin/TeamsSearch.tsx index 996ae74b69031c..813c6df39fa872 100644 --- a/components/dashboard/src/admin/TeamsSearch.tsx +++ b/components/dashboard/src/admin/TeamsSearch.tsx @@ -13,14 +13,16 @@ import { Link } from "react-router-dom"; import { getGitpodService } from "../service/service"; import { AdminGetListResult, Team } from "@gitpod/gitpod-protocol"; import Label from "./Label"; -import { PageWithAdminSubMenu } from "./PageWithAdminSubMenu"; +import { AdminPageHeader } from "./AdminPageHeader"; import Pagination from "../Pagination/Pagination"; export default function TeamsSearchPage() { return ( - - - + +
+ +
+ ); } diff --git a/components/dashboard/src/admin/UserDetail.tsx b/components/dashboard/src/admin/UserDetail.tsx index 81976da05a40fa..2c7912d788ccae 100644 --- a/components/dashboard/src/admin/UserDetail.tsx +++ b/components/dashboard/src/admin/UserDetail.tsx @@ -21,7 +21,7 @@ import Modal from "../components/Modal"; import { getGitpodService } from "../service/service"; import { WorkspaceSearch } from "./WorkspacesSearch"; import Property from "./Property"; -import { PageWithAdminSubMenu } from "./PageWithAdminSubMenu"; +import { AdminPageHeader } from "./AdminPageHeader"; import { BillingMode } from "@gitpod/gitpod-protocol/lib/billing-mode"; import { AttributionId } from "@gitpod/gitpod-protocol/lib/attribution"; import CaretDown from "../icons/CaretDown.svg"; @@ -258,75 +258,79 @@ export default function UserDetail(p: { user: User }) { return ( <> - -
-
-
-

{user.fullName}

- {user.blocked ?