Empty page

Author: Laurie T. Malau

components/dashboard/src/settings/PersonalAccessTokens.tsx

@@ -8,7 +8,6 @@ import { PersonalAccessToken } from "@gitpod/public-api/lib/gitpod/experimental/
 import { useContext, useEffect, useState } from "react";
 import { Redirect } from "react-router";
 import { FeatureFlagContext } from "../contexts/FeatureFlagContext";
-import { personalAccessTokensService } from "../service/public-api";
 import { PageWithSettingsSubMenu } from "./PageWithSettingsSubMenu";
 
 function PersonalAccessTokens() {
@@ -28,18 +27,30 @@ function PersonalAccessTokens() {
 }
 
 function ListAccessTokensView() {
-    const [tokens, setTokens] = useState<PersonalAccessToken[]>([]);
+    const [tokens] = useState<PersonalAccessToken[]>([]);
 
     useEffect(() => {
         (async () => {
-            const response = await personalAccessTokensService.listPersonalAccessTokens({});
-            setTokens(response.tokens);
+            // const response = await personalAccessTokensService.listPersonalAccessTokens({});
+            // setTokens(response.tokens);
         })();
     }, []);
 
     return (
-        <div>
-            No personal access tokens.
+        <>
+            <div className="flex items-start sm:justify-between mb-2">
+                <div>
+                    <h3>Personal Access Tokens</h3>
+                    <h2 className="text-gray-500">Create or regenerate active personal access tokens.</h2>
+                </div>
+            </div>
+            <div className="bg-gray-100 dark:bg-gray-800 rounded-xl w-full py-28 flex flex-col items-center">
+                <h3 className="text-center pb-3 text-gray-500 dark:text-gray-400">No Personal Access Tokens (PAT)</h3>
+                <p className="text-center pb-6 text-gray-500 text-base w-96">
+                    Generate a personal access token (PAT) for applications that need access to the Gitpod API.{" "}
+                </p>
+                <button>New Personal Access Token</button>
+            </div>
             {tokens.length > 0 && (
                 <ul>
                     {tokens.map((t: PersonalAccessToken) => {
@@ -51,7 +62,7 @@ function ListAccessTokensView() {
                     })}
                 </ul>
             )}
-        </div>
+        </>
     );
 }