[dashboard] Personal Access Token empty page

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() {
                     <Route path={settingsPathNotifications} exact component={Notifications} />
                     <Route path={settingsPathBilling} exact component={Billing} />
                     <Route path={settingsPathPlans} exact component={Plans} />
+                    <Route path={settingsPathPersonalAccessTokens} exact component={PersonalAccessTokens} />
                     <Route path={settingsPathVariables} exact component={EnvironmentVariables} />
                     <Route path={settingsPathSSHKeys} exact component={SSHKeys} />
                     <Route path={settingsPathPreferences} exact component={Preferences} />

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"]);
 

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<boolean>(false);
     const [showUseLastSuccessfulPrebuild, setShowUseLastSuccessfulPrebuild] = useState<boolean>(false);
     const [usePublicApiTeamsService, setUsePublicApiTeamsService] = useState<boolean>(false);
+    const [enablePersonalAccessTokens, setPersonalAccessTokensEnabled] = useState<boolean>(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}

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 (
-        <PageWithSubMenu subMenu={getSettingsMenu({ userBillingMode })} title={title} subtitle={subtitle}>
+        <PageWithSubMenu
+            subMenu={getSettingsMenu({ userBillingMode, enablePersonalAccessTokens })}
+            title={title}
+            subtitle={subtitle}
+        >
             {children}
         </PageWithSubMenu>
     );

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 <Redirect to="/" />;
+    }
+
+    return (
+        <div>
+            <PageWithSettingsSubMenu
+                title="Preferences"
+                subtitle="Manage your Personal Access Tokens to access the Gitpod API."
+                children={undefined}
+            ></PageWithSettingsSubMenu>
+        </div>
+    );
+}
+
+export default PersonalAccessTokens;

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],

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";