From 95f91eb59f6b42073d6eba957fe6042fbb700ded Mon Sep 17 00:00:00 2001 From: "Laurie T. Malau" Date: Mon, 14 Nov 2022 12:26:47 +0000 Subject: [PATCH] [dashboard] Personal Access Token empty page --- components/dashboard/src/App.tsx | 3 ++ components/dashboard/src/Menu.tsx | 1 + .../src/contexts/FeatureFlagContext.tsx | 5 ++++ .../src/settings/PageWithSettingsSubMenu.tsx | 8 ++++- .../src/settings/PersonalAccessTokens.tsx | 30 +++++++++++++++++++ .../dashboard/src/settings/settings-menu.ts | 14 ++++++++- .../dashboard/src/settings/settings.routes.ts | 1 + 7 files changed, 60 insertions(+), 2 deletions(-) create mode 100644 components/dashboard/src/settings/PersonalAccessTokens.tsx diff --git a/components/dashboard/src/App.tsx b/components/dashboard/src/App.tsx index 644c31b7ef1390..11514d39e43026 100644 --- a/components/dashboard/src/App.tsx +++ b/components/dashboard/src/App.tsx @@ -36,6 +36,7 @@ import { settingsPathVariables, settingsPathSSHKeys, usagePathMain, + settingsPathPersonalAccessTokens, } from "./settings/settings.routes"; import { projectsPathInstallGitHubApp, @@ -54,6 +55,7 @@ import { BlockedRepositories } from "./admin/BlockedRepositories"; import { AppNotifications } from "./AppNotifications"; import { publicApiTeamsToProtocol, teamsService } from "./service/public-api"; import { FeatureFlagContext } from "./contexts/FeatureFlagContext"; +import PersonalAccessTokens from "./settings/PersonalAccessTokens"; const Setup = React.lazy(() => import(/* webpackPrefetch: true */ "./Setup")); const Workspaces = React.lazy(() => import(/* webpackPrefetch: true */ "./workspaces/Workspaces")); @@ -395,6 +397,7 @@ function App() { + diff --git a/components/dashboard/src/Menu.tsx b/components/dashboard/src/Menu.tsx index 83aea2e1ec9cd9..e9caf1785390c4 100644 --- a/components/dashboard/src/Menu.tsx +++ b/components/dashboard/src/Menu.tsx @@ -113,6 +113,7 @@ export default function Menu() { "keys", "integrations", "preferences", + "personal-tokens", ]); const isAdminUI = inResource(window.location.pathname, ["admin"]); diff --git a/components/dashboard/src/contexts/FeatureFlagContext.tsx b/components/dashboard/src/contexts/FeatureFlagContext.tsx index 5a3803670bcece..76aa2f5ee7db03 100644 --- a/components/dashboard/src/contexts/FeatureFlagContext.tsx +++ b/components/dashboard/src/contexts/FeatureFlagContext.tsx @@ -20,11 +20,13 @@ const FeatureFlagContext = createContext<{ showUsageView: boolean; showUseLastSuccessfulPrebuild: boolean; usePublicApiTeamsService: boolean; + enablePersonalAccessTokens: boolean; }>({ showPersistentVolumeClaimUI: false, showUsageView: false, showUseLastSuccessfulPrebuild: false, usePublicApiTeamsService: false, + enablePersonalAccessTokens: false, }); const FeatureFlagContextProvider: React.FC = ({ children }) => { @@ -37,6 +39,7 @@ const FeatureFlagContextProvider: React.FC = ({ children }) => { const [showUsageView, setShowUsageView] = useState(false); const [showUseLastSuccessfulPrebuild, setShowUseLastSuccessfulPrebuild] = useState(false); const [usePublicApiTeamsService, setUsePublicApiTeamsService] = useState(false); + const [enablePersonalAccessTokens, setPersonalAccessTokensEnabled] = useState(false); useEffect(() => { if (!user) return; @@ -46,6 +49,7 @@ const FeatureFlagContextProvider: React.FC = ({ children }) => { usage_view: { defaultValue: false, setter: setShowUsageView }, showUseLastSuccessfulPrebuild: { defaultValue: false, setter: setShowUseLastSuccessfulPrebuild }, publicApiExperimentalTeamsService: { defaultValue: false, setter: setUsePublicApiTeamsService }, + personalAccessTokensEnabled: { defaultValue: false, setter: setPersonalAccessTokensEnabled }, }; for (const [flagName, config] of Object.entries(featureFlags)) { if (teams) { @@ -83,6 +87,7 @@ const FeatureFlagContextProvider: React.FC = ({ children }) => { showUsageView, showUseLastSuccessfulPrebuild, usePublicApiTeamsService, + enablePersonalAccessTokens, }} > {children} diff --git a/components/dashboard/src/settings/PageWithSettingsSubMenu.tsx b/components/dashboard/src/settings/PageWithSettingsSubMenu.tsx index 937256244c62c2..48a9208214ddeb 100644 --- a/components/dashboard/src/settings/PageWithSettingsSubMenu.tsx +++ b/components/dashboard/src/settings/PageWithSettingsSubMenu.tsx @@ -6,6 +6,7 @@ import { useContext } from "react"; import { PageWithSubMenu } from "../components/PageWithSubMenu"; +import { FeatureFlagContext } from "../contexts/FeatureFlagContext"; import { UserContext } from "../user-context"; import getSettingsMenu from "./settings-menu"; @@ -17,9 +18,14 @@ export interface PageWithAdminSubMenuProps { export function PageWithSettingsSubMenu({ title, subtitle, children }: PageWithAdminSubMenuProps) { const { userBillingMode } = useContext(UserContext); + const { enablePersonalAccessTokens } = useContext(FeatureFlagContext); return ( - + {children} ); diff --git a/components/dashboard/src/settings/PersonalAccessTokens.tsx b/components/dashboard/src/settings/PersonalAccessTokens.tsx new file mode 100644 index 00000000000000..66df1fc3aa3b87 --- /dev/null +++ b/components/dashboard/src/settings/PersonalAccessTokens.tsx @@ -0,0 +1,30 @@ +/** + * 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 { useContext } from "react"; +import { Redirect } from "react-router"; +import { FeatureFlagContext } from "../contexts/FeatureFlagContext"; +import { PageWithSettingsSubMenu } from "./PageWithSettingsSubMenu"; + +function PersonalAccessTokens() { + const { enablePersonalAccessTokens } = useContext(FeatureFlagContext); + + if (!enablePersonalAccessTokens) { + return ; + } + + return ( +
+ +
+ ); +} + +export default PersonalAccessTokens; diff --git a/components/dashboard/src/settings/settings-menu.ts b/components/dashboard/src/settings/settings-menu.ts index f48247af2894fc..572f15c7fefe2c 100644 --- a/components/dashboard/src/settings/settings-menu.ts +++ b/components/dashboard/src/settings/settings-menu.ts @@ -16,9 +16,13 @@ import { settingsPathTeams, settingsPathVariables, settingsPathSSHKeys, + settingsPathPersonalAccessTokens, } from "./settings.routes"; -export default function getSettingsMenu(params: { userBillingMode?: BillingMode }) { +export default function getSettingsMenu(params: { + userBillingMode?: BillingMode; + enablePersonalAccessTokens?: boolean; +}) { return [ { title: "Account", @@ -29,6 +33,14 @@ export default function getSettingsMenu(params: { userBillingMode?: BillingMode link: [settingsPathNotifications], }, ...renderBillingMenuEntries(params.userBillingMode), + ...(params.enablePersonalAccessTokens + ? [ + { + title: "Personal Access Tokens", + link: [settingsPathPersonalAccessTokens], + }, + ] + : []), { title: "Variables", link: [settingsPathVariables], diff --git a/components/dashboard/src/settings/settings.routes.ts b/components/dashboard/src/settings/settings.routes.ts index 7209364ca323db..d4520a8e50d557 100644 --- a/components/dashboard/src/settings/settings.routes.ts +++ b/components/dashboard/src/settings/settings.routes.ts @@ -19,5 +19,6 @@ export const settingsPathTeamsJoin = [settingsPathTeams, "join"].join("/"); export const settingsPathTeamsNew = [settingsPathTeams, "new"].join("/"); export const settingsPathVariables = "/variables"; +export const settingsPathPersonalAccessTokens = "/personal-tokens"; export const settingsPathSSHKeys = "/keys";