From 5507be9bd20251ab190f2aaed7da988b6a1a8376 Mon Sep 17 00:00:00 2001
From: "Laurie T. Malau" <laurie@gitpod.io>
Date: Mon, 5 Dec 2022 12:32:43 +0000
Subject: [PATCH] [pat] Extract into separate components

---
 components/dashboard/src/App.tsx              |   2 +-
 .../dashboard/src/components/DateSelector.tsx |  33 ++
 .../src/settings/PersonalAccessTokens.tsx     | 425 +-----------------
 .../PersonalAccessTokensCreateView.tsx        | 276 ++++++++++++
 .../dashboard/src/settings/ShowTokenModal.tsx |  82 ++++
 .../dashboard/src/settings/TokenEntry.tsx     |  58 +++
 6 files changed, 464 insertions(+), 412 deletions(-)
 create mode 100644 components/dashboard/src/components/DateSelector.tsx
 create mode 100644 components/dashboard/src/settings/PersonalAccessTokensCreateView.tsx
 create mode 100644 components/dashboard/src/settings/ShowTokenModal.tsx
 create mode 100644 components/dashboard/src/settings/TokenEntry.tsx

diff --git a/components/dashboard/src/App.tsx b/components/dashboard/src/App.tsx
index 4a8d0835bc8a0d..c4fce562bcd709 100644
--- a/components/dashboard/src/App.tsx
+++ b/components/dashboard/src/App.tsx
@@ -57,7 +57,7 @@ import { BlockedRepositories } from "./admin/BlockedRepositories";
 import { AppNotifications } from "./AppNotifications";
 import { publicApiTeamsToProtocol, teamsService } from "./service/public-api";
 import { FeatureFlagContext } from "./contexts/FeatureFlagContext";
-import { PersonalAccessTokenCreateView } from "./settings/PersonalAccessTokens";
+import PersonalAccessTokenCreateView from "./settings/PersonalAccessTokensCreateView";
 
 const Setup = React.lazy(() => import(/* webpackPrefetch: true */ "./Setup"));
 const Workspaces = React.lazy(() => import(/* webpackPrefetch: true */ "./workspaces/Workspaces"));
diff --git a/components/dashboard/src/components/DateSelector.tsx b/components/dashboard/src/components/DateSelector.tsx
new file mode 100644
index 00000000000000..72cbb62922915f
--- /dev/null
+++ b/components/dashboard/src/components/DateSelector.tsx
@@ -0,0 +1,33 @@
+/**
+ * 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.
+ */
+
+interface DateSelectorProps {
+    title: string;
+    description: string;
+    options: { value: string; label: string }[];
+    value?: string;
+    onChange: (value: string) => void;
+}
+
+function DateSelector(props: DateSelectorProps) {
+    return (
+        <div>
+            <label htmlFor={props.title} className="font-semibold">
+                {props.title}
+            </label>
+            <select name={props.title} value={props.value} onChange={(e) => props.onChange(e.target.value)}>
+                {props.options.map((o) => (
+                    <option key={o.value} value={o.value}>
+                        {o.label}
+                    </option>
+                ))}
+            </select>
+            <p className="text-gray-500 dark:text-gray-400 mt-2">{props.description}</p>
+        </div>
+    );
+}
+
+export default DateSelector;
diff --git a/components/dashboard/src/settings/PersonalAccessTokens.tsx b/components/dashboard/src/settings/PersonalAccessTokens.tsx
index c02f94e47211a6..2d7df5167c4af9 100644
--- a/components/dashboard/src/settings/PersonalAccessTokens.tsx
+++ b/components/dashboard/src/settings/PersonalAccessTokens.tsx
@@ -6,29 +6,21 @@
 
 import { PersonalAccessToken } from "@gitpod/public-api/lib/gitpod/experimental/v1/tokens_pb";
 import { useContext, useEffect, useState } from "react";
-import { Redirect, useHistory, useLocation, useParams } from "react-router";
+import { Redirect, useLocation } from "react-router";
 import { Link } from "react-router-dom";
-import CheckBox from "../components/CheckBox";
-import Modal from "../components/Modal";
 import { FeatureFlagContext } from "../contexts/FeatureFlagContext";
 import { personalAccessTokensService } from "../service/public-api";
 import { PageWithSettingsSubMenu } from "./PageWithSettingsSubMenu";
-import {
-    settingsPathPersonalAccessTokenCreate,
-    settingsPathPersonalAccessTokens,
-    settingsPathPersonalAccessTokenEdit,
-} from "./settings.routes";
-import arrowDown from "../images/sort-arrow.svg";
-import { ReactComponent as ExclamationIcon } from "../images/exclamation.svg";
+import { settingsPathPersonalAccessTokenCreate, settingsPathPersonalAccessTokenEdit } from "./settings.routes";
 import { Timestamp } from "@bufbuild/protobuf";
 import Alert from "../components/Alert";
 import { InputWithCopy } from "../components/InputWithCopy";
 import { copyToClipboard } from "../utils";
-import { ContextMenuEntry } from "../components/ContextMenu";
 import PillLabel from "../components/PillLabel";
 import dayjs from "dayjs";
-import { ItemFieldContextMenu } from "../components/ItemsList";
-import { SpinnerLoader, SpinnerOverlayLoader } from "../components/Loader";
+import { SpinnerLoader } from "../components/Loader";
+import TokenEntry from "./TokenEntry";
+import ShowTokenModal from "./ShowTokenModal";
 
 export default function PersonalAccessTokens() {
     const { enablePersonalAccessTokens } = useContext(FeatureFlagContext);
@@ -46,28 +38,20 @@ export default function PersonalAccessTokens() {
     );
 }
 
-const personalAccessTokenNameRegex = /^[a-zA-Z0-9-_ ]{3,63}$/;
-
-enum TokenAction {
+export enum TokenAction {
     Create = "CREATED",
     Regenerate = "REGENERATED",
     Delete = "DELETE",
 }
 
-const TokenExpirationDays = [
+export const TokenExpirationDays = [
     { value: "7", label: "7 Days" },
     { value: "30", label: "30 Days" },
     { value: "60", label: "60 Days" },
     { value: "180", label: "180 Days" },
 ];
 
-interface PermissionDetail {
-    name: string;
-    description: string;
-    scopes: string[];
-}
-
-const AllPermissions: PermissionDetail[] = [
+export const AllPermissions: PermissionDetail[] = [
     {
         name: "Full Access",
         description: "Grant complete read and write access to the API.",
@@ -76,396 +60,15 @@ const AllPermissions: PermissionDetail[] = [
     },
 ];
 
-interface DateSelectorProps {
-    title: string;
-    description: string;
-    options: { value: string; label: string }[];
-    value?: string;
-    onChange: (value: string) => void;
-}
-
-function DateSelector(props: DateSelectorProps) {
-    return (
-        <div>
-            <label htmlFor={props.title} className="font-semibold">
-                {props.title}
-            </label>
-            <select name={props.title} value={props.value} onChange={(e) => props.onChange(e.target.value)}>
-                {props.options.map((o) => (
-                    <option key={o.value} value={o.value}>
-                        {o.label}
-                    </option>
-                ))}
-            </select>
-            <p className="text-gray-500 dark:text-gray-400 mt-2">{props.description}</p>
-        </div>
-    );
-}
-
-interface TokenModalProps {
-    token: PersonalAccessToken;
-    title: string;
-    description: string;
-    descriptionImportant: string;
-    actionDescription: string;
-    showDateSelector?: boolean;
-    onSave: (data: { expirationDate: Date }) => void;
-    onClose: () => void;
-}
-
-function ShowTokenModal(props: TokenModalProps) {
-    const [expiration, setExpiration] = useState({
-        expirationDays: "30",
-        expirationDate: new Date(Date.now() + 30 * 24 * 60 * 60 * 1000),
-    });
-
-    const onEnter = () => {
-        props.onSave({ expirationDate: expiration.expirationDate });
-        return true;
-    };
-
-    return (
-        <Modal
-            title={props.title}
-            buttons={[
-                <button className="secondary" onClick={() => props.onClose()}>
-                    Cancel
-                </button>,
-                <button className="danger" onClick={onEnter}>
-                    {props.actionDescription}
-                </button>,
-            ]}
-            visible={true}
-            onClose={() => props.onClose()}
-            onEnter={onEnter}
-        >
-            <div className="text-gray-500 dark:text-gray-400 text-md">
-                <span>{props.description}</span> <span className="font-semibold">{props.descriptionImportant}</span>
-            </div>
-            <div className="p-4 mt-2 rounded-xl bg-gray-50 dark:bg-gray-800">
-                <div className="font-semibold text-gray-700 dark:text-gray-200">{props.token.name}</div>
-                <div className="font-medium text-gray-400 dark:text-gray-300">
-                    Expires on {dayjs(props.token.expirationTime!.toDate()).format("MMM D, YYYY")}
-                </div>
-            </div>
-            <div className="mt-4">
-                {props.showDateSelector && (
-                    <DateSelector
-                        title="Expiration Date"
-                        description={`The token will expire on ${dayjs(expiration.expirationDate).format(
-                            "MMM D, YYYY",
-                        )}`}
-                        options={TokenExpirationDays}
-                        value={TokenExpirationDays.find((i) => i.value === expiration.expirationDays)?.value}
-                        onChange={(value) =>
-                            setExpiration({
-                                expirationDays: value,
-                                expirationDate: new Date(Date.now() + Number(value) * 24 * 60 * 60 * 1000),
-                            })
-                        }
-                    />
-                )}
-            </div>
-        </Modal>
-    );
+export interface TokenInfo {
+    method: TokenAction;
+    data: PersonalAccessToken;
 }
 
-interface EditPATData {
+interface PermissionDetail {
     name: string;
-    expirationDays: string;
-    expirationDate: Date;
-    scopes: Set<string>;
-}
-
-export function PersonalAccessTokenCreateView() {
-    const { enablePersonalAccessTokens } = useContext(FeatureFlagContext);
-
-    const params = useParams<{ tokenId?: string }>();
-    const history = useHistory<TokenInfo>();
-
-    const [loading, setLoading] = useState(false);
-    const [errorMsg, setErrorMsg] = useState("");
-    const [editToken, setEditToken] = useState<PersonalAccessToken>();
-    const [token, setToken] = useState<EditPATData>({
-        name: "",
-        expirationDays: "30",
-        expirationDate: new Date(Date.now() + 30 * 24 * 60 * 60 * 1000),
-        scopes: new Set<string>(),
-    });
-    const [modalData, setModalData] = useState<{ token: PersonalAccessToken }>();
-
-    const isEditing = !!params.tokenId;
-
-    function backToListView(tokenInfo?: TokenInfo) {
-        history.push({
-            pathname: settingsPathPersonalAccessTokens,
-            state: tokenInfo,
-        });
-    }
-
-    useEffect(() => {
-        (async () => {
-            try {
-                const { tokenId } = params;
-                if (!tokenId) {
-                    return;
-                }
-
-                setLoading(true);
-                const resp = await personalAccessTokensService.getPersonalAccessToken({ id: tokenId });
-                const token = resp.token!;
-                setEditToken(token);
-                update({
-                    name: token.name,
-                    scopes: new Set(token.scopes),
-                });
-            } catch (e) {
-                setErrorMsg(e.message);
-            }
-            setLoading(false);
-        })();
-    }, []);
-
-    const update = (change: Partial<EditPATData>, addScopes?: string[], removeScopes?: string[]) => {
-        if (change.expirationDays) {
-            change.expirationDate = new Date(Date.now() + Number(change.expirationDays) * 24 * 60 * 60 * 1000);
-        }
-        const data = { ...token, ...change };
-        if (addScopes) {
-            addScopes.forEach((s) => data.scopes.add(s));
-        }
-        if (removeScopes) {
-            removeScopes.forEach((s) => data.scopes.delete(s));
-        }
-        setErrorMsg("");
-        setToken(data);
-    };
-
-    const handleRegenerate = async (tokenId: string, expirationDate: Date) => {
-        try {
-            const resp = await personalAccessTokensService.regeneratePersonalAccessToken({
-                id: tokenId,
-                expirationTime: Timestamp.fromDate(expirationDate),
-            });
-            backToListView({ method: TokenAction.Regenerate, data: resp.token! });
-        } catch (e) {
-            setErrorMsg(e.message);
-        }
-    };
-
-    const handleConfirm = async () => {
-        if (/^\s+/.test(token.name) || /\s+$/.test(token.name)) {
-            setErrorMsg("Token name should not start or end with a space");
-            return;
-        }
-        if (!personalAccessTokenNameRegex.test(token.name)) {
-            setErrorMsg(
-                "Token name should have a length between 3 and 63 characters, it can only contain letters, numbers, underscore and space characters",
-            );
-            return;
-        }
-        try {
-            const resp = editToken
-                ? await personalAccessTokensService.updatePersonalAccessToken({
-                      token: {
-                          id: editToken.id,
-                          name: token.name,
-                          scopes: Array.from(token.scopes),
-                      },
-                      updateMask: { paths: ["name", "scopes"] },
-                  })
-                : await personalAccessTokensService.createPersonalAccessToken({
-                      token: {
-                          name: token.name,
-                          expirationTime: Timestamp.fromDate(token.expirationDate),
-                          scopes: Array.from(token.scopes),
-                      },
-                  });
-
-            backToListView(isEditing ? undefined : { method: TokenAction.Create, data: resp.token! });
-        } catch (e) {
-            setErrorMsg(e.message);
-        }
-    };
-
-    if (!enablePersonalAccessTokens) {
-        return <Redirect to="/" />;
-    }
-
-    return (
-        <div>
-            <PageWithSettingsSubMenu title="Access Tokens" subtitle="Manage your access tokens.">
-                <div className="mb-4 flex gap-2">
-                    <Link to={settingsPathPersonalAccessTokens}>
-                        <button className="secondary">
-                            <div className="flex place-content-center">
-                                <img src={arrowDown} className="w-4 mr-2 transform rotate-90 mb-0" alt="Back arrow" />
-                                <span>Back to list</span>
-                            </div>
-                        </button>
-                    </Link>
-                    {editToken && (
-                        <button
-                            className="danger bg-red-50 dark:bg-red-600 text-red-600 dark:text-red-50"
-                            onClick={() => setModalData({ token: editToken })}
-                        >
-                            Regenerate
-                        </button>
-                    )}
-                </div>
-                <>
-                    {errorMsg.length > 0 && (
-                        <Alert type="error" className="mb-2 max-w-md">
-                            {errorMsg}
-                        </Alert>
-                    )}
-                </>
-                <>
-                    {modalData && (
-                        <ShowTokenModal
-                            token={modalData.token}
-                            title="Regenerate Token"
-                            description="Are you sure you want to regenerate this access token?"
-                            descriptionImportant="Any applications using this token will no longer be able to access the Gitpod API."
-                            actionDescription="Regenerate Token"
-                            showDateSelector
-                            onSave={({ expirationDate }) => handleRegenerate(modalData.token.id, expirationDate)}
-                            onClose={() => setModalData(undefined)}
-                        />
-                    )}
-                </>
-                <SpinnerOverlayLoader content="loading access token" loading={loading}>
-                    <div className="mb-6">
-                        <div className="flex flex-col mb-4">
-                            <h3>{isEditing ? "Edit" : "New"} Access Token</h3>
-                            {isEditing ? (
-                                <h2 className="text-gray-500 dark:text-gray-400">
-                                    Update token name, expiration date, permissions, or regenerate token.
-                                </h2>
-                            ) : (
-                                <h2 className="text-gray-500 dark:text-gray-400">Create a new access token.</h2>
-                            )}
-                        </div>
-                        <div className="flex flex-col gap-4">
-                            <div>
-                                <h4>Token Name</h4>
-                                <input
-                                    className="max-w-md"
-                                    value={token.name}
-                                    onChange={(e) => update({ name: e.target.value })}
-                                    onKeyDown={(e) => {
-                                        if (e.key === "Enter") {
-                                            e.preventDefault();
-                                            handleConfirm();
-                                        }
-                                    }}
-                                    type="text"
-                                    placeholder="Token Name"
-                                />
-                                <p className="text-gray-500 dark:text-gray-400 mt-2">
-                                    The application name using the token or the purpose of the token.
-                                </p>
-                            </div>
-                            {!isEditing && (
-                                <DateSelector
-                                    title="Expiration Date"
-                                    description={`The token will expire on ${dayjs(token.expirationDate).format(
-                                        "MMM D, YYYY",
-                                    )}`}
-                                    options={TokenExpirationDays}
-                                    value={TokenExpirationDays.find((i) => i.value === token.expirationDays)?.value}
-                                    onChange={(value) => {
-                                        update({ expirationDays: value });
-                                    }}
-                                />
-                            )}
-                            <div>
-                                <h4>Permission</h4>
-                                <div className="space-y-2">
-                                    {AllPermissions.map((item) => (
-                                        <CheckBox
-                                            className=""
-                                            title={item.name}
-                                            desc={item.description}
-                                            checked={item.scopes.every((s) => token.scopes.has(s))}
-                                            onChange={(e) => {
-                                                if (e.target.checked) {
-                                                    update({}, item.scopes);
-                                                } else {
-                                                    update({}, undefined, item.scopes);
-                                                }
-                                            }}
-                                        />
-                                    ))}
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                    <div className="flex gap-2">
-                        {isEditing && (
-                            <Link to={settingsPathPersonalAccessTokens}>
-                                <button className="secondary" onClick={handleConfirm}>
-                                    Cancel
-                                </button>
-                            </Link>
-                        )}
-                        <button onClick={handleConfirm} disabled={isEditing && !editToken}>
-                            {isEditing ? "Update" : "Create"} Access Token
-                        </button>
-                    </div>
-                </SpinnerOverlayLoader>
-            </PageWithSettingsSubMenu>
-        </div>
-    );
-}
-
-interface TokenEntryProps {
-    token: PersonalAccessToken;
-    menuEntries: ContextMenuEntry[];
-}
-
-function TokenEntry(props: TokenEntryProps) {
-    const expirationDay = dayjs(props.token.expirationTime!.toDate());
-    const expired = expirationDay.isBefore(dayjs());
-
-    const getScopes = () => {
-        if (!props.token.scopes) {
-            return "";
-        }
-        const permissions = AllPermissions.filter((e) => e.scopes.every((v) => props.token.scopes.includes(v)));
-        if (permissions.length > 0) {
-            return permissions.map((e) => e.name).join("\n");
-        } else {
-            return "No access";
-        }
-    };
-
-    return (
-        <>
-            <div className="rounded-xl whitespace-nowrap flex space-x-2 py-4 px-4 w-full justify-between hover:bg-gray-100 dark:hover:bg-gray-800 focus:bg-gitpod-kumquat-light group">
-                <div className="flex items-center pr-3 w-4/12">
-                    <span className="truncate">{props.token.name || ""}</span>
-                </div>
-                <div className="flex items-center w-4/12 text-gray-400 font-medium">
-                    <span className="truncate whitespace-pre-line">{getScopes()}</span>
-                </div>
-                <div className="flex items-center w-3/12 text-gray-400">
-                    <span className={"flex items-center gap-1 truncate" + (expired ? " text-orange-600" : "")}>
-                        <span>{expirationDay.format("MMM D, YYYY")}</span>
-                        {expired && <ExclamationIcon fill="#D97706" className="h-4 w-4" />}
-                    </span>
-                </div>
-                <div className="flex items-center justify-end w-1/12">
-                    <ItemFieldContextMenu menuEntries={props.menuEntries} />
-                </div>
-            </div>
-        </>
-    );
-}
-
-interface TokenInfo {
-    method: TokenAction;
-    data: PersonalAccessToken;
+    description: string;
+    scopes: string[];
 }
 
 function ListAccessTokensView() {
diff --git a/components/dashboard/src/settings/PersonalAccessTokensCreateView.tsx b/components/dashboard/src/settings/PersonalAccessTokensCreateView.tsx
new file mode 100644
index 00000000000000..90e5ab3ca07f83
--- /dev/null
+++ b/components/dashboard/src/settings/PersonalAccessTokensCreateView.tsx
@@ -0,0 +1,276 @@
+/**
+ * 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 { PersonalAccessToken } from "@gitpod/public-api/lib/gitpod/experimental/v1/tokens_pb";
+import dayjs from "dayjs";
+import { useContext, useEffect, useState } from "react";
+import { Redirect, useHistory, useParams } from "react-router";
+import { Link } from "react-router-dom";
+import Alert from "../components/Alert";
+import CheckBox from "../components/CheckBox";
+import DateSelector from "../components/DateSelector";
+import { SpinnerOverlayLoader } from "../components/Loader";
+import { FeatureFlagContext } from "../contexts/FeatureFlagContext";
+import { personalAccessTokensService } from "../service/public-api";
+import { PageWithSettingsSubMenu } from "./PageWithSettingsSubMenu";
+import { AllPermissions, TokenAction, TokenExpirationDays, TokenInfo } from "./PersonalAccessTokens";
+import { settingsPathPersonalAccessTokens } from "./settings.routes";
+import ShowTokenModal from "./ShowTokenModal";
+import { Timestamp } from "@bufbuild/protobuf";
+import arrowDown from "../images/sort-arrow.svg";
+
+interface EditPATData {
+    name: string;
+    expirationDays: string;
+    expirationDate: Date;
+    scopes: Set<string>;
+}
+
+const personalAccessTokenNameRegex = /^[a-zA-Z0-9-_ ]{3,63}$/;
+
+function PersonalAccessTokenCreateView() {
+    const { enablePersonalAccessTokens } = useContext(FeatureFlagContext);
+
+    const params = useParams<{ tokenId?: string }>();
+    const history = useHistory<TokenInfo>();
+
+    const [loading, setLoading] = useState(false);
+    const [errorMsg, setErrorMsg] = useState("");
+    const [editToken, setEditToken] = useState<PersonalAccessToken>();
+    const [token, setToken] = useState<EditPATData>({
+        name: "",
+        expirationDays: "30",
+        expirationDate: new Date(Date.now() + 30 * 24 * 60 * 60 * 1000),
+        scopes: new Set<string>(),
+    });
+    const [modalData, setModalData] = useState<{ token: PersonalAccessToken }>();
+
+    const isEditing = !!params.tokenId;
+
+    function backToListView(tokenInfo?: TokenInfo) {
+        history.push({
+            pathname: settingsPathPersonalAccessTokens,
+            state: tokenInfo,
+        });
+    }
+
+    useEffect(() => {
+        (async () => {
+            try {
+                const { tokenId } = params;
+                if (!tokenId) {
+                    return;
+                }
+
+                setLoading(true);
+                const resp = await personalAccessTokensService.getPersonalAccessToken({ id: tokenId });
+                const token = resp.token!;
+                setEditToken(token);
+                update({
+                    name: token.name,
+                    scopes: new Set(token.scopes),
+                });
+            } catch (e) {
+                setErrorMsg(e.message);
+            }
+            setLoading(false);
+        })();
+    }, []);
+
+    const update = (change: Partial<EditPATData>, addScopes?: string[], removeScopes?: string[]) => {
+        if (change.expirationDays) {
+            change.expirationDate = new Date(Date.now() + Number(change.expirationDays) * 24 * 60 * 60 * 1000);
+        }
+        const data = { ...token, ...change };
+        if (addScopes) {
+            addScopes.forEach((s) => data.scopes.add(s));
+        }
+        if (removeScopes) {
+            removeScopes.forEach((s) => data.scopes.delete(s));
+        }
+        setErrorMsg("");
+        setToken(data);
+    };
+
+    const handleRegenerate = async (tokenId: string, expirationDate: Date) => {
+        try {
+            const resp = await personalAccessTokensService.regeneratePersonalAccessToken({
+                id: tokenId,
+                expirationTime: Timestamp.fromDate(expirationDate),
+            });
+            backToListView({ method: TokenAction.Regenerate, data: resp.token! });
+        } catch (e) {
+            setErrorMsg(e.message);
+        }
+    };
+
+    const handleConfirm = async () => {
+        if (/^\s+/.test(token.name) || /\s+$/.test(token.name)) {
+            setErrorMsg("Token name should not start or end with a space");
+            return;
+        }
+        if (!personalAccessTokenNameRegex.test(token.name)) {
+            setErrorMsg(
+                "Token name should have a length between 3 and 63 characters, it can only contain letters, numbers, underscore and space characters",
+            );
+            return;
+        }
+        try {
+            const resp = editToken
+                ? await personalAccessTokensService.updatePersonalAccessToken({
+                      token: {
+                          id: editToken.id,
+                          name: token.name,
+                          scopes: Array.from(token.scopes),
+                      },
+                      updateMask: { paths: ["name", "scopes"] },
+                  })
+                : await personalAccessTokensService.createPersonalAccessToken({
+                      token: {
+                          name: token.name,
+                          expirationTime: Timestamp.fromDate(token.expirationDate),
+                          scopes: Array.from(token.scopes),
+                      },
+                  });
+
+            backToListView(isEditing ? undefined : { method: TokenAction.Create, data: resp.token! });
+        } catch (e) {
+            setErrorMsg(e.message);
+        }
+    };
+
+    if (!enablePersonalAccessTokens) {
+        return <Redirect to="/" />;
+    }
+
+    return (
+        <div>
+            <PageWithSettingsSubMenu title="Access Tokens" subtitle="Manage your access tokens.">
+                <div className="mb-4 flex gap-2">
+                    <Link to={settingsPathPersonalAccessTokens}>
+                        <button className="secondary">
+                            <div className="flex place-content-center">
+                                <img src={arrowDown} className="w-4 mr-2 transform rotate-90 mb-0" alt="Back arrow" />
+                                <span>Back to list</span>
+                            </div>
+                        </button>
+                    </Link>
+                    {editToken && (
+                        <button
+                            className="danger bg-red-50 dark:bg-red-600 text-red-600 dark:text-red-50"
+                            onClick={() => setModalData({ token: editToken })}
+                        >
+                            Regenerate
+                        </button>
+                    )}
+                </div>
+                <>
+                    {errorMsg.length > 0 && (
+                        <Alert type="error" className="mb-2 max-w-md">
+                            {errorMsg}
+                        </Alert>
+                    )}
+                </>
+                <>
+                    {modalData && (
+                        <ShowTokenModal
+                            token={modalData.token}
+                            title="Regenerate Token"
+                            description="Are you sure you want to regenerate this access token?"
+                            descriptionImportant="Any applications using this token will no longer be able to access the Gitpod API."
+                            actionDescription="Regenerate Token"
+                            showDateSelector
+                            onSave={({ expirationDate }) => handleRegenerate(modalData.token.id, expirationDate)}
+                            onClose={() => setModalData(undefined)}
+                        />
+                    )}
+                </>
+                <SpinnerOverlayLoader content="loading access token" loading={loading}>
+                    <div className="mb-6">
+                        <div className="flex flex-col mb-4">
+                            <h3>{isEditing ? "Edit" : "New"} Access Token</h3>
+                            {isEditing ? (
+                                <h2 className="text-gray-500 dark:text-gray-400">
+                                    Update token name, expiration date, permissions, or regenerate token.
+                                </h2>
+                            ) : (
+                                <h2 className="text-gray-500 dark:text-gray-400">Create a new access token.</h2>
+                            )}
+                        </div>
+                        <div className="flex flex-col gap-4">
+                            <div>
+                                <h4>Token Name</h4>
+                                <input
+                                    className="max-w-md"
+                                    value={token.name}
+                                    onChange={(e) => update({ name: e.target.value })}
+                                    onKeyDown={(e) => {
+                                        if (e.key === "Enter") {
+                                            e.preventDefault();
+                                            handleConfirm();
+                                        }
+                                    }}
+                                    type="text"
+                                    placeholder="Token Name"
+                                />
+                                <p className="text-gray-500 dark:text-gray-400 mt-2">
+                                    The application name using the token or the purpose of the token.
+                                </p>
+                            </div>
+                            {!isEditing && (
+                                <DateSelector
+                                    title="Expiration Date"
+                                    description={`The token will expire on ${dayjs(token.expirationDate).format(
+                                        "MMM D, YYYY",
+                                    )}`}
+                                    options={TokenExpirationDays}
+                                    value={TokenExpirationDays.find((i) => i.value === token.expirationDays)?.value}
+                                    onChange={(value) => {
+                                        update({ expirationDays: value });
+                                    }}
+                                />
+                            )}
+                            <div>
+                                <h4>Permission</h4>
+                                <div className="space-y-2">
+                                    {AllPermissions.map((item) => (
+                                        <CheckBox
+                                            className=""
+                                            title={item.name}
+                                            desc={item.description}
+                                            checked={item.scopes.every((s) => token.scopes.has(s))}
+                                            onChange={(e) => {
+                                                if (e.target.checked) {
+                                                    update({}, item.scopes);
+                                                } else {
+                                                    update({}, undefined, item.scopes);
+                                                }
+                                            }}
+                                        />
+                                    ))}
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div className="flex gap-2">
+                        {isEditing && (
+                            <Link to={settingsPathPersonalAccessTokens}>
+                                <button className="secondary" onClick={handleConfirm}>
+                                    Cancel
+                                </button>
+                            </Link>
+                        )}
+                        <button onClick={handleConfirm} disabled={isEditing && !editToken}>
+                            {isEditing ? "Update" : "Create"} Access Token
+                        </button>
+                    </div>
+                </SpinnerOverlayLoader>
+            </PageWithSettingsSubMenu>
+        </div>
+    );
+}
+
+export default PersonalAccessTokenCreateView;
diff --git a/components/dashboard/src/settings/ShowTokenModal.tsx b/components/dashboard/src/settings/ShowTokenModal.tsx
new file mode 100644
index 00000000000000..4d9af437968256
--- /dev/null
+++ b/components/dashboard/src/settings/ShowTokenModal.tsx
@@ -0,0 +1,82 @@
+/**
+ * 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 { PersonalAccessToken } from "@gitpod/public-api/lib/gitpod/experimental/v1/tokens_pb";
+import dayjs from "dayjs";
+import { useState } from "react";
+import DateSelector from "../components/DateSelector";
+import Modal from "../components/Modal";
+import { TokenExpirationDays } from "./PersonalAccessTokens";
+
+interface TokenModalProps {
+    token: PersonalAccessToken;
+    title: string;
+    description: string;
+    descriptionImportant: string;
+    actionDescription: string;
+    showDateSelector?: boolean;
+    onSave: (data: { expirationDate: Date }) => void;
+    onClose: () => void;
+}
+
+function ShowTokenModal(props: TokenModalProps) {
+    const [expiration, setExpiration] = useState({
+        expirationDays: "30",
+        expirationDate: new Date(Date.now() + 30 * 24 * 60 * 60 * 1000),
+    });
+
+    const onEnter = () => {
+        props.onSave({ expirationDate: expiration.expirationDate });
+        return true;
+    };
+
+    return (
+        <Modal
+            title={props.title}
+            buttons={[
+                <button className="secondary" onClick={() => props.onClose()}>
+                    Cancel
+                </button>,
+                <button className="danger" onClick={onEnter}>
+                    {props.actionDescription}
+                </button>,
+            ]}
+            visible={true}
+            onClose={() => props.onClose()}
+            onEnter={onEnter}
+        >
+            <div className="text-gray-500 dark:text-gray-400 text-md">
+                <span>{props.description}</span> <span className="font-semibold">{props.descriptionImportant}</span>
+            </div>
+            <div className="p-4 mt-2 rounded-xl bg-gray-50 dark:bg-gray-800">
+                <div className="font-semibold text-gray-700 dark:text-gray-200">{props.token.name}</div>
+                <div className="font-medium text-gray-400 dark:text-gray-300">
+                    Expires on {dayjs(props.token.expirationTime!.toDate()).format("MMM D, YYYY")}
+                </div>
+            </div>
+            <div className="mt-4">
+                {props.showDateSelector && (
+                    <DateSelector
+                        title="Expiration Date"
+                        description={`The token will expire on ${dayjs(expiration.expirationDate).format(
+                            "MMM D, YYYY",
+                        )}`}
+                        options={TokenExpirationDays}
+                        value={TokenExpirationDays.find((i) => i.value === expiration.expirationDays)?.value}
+                        onChange={(value) =>
+                            setExpiration({
+                                expirationDays: value,
+                                expirationDate: new Date(Date.now() + Number(value) * 24 * 60 * 60 * 1000),
+                            })
+                        }
+                    />
+                )}
+            </div>
+        </Modal>
+    );
+}
+
+export default ShowTokenModal;
diff --git a/components/dashboard/src/settings/TokenEntry.tsx b/components/dashboard/src/settings/TokenEntry.tsx
new file mode 100644
index 00000000000000..4127811526317b
--- /dev/null
+++ b/components/dashboard/src/settings/TokenEntry.tsx
@@ -0,0 +1,58 @@
+/**
+ * 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 { PersonalAccessToken } from "@gitpod/public-api/lib/gitpod/experimental/v1/tokens_pb";
+import dayjs from "dayjs";
+import { ContextMenuEntry } from "../components/ContextMenu";
+import { ItemFieldContextMenu } from "../components/ItemsList";
+import { ReactComponent as ExclamationIcon } from "../images/exclamation.svg";
+import { AllPermissions } from "./PersonalAccessTokens";
+
+interface TokenEntryProps {
+    token: PersonalAccessToken;
+    menuEntries: ContextMenuEntry[];
+}
+
+function TokenEntry(props: TokenEntryProps) {
+    const expirationDay = dayjs(props.token.expirationTime!.toDate());
+    const expired = expirationDay.isBefore(dayjs());
+
+    const getScopes = () => {
+        if (!props.token.scopes) {
+            return "";
+        }
+        const permissions = AllPermissions.filter((e) => e.scopes.every((v) => props.token.scopes.includes(v)));
+        if (permissions.length > 0) {
+            return permissions.map((e) => e.name).join("\n");
+        } else {
+            return "No access";
+        }
+    };
+
+    return (
+        <>
+            <div className="rounded-xl whitespace-nowrap flex space-x-2 py-4 px-4 w-full justify-between hover:bg-gray-100 dark:hover:bg-gray-800 focus:bg-gitpod-kumquat-light group">
+                <div className="flex items-center pr-3 w-4/12">
+                    <span className="truncate">{props.token.name || ""}</span>
+                </div>
+                <div className="flex items-center w-4/12 text-gray-400 font-medium">
+                    <span className="truncate whitespace-pre-line">{getScopes()}</span>
+                </div>
+                <div className="flex items-center w-3/12 text-gray-400">
+                    <span className={"flex items-center gap-1 truncate" + (expired ? " text-orange-600" : "")}>
+                        <span>{expirationDay.format("MMM D, YYYY")}</span>
+                        {expired && <ExclamationIcon fill="#D97706" className="h-4 w-4" />}
+                    </span>
+                </div>
+                <div className="flex items-center justify-end w-1/12">
+                    <ItemFieldContextMenu menuEntries={props.menuEntries} />
+                </div>
+            </div>
+        </>
+    );
+}
+
+export default TokenEntry;