add token actions

coder · Kira-Pilot · Mar 16, 2023 · Mar 8, 2023 · Mar 9, 2023 · Mar 10, 2023
commit 379210f7d1029940b2a375f428b59e877d12bba0
@@ -1,21 +1,21 @@
 import { makeStyles } from "@material-ui/core/styles"
 import Typography from "@material-ui/core/Typography"
-import { FC } from "react"
+import { FC, ReactNode, PropsWithChildren } from "react"
 import { SectionAction } from "../SectionAction/SectionAction"
 
 type SectionLayout = "fixed" | "fluid"
 
 export interface SectionProps {
-  title?: React.ReactNode | string
-  description?: React.ReactNode
-  toolbar?: React.ReactNode
-  alert?: React.ReactNode
+  title?: ReactNode | string
+  description?: ReactNode
+  toolbar?: ReactNode
+  alert?: ReactNode
   layout?: SectionLayout
   className?: string
-  children?: React.ReactNode
+  children?: ReactNode
 }
 
-type SectionFC = FC<React.PropsWithChildren<SectionProps>> & {
+type SectionFC = FC<PropsWithChildren<SectionProps>> & {
   Action: typeof SectionAction
 }
 

@@ -2,13 +2,17 @@
   "title": "Tokens",
   "description": "Tokens are used to authenticate with the Coder API. You can create a token with the Coder CLI using the <1>{{cliCreateCommand}}</1> command.",
   "emptyState": "No tokens found",
-  "deleteToken": {
-    "delete": "Delete Token",
-    "deleteCaption": "Are you sure you want to delete this token?<br/><br/><4>{{tokenId}}</4>",
-    "deleteSuccess": "Token has been deleted",
-    "deleteFailure": "Failed to delete token"
+  "tokenActions": {
+    "addToken": "Add token",
+    "deleteToken": {
+      "delete": "Delete Token",
+      "deleteCaption": "Are you sure you want to delete this token?<br/><br/><4>{{tokenId}}</4>",
+      "deleteSuccess": "Token has been deleted",
+      "deleteFailure": "Failed to delete token"
+    },
+    "toggleLabel": "Show all tokens"
   },
-  "toggleLabel": "Show all tokens",
+
   "table": {
     "id": "ID",
     "createdAt": "Created At",

@@ -5,6 +5,10 @@ import makeStyles from "@material-ui/core/styles/makeStyles"
 import { useTranslation, Trans } from "react-i18next"
 import { useTokensData, useCheckTokenPermissions } from "./hooks"
 import { TokensSwitch, ConfirmDeleteDialog } from "./components"
+import { Stack } from "components/Stack/Stack"
+import Button from "@material-ui/core/Button"
+import { Link as RouterLink } from "react-router-dom"
+import AddIcon from "@material-ui/icons/AddOutlined"
 
 export const TokensPage: FC<PropsWithChildren<unknown>> = () => {
   const styles = useStyles()
@@ -18,6 +22,19 @@ export const TokensPage: FC<PropsWithChildren<unknown>> = () => {
     </Trans>
   )
 
+  const TokenActions = () => (
+    <Stack direction="row" justifyContent="end" className={styles.tokenActions}>
+      <TokensSwitch
+        hasReadAll={perms?.readAllApiKeys ?? false}
+        viewAllTokens={viewAllTokens}
+        setViewAllTokens={setViewAllTokens}
+      />
+      <Button startIcon={<AddIcon />} component={RouterLink} to="new">
+        {t("tokenActions.addToken")}
+      </Button>
+    </Stack>
+  )
+
   const [tokenIdToDelete, setTokenIdToDelete] = useState<string | undefined>(
     undefined,
   )
@@ -42,11 +59,7 @@ export const TokensPage: FC<PropsWithChildren<unknown>> = () => {
         description={description}
         layout="fluid"
       >
-        <TokensSwitch
-          hasReadAll={perms?.readAllApiKeys ?? false}
-          viewAllTokens={viewAllTokens}
-          setViewAllTokens={setViewAllTokens}
-        />
+        <TokenActions />
         <TokensPageView
           tokens={tokens}
           viewAllTokens={viewAllTokens}
@@ -77,6 +90,9 @@ const useStyles = makeStyles((theme) => ({
       borderRadius: 2,
     },
   },
+  tokenActions: {
+    marginBottom: theme.spacing(1),
+  },
 }))
 
 export default TokensPage
@@ -122,7 +122,7 @@ export const TokensPageView: FC<
                               onDelete(token.id)
                             }}
                             size="medium"
-                            aria-label={t("deleteToken.delete")}
+                            aria-label={t("tokenActions.deleteToken.delete")}
                           >
                             <DeleteOutlineIcon />
                           </IconButton>

@@ -13,7 +13,11 @@ export const ConfirmDeleteDialog: FC<{
   const { t } = useTranslation("tokensPage")
 
   const description = (
-    <Trans t={t} i18nKey="deleteToken.deleteCaption" values={{ tokenId }}>
+    <Trans
+      t={t}
+      i18nKey="tokenActions.deleteToken.deleteCaption"
+      values={{ tokenId }}
+    >
       Are you sure you want to delete this token?
       <br />
       <br />
@@ -25,19 +29,22 @@ export const ConfirmDeleteDialog: FC<{
     useDeleteToken(queryKey)
 
   const onDeleteSuccess = () => {
-    displaySuccess(t("deleteToken.deleteSuccess"))
+    displaySuccess(t("tokenActions.deleteToken.deleteSuccess"))
     setTokenId(undefined)
   }
 
   const onDeleteError = (error: unknown) => {
-    const message = getErrorMessage(error, t("deleteToken.deleteFailure"))
+    const message = getErrorMessage(
+      error,
+      t("tokenActions.deleteToken.deleteFailure"),
+    )
     displayError(message)
     setTokenId(undefined)
   }
 
   return (
     <ConfirmDialog
-      title={t("deleteToken.delete")}
+      title={t("tokenActions.deleteToken.delete")}
       description={description}
       open={Boolean(tokenId) || isDeleting}
       confirmLoading={isDeleting}

@@ -26,7 +26,7 @@ export const TokensSwitch: FC<{
               color="primary"
             />
           }
-          label={t("toggleLabel")}
+          label={t("tokenActions.toggleLabel")}
         />
       )}
     </FormGroup>