From 6a6c62f9b3c0e01bdef5f481f1e89c02091aae51 Mon Sep 17 00:00:00 2001
From: Calvin Lee <calvin.lee@harness.io>
Date: Mon, 1 Jul 2024 19:09:53 +0000
Subject: [PATCH] feat: [code-2061]: add ssh support in gitness (#2140)

---
 .../CloneButtonTooltip/CloneButtonTooltip.tsx |  72 +++++---
 web/src/framework/strings/stringTypes.ts      |  13 ++
 web/src/i18n/strings.en.yaml                  |  15 ++
 web/src/icons/sshKey.svg                      |   1 +
 .../pages/UserProfile/NewSshKey/NewSshKey.tsx | 142 +++++++++++++++
 .../pages/UserProfile/UserProfile.module.scss |  44 +++++
 .../UserProfile/UserProfile.module.scss.d.ts  |   5 +
 web/src/pages/UserProfile/UserProfile.tsx     | 170 ++++++++++++++++--
 web/src/utils/Utils.ts                        |  12 ++
 9 files changed, 438 insertions(+), 36 deletions(-)
 create mode 100644 web/src/icons/sshKey.svg
 create mode 100644 web/src/pages/UserProfile/NewSshKey/NewSshKey.tsx

diff --git a/web/src/components/CloneButtonTooltip/CloneButtonTooltip.tsx b/web/src/components/CloneButtonTooltip/CloneButtonTooltip.tsx
index 1f4a073129..0ac8e501d0 100644
--- a/web/src/components/CloneButtonTooltip/CloneButtonTooltip.tsx
+++ b/web/src/components/CloneButtonTooltip/CloneButtonTooltip.tsx
@@ -17,7 +17,7 @@
 import React, { useState } from 'react'
 import { Render } from 'react-jsx-match'
 import cx from 'classnames'
-import { Button, ButtonVariation, Container, FlexExpander, Layout, Text } from '@harnessio/uicore'
+import { Button, ButtonVariation, Container, FlexExpander, Layout, PillToggle, Text } from '@harnessio/uicore'
 import { Color, FontVariation } from '@harnessio/design-system'
 import { Classes } from '@blueprintjs/core'
 import { Icon } from '@harnessio/icons'
@@ -32,11 +32,16 @@ interface CloneButtonTooltipProps {
   httpsURL: string
   sshURL: string
 }
+enum CloneType {
+  HTTPS = 'https',
+  SSH = 'ssh'
+}
 
 export function CloneButtonTooltip({ httpsURL, sshURL }: CloneButtonTooltipProps) {
   const { getString } = useStrings()
   const [flag, setFlag] = useState(false)
   const { isCurrentSessionPublic } = useAppContext()
+  const [type, setType] = useState(CloneType.HTTPS)
   return (
     <Container className={css.container} padding="xlarge">
       <Layout.Vertical spacing="small">
@@ -53,30 +58,51 @@ export function CloneButtonTooltip({ httpsURL, sshURL }: CloneButtonTooltipProps
           />
         </Container>
         <Text font={{ variation: FontVariation.H4 }}>{getString('cloneHTTPS')}</Text>
-        <Container padding={{ top: 'small' }}>
-          {
-            // TODO: replace with data from config api
-            sshURL && <Text font={{ variation: FontVariation.BODY2_SEMI }}>{getString('http')}</Text>
-          }
-          <Layout.Horizontal className={css.layout}>
-            <Text className={css.url}>{httpsURL}</Text>
+        {sshURL ? (
+          <Container padding={{ top: 'small' }}>
+            <Layout.Vertical>
+              <Container padding={{ bottom: 'medium' }}>
+                <PillToggle
+                  selectedView={type}
+                  onChange={typeClicked => {
+                    setType(typeClicked as CloneType)
+                  }}
+                  options={[
+                    { label: CloneType.HTTPS.toUpperCase(), value: 'https' },
+                    { label: CloneType.SSH.toUpperCase(), value: 'ssh' }
+                  ]}
+                />
+              </Container>
+              {type === CloneType.HTTPS ? (
+                <Layout.Horizontal className={css.layout}>
+                  <Text className={css.url}>{httpsURL}</Text>
 
-            <CopyButton content={httpsURL} id={css.cloneCopyButton} icon={CodeIcon.Copy} iconProps={{ size: 14 }} />
-          </Layout.Horizontal>
-        </Container>
-        {
-          // TODO: replace with data from config api
-          sshURL && (
-            <Container padding={{ top: 'small' }}>
-              <Text font={{ variation: FontVariation.BODY2_SEMI }}>{getString('ssh')}</Text>
-              <Layout.Horizontal className={css.layout}>
-                <Text className={css.url}>{sshURL}</Text>
+                  <CopyButton
+                    content={httpsURL}
+                    id={css.cloneCopyButton}
+                    icon={CodeIcon.Copy}
+                    iconProps={{ size: 14 }}
+                  />
+                </Layout.Horizontal>
+              ) : (
+                <Layout.Horizontal className={css.layout}>
+                  <Text className={css.url}>{sshURL}</Text>
+
+                  <CopyButton content={sshURL} id={css.cloneCopyButton} icon={CodeIcon.Copy} iconProps={{ size: 14 }} />
+                </Layout.Horizontal>
+              )}
+            </Layout.Vertical>
+          </Container>
+        ) : (
+          <Container padding={{ top: 'small' }}>
+            <Layout.Horizontal className={css.layout}>
+              <Text className={css.url}>{httpsURL}</Text>
+
+              <CopyButton content={httpsURL} id={css.cloneCopyButton} icon={CodeIcon.Copy} iconProps={{ size: 14 }} />
+            </Layout.Horizontal>
+          </Container>
+        )}
 
-                <CopyButton content={sshURL} id={css.cloneCopyButton} icon={CodeIcon.Copy} iconProps={{ size: 14 }} />
-              </Layout.Horizontal>
-            </Container>
-          )
-        }
         <Render when={!isCurrentSessionPublic}>
           <Button
             width={300}
diff --git a/web/src/framework/strings/stringTypes.ts b/web/src/framework/strings/stringTypes.ts
index c190ab81d9..4c857e85ec 100644
--- a/web/src/framework/strings/stringTypes.ts
+++ b/web/src/framework/strings/stringTypes.ts
@@ -1004,6 +1004,19 @@ export interface StringsMap {
   spaces: string
   squashMerge: string
   ssh: string
+  'sshCard.addedOn': string
+  'sshCard.beginsWithContent': string
+  'sshCard.deleteSshMsg': string
+  'sshCard.deleteSshTitle': string
+  'sshCard.mySshKeys': string
+  'sshCard.newSshKey': string
+  'sshCard.noSshKeyText': string
+  'sshCard.noTokensText': string
+  'sshCard.personalAccessToken': string
+  'sshCard.publicKey': string
+  'sshCard.sshContent': string
+  'sshCard.sshkey': string
+  'sshCard.successSshKeyMsg': string
   sslVerificationLabel: string
   startSearching: string
   status: string
diff --git a/web/src/i18n/strings.en.yaml b/web/src/i18n/strings.en.yaml
index e49580e899..e5bef40e13 100644
--- a/web/src/i18n/strings.en.yaml
+++ b/web/src/i18n/strings.en.yaml
@@ -1219,3 +1219,18 @@ cmdlineInfo:
   stepFourSub: See Resolving a merge conflict using the command line for step-by-step instruction on resolving merge conflicts
   stepFive: Push the changes
   stepFiveSub: git push -u origin {source}
+sshCard:
+  newSshKey: New SSH Key
+  sshkey: SSH Key
+  publicKey: Public Key
+  noSshKeyText: There are no SSH Keys associated with this account
+  mySshKeys: My SSH Keys
+  sshContent: SSH keys allow you to establish a secure connection between your computer and GitLab. SSH fingerprints
+    verify if the client is connecting to the correct host. {{learnMore}}
+  beginsWithContent: Begins with 'ssh-rsa', 'ecdsa-sha2-nistp256', 'ecdsa-sha2-nistp384', 'ecdsa-sha2-nistp521', 'ssh-ed25519', 'sk-ecdsa-sha2-nistp256@openssh.com', or 'sk-ssh-ed25519@openssh.com'.
+  deleteSshTitle: Delete SSH Key
+  deleteSshMsg: Are you sure you want to delete this SSH Key?
+  successSshKeyMsg: SSH Key deleted successfully
+  addedOn: Added On
+  personalAccessToken: Personal Access Token
+  noTokensText: There are no personal access tokens associated with this account
diff --git a/web/src/icons/sshKey.svg b/web/src/icons/sshKey.svg
new file mode 100644
index 0000000000..99d24e1f3b
--- /dev/null
+++ b/web/src/icons/sshKey.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="#0278D5" fill-rule="evenodd" d="M9.608 4.446c0-1.126.884-2.039 1.976-2.039 1.09 0 1.976.913 1.976 2.04 0 1.126-.885 2.039-1.976 2.039-1.092 0-1.976-.913-1.976-2.04m1.976-1.36c-.728 0-1.318.61-1.318 1.36s.59 1.36 1.318 1.36c.727 0 1.317-.609 1.317-1.36 0-.75-.59-1.36-1.317-1.36" clip-rule="evenodd"/><path fill="#0278D5" fill-rule="evenodd" d="M6.12 5.098C6.12 2.283 8.332 0 11.06 0S16 2.283 16 5.098s-2.212 5.099-4.94 5.099a4.8 4.8 0 0 1-2.459-.676v2.067c0 .09-.034.176-.096.24a.32.32 0 0 1-.233.1H6.297v1.682c0 .188-.147.34-.33.34H4.15v1.71c0 .188-.147.34-.329.34H.329A.335.335 0 0 1 0 15.66v-1.984c0-.089.034-.174.094-.238l6.3-6.66a5.2 5.2 0 0 1-.274-1.68M11.06.68c-2.364 0-4.28 1.978-4.28 4.418s1.917 4.419 4.281 4.419c2.365 0 4.281-1.978 4.281-4.419S13.425.68 11.061.68M6.678 7.453l-6.02 6.361v1.506h2.834v-1.71c0-.188.147-.34.329-.34h1.817v-1.682c0-.09.035-.177.097-.24a.32.32 0 0 1 .233-.1h1.975V9.053a5.1 5.1 0 0 1-1.265-1.6" clip-rule="evenodd"/></svg>
\ No newline at end of file
diff --git a/web/src/pages/UserProfile/NewSshKey/NewSshKey.tsx b/web/src/pages/UserProfile/NewSshKey/NewSshKey.tsx
new file mode 100644
index 0000000000..9617288cc3
--- /dev/null
+++ b/web/src/pages/UserProfile/NewSshKey/NewSshKey.tsx
@@ -0,0 +1,142 @@
+/*
+ * Copyright 2023 Harness, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React, { useState } from 'react'
+import { Button, ButtonVariation, Dialog, FormikForm, FormInput, Layout, Text, useToaster } from '@harnessio/uicore'
+import { Formik } from 'formik'
+import { useMutate } from 'restful-react'
+import * as Yup from 'yup'
+
+import { PopoverInteractionKind, PopoverPosition } from '@blueprintjs/core'
+import { useModalHook } from 'hooks/useModalHook'
+import { useStrings } from 'framework/strings'
+import { EnumPublicKeyUsage, REGEX_VALID_REPO_NAME, getErrorMessage } from 'utils/Utils'
+
+import { FormInputWithCopyButton } from 'components/UserManagementFlows/AddUserModal'
+
+import css from '../UserProfile.module.scss'
+
+interface userSshKeyRequest {
+  content: string
+  identifier: string
+  usage: EnumPublicKeyUsage
+}
+const useNewSshKey = ({ onClose }: { onClose: () => void }) => {
+  const { getString } = useStrings()
+  const { mutate } = useMutate({ path: '/api/v1/user/keys', verb: 'POST' })
+  const { showError } = useToaster()
+
+  const [generatedToken, setGeneratedToken] = useState<string>()
+  const isTokenGenerated = Boolean(generatedToken)
+
+  //   const lifeTimeOptions: SelectOption[] = useMemo(
+  //     () => [
+  //       { label: getString('nDays', { number: 7 }), value: 604800000000000 },
+  //       { label: getString('nDays', { number: 30 }), value: 2592000000000000 },
+  //       { label: getString('nDays', { number: 60 }), value: 5184000000000000 },
+  //       { label: getString('nDays', { number: 90 }), value: 7776000000000000 },
+  //       { label: getString('noExpiration'), value: Infinity }
+  //     ],
+  //     [getString]
+  //   )
+
+  const onModalClose = () => {
+    setGeneratedToken('')
+    hideSshKeyModal()
+    onClose()
+  }
+
+  const [openSshKeyModal, hideSshKeyModal] = useModalHook(() => {
+    return (
+      <Dialog isOpen enforceFocus={false} onClose={onModalClose} title={getString('sshCard.newSshKey')}>
+        <Formik<userSshKeyRequest>
+          initialValues={{
+            identifier: '',
+            content: '',
+            usage: 'auth'
+          }}
+          validationSchema={Yup.object().shape({
+            identifier: Yup.string()
+              .required(getString('validation.nameIsRequired'))
+              .matches(REGEX_VALID_REPO_NAME, getString('validation.nameInvalid'))
+          })}
+          onSubmit={async values => {
+            const payload = { ...values }
+            mutate(payload)
+              .then(() => {
+                hideSshKeyModal()
+                onClose()
+              })
+              .catch(err => {
+                showError(getErrorMessage(err))
+              })
+          }}>
+          {() => {
+            return (
+              <FormikForm>
+                <FormInputWithCopyButton
+                  name="identifier"
+                  label={getString('sshCard.newSshKey')}
+                  placeholder={getString('newToken.namePlaceholder')}
+                  disabled={isTokenGenerated}
+                />
+                <FormInput.TextArea
+                  label={
+                    <Layout.Horizontal
+                      className={css.textAreaContainer}
+                      flex={{ justifyContent: 'flex-start', alignItems: 'flex-start' }}>
+                      <Text>{getString('sshCard.publicKey')}</Text>
+
+                      <Text
+                        padding={{ left: 'small' }}
+                        className={css.icon}
+                        icon="code-info"
+                        tooltip={getString('sshCard.beginsWithContent')}
+                        tooltipProps={{
+                          isDark: true,
+                          interactionKind: PopoverInteractionKind.HOVER,
+                          position: PopoverPosition.BOTTOM
+                        }}
+                        iconProps={{ size: 16 }}
+                      />
+                    </Layout.Horizontal>
+                  }
+                  name="content"
+                />
+
+                <Layout.Horizontal margin={{ top: 'xxxlarge' }} spacing="medium">
+                  <Button
+                    text={getString('newToken.generateToken')}
+                    type="submit"
+                    variation={ButtonVariation.PRIMARY}
+                  />
+                  <Button text={getString('cancel')} onClick={hideSshKeyModal} variation={ButtonVariation.TERTIARY} />
+                </Layout.Horizontal>
+              </FormikForm>
+            )
+          }}
+        </Formik>
+      </Dialog>
+    )
+  }, [generatedToken])
+
+  return {
+    openSshKeyModal,
+    hideSshKeyModal
+  }
+}
+
+export default useNewSshKey
diff --git a/web/src/pages/UserProfile/UserProfile.module.scss b/web/src/pages/UserProfile/UserProfile.module.scss
index dc8b10085f..ba8ff46e8e 100644
--- a/web/src/pages/UserProfile/UserProfile.module.scss
+++ b/web/src/pages/UserProfile/UserProfile.module.scss
@@ -72,5 +72,49 @@
       width: 100%;
       margin-top: var(--spacing-medium);
     }
+    .containerCard {
+      background-color: var(--grey-0) !important;
+      padding: var(--spacing-large) var(--spacing-xlarge) !important;
+      border-radius: 4px;
+      box-shadow: 0px 0.5px 2px 0px rgba(96, 97, 112, 0.16), 0px 0px 1px 0px rgba(40, 41, 61, 0.08);
+    }
+  }
+}
+
+.icon {
+  > svg {
+    fill: var(--primary-7) !important;
+
+    > path {
+      fill: var(--primary-7) !important;
+    }
   }
 }
+
+.popover {
+  padding: var(--spacing-medium) !important;
+}
+
+.textAreaContainer {
+  :global {
+    .bp3-popover-wrapper {
+      margin-top: 2px !important;
+      .bp3-icon {
+        > svg {
+          fill: var(--primary-7) !important;
+
+          > path {
+            fill: var(--primary-7) !important;
+          }
+        }
+      }
+    }
+  }
+}
+
+.iconContainer {
+  margin-top: 8px !important;
+  background: var(--primary-2) !important;
+  border-radius: 4px !important;
+  margin-right: var(--spacing-3) !important;
+}
diff --git a/web/src/pages/UserProfile/UserProfile.module.scss.d.ts b/web/src/pages/UserProfile/UserProfile.module.scss.d.ts
index fc8271a5ac..52bb8d756b 100644
--- a/web/src/pages/UserProfile/UserProfile.module.scss.d.ts
+++ b/web/src/pages/UserProfile/UserProfile.module.scss.d.ts
@@ -17,12 +17,17 @@
 /* eslint-disable */
 // This is an auto-generated file
 export declare const avatar: string
+export declare const containerCard: string
 export declare const detailField: string
 export declare const detailsCtn: string
 export declare const editableTextWrapper: string
+export declare const icon: string
+export declare const iconContainer: string
 export declare const logoutCard: string
 export declare const mainCtn: string
 export declare const pageCtn: string
+export declare const popover: string
 export declare const profileCard: string
 export declare const table: string
+export declare const textAreaContainer: string
 export declare const textInput: string
diff --git a/web/src/pages/UserProfile/UserProfile.tsx b/web/src/pages/UserProfile/UserProfile.tsx
index c4dea4867a..f66cf2e5c9 100644
--- a/web/src/pages/UserProfile/UserProfile.tsx
+++ b/web/src/pages/UserProfile/UserProfile.tsx
@@ -35,9 +35,10 @@ import { useGet, useMutate } from 'restful-react'
 import type { CellProps, Column } from 'react-table'
 import ReactTimeago from 'react-timeago'
 import moment from 'moment'
+import { isEmpty } from 'lodash-es'
 import { useStrings } from 'framework/strings'
 import { TypesToken, TypesUser, useGetUser, useOpLogout, useUpdateUser } from 'services/code'
-import { ButtonRoleProps, getErrorMessage } from 'utils/Utils'
+import { ButtonRoleProps, TypeKeys, getErrorMessage } from 'utils/Utils'
 import { useConfirmAct } from 'hooks/useConfirmAction'
 import { useAppContext } from 'AppContext'
 import { LoadingSpinner } from 'components/LoadingSpinner/LoadingSpinner'
@@ -45,6 +46,9 @@ import { OptionsMenuButton } from 'components/OptionsMenuButton/OptionsMenuButto
 import { currentUserAtom } from 'atoms/currentUser'
 import useNewToken from './NewToken/NewToken'
 import EditableTextField from './EditableTextField'
+import SshKey from '../../icons/sshKey.svg?url'
+
+import useNewSshKey from './NewSshKey/NewSshKey'
 import css from './UserProfile.module.scss'
 
 const USER_TOKENS_API_PATH = '/api/v1/user/tokens'
@@ -60,6 +64,9 @@ const UserProfile = () => {
   const { mutate: logoutUser } = useOpLogout({})
 
   const { data: userTokens, loading: tokensLoading, refetch: refetchTokens } = useGet({ path: USER_TOKENS_API_PATH })
+  const { data: sshKeys, loading: sshKeysLoading, refetch: refetchSshKeys } = useGet({ path: '/api/v1/user/keys' })
+  const { mutate: deleteSshKey } = useMutate({ path: `/api/v1/user/keys`, verb: 'DELETE' })
+
   const { mutate: deleteToken } = useMutate({ path: USER_TOKENS_API_PATH, verb: 'DELETE' })
   const [, setCurrentUser] = useAtom(currentUserAtom)
 
@@ -69,9 +76,28 @@ const UserProfile = () => {
     setCurrentUser(undefined)
   }
 
+  const { data: systemConfig, loading: systemConfigLoading } = useGet({ path: 'api/v1/system/config' })
+
   const { openModal } = useNewToken({ onClose: refetchTokens })
+  const { openSshKeyModal } = useNewSshKey({ onClose: refetchSshKeys })
 
   const onConfirmAct = useConfirmAct()
+  const handleDeleteSshKey = async (sshKeyId: string) =>
+    await onConfirmAct({
+      action: async () => {
+        try {
+          await deleteSshKey(sshKeyId)
+          refetchSshKeys()
+          showSuccess(getString('sshCard.successSshKeyMsg'))
+        } catch (error) {
+          showError(getErrorMessage(error))
+        }
+      },
+      message: getString('sshCard.deleteSshMsg'),
+      intent: 'danger',
+      title: getString('sshCard.deleteSshTitle')
+    })
+
   const handleDeleteToken = async (tokenId: string) =>
     await onConfirmAct({
       action: async () => {
@@ -88,6 +114,64 @@ const UserProfile = () => {
       title: getString('deleteToken')
     })
 
+  // useEffect(()=>{},[refetchSshKeys])
+  const sshkeysColumns: Column<TypeKeys>[] = useMemo(
+    () => [
+      {
+        Header: getString('name'),
+        width: '65%',
+        Cell: ({ row }: CellProps<TypeKeys>) => {
+          return (
+            <Layout.Horizontal flex={{ justifyContent: 'flex-start' }}>
+              <Container className={css.iconContainer} padding="small">
+                <img src={SshKey} width={16} height={16} />
+              </Container>
+              <Layout.Vertical>
+                <Text font={{ variation: FontVariation.CARD_TITLE }} lineClamp={1}>
+                  {row.original.identifier}
+                </Text>
+
+                <Text font={{ variation: FontVariation.BODY2_SEMI }} lineClamp={1}>
+                  {row.original.fingerprint}
+                </Text>
+              </Layout.Vertical>
+            </Layout.Horizontal>
+          )
+        }
+      },
+      {
+        Header: getString('sshCard.addedOn'),
+        width: '30%',
+        Cell: ({ row }: CellProps<TypeKeys>) => (
+          <Text font={{ variation: FontVariation.SMALL_SEMI }} lineClamp={1}>
+            <ReactTimeago date={row.original.created || ''} />
+          </Text>
+        )
+      },
+      {
+        accessor: 'identifier',
+        Header: '',
+        width: '5%',
+        Cell: ({ row }: CellProps<TypeKeys>) => {
+          return (
+            <OptionsMenuButton
+              tooltipProps={{ isDark: true }}
+              items={[
+                {
+                  text: getString('sshCard.deleteSshTitle'),
+                  onClick: () => {
+                    handleDeleteSshKey(row.original.identifier as string)
+                    refetchSshKeys()
+                  }
+                }
+              ]}
+            />
+          )
+        }
+      }
+    ],
+    [sshKeys] // eslint-disable-line react-hooks/exhaustive-deps
+  )
   const columns: Column<TypesToken>[] = useMemo(
     () => [
       {
@@ -160,7 +244,7 @@ const UserProfile = () => {
         }
       }
     ],
-    [] // eslint-disable-line react-hooks/exhaustive-deps
+    [userTokens] // eslint-disable-line react-hooks/exhaustive-deps
   )
 
   const onEditField = async (field: keyof TypesUser, value: string) => {
@@ -174,7 +258,7 @@ const UserProfile = () => {
 
   return (
     <Container className={css.mainCtn}>
-      <LoadingSpinner visible={currentUserLoading || tokensLoading} />
+      <LoadingSpinner visible={currentUserLoading || tokensLoading || sshKeysLoading || systemConfigLoading} />
       <Page.Header title={getString('accountSetting')} />
       <Page.Body>
         <Container className={css.pageCtn}>
@@ -239,17 +323,77 @@ const UserProfile = () => {
             </Layout.Horizontal>
           </Card>
           <Container margin={{ top: 'xxxlarge' }}>
-            <Layout.Horizontal>
-              <Button
-                icon="plus"
-                text={getString('newToken.text')}
-                variation={ButtonVariation.PRIMARY}
-                margin={{ bottom: 'medium' }}
-                onClick={() => openModal()}
-              />
-            </Layout.Horizontal>
-            <TableV2 minimal data={userTokens || []} columns={columns} className={css.table} />
+            <Container className={css.containerCard}>
+              <Layout.Horizontal flex={{ justifyContent: 'space-between' }}>
+                <Text font={{ variation: FontVariation.CARD_TITLE }}>{getString('sshCard.personalAccessToken')}</Text>
+                {isEmpty(userTokens) ? null : (
+                  <Button
+                    icon="plus"
+                    text={getString('newToken.text')}
+                    variation={ButtonVariation.LINK}
+                    onClick={() => openModal()}
+                  />
+                )}
+              </Layout.Horizontal>
+              {isEmpty(userTokens) ? (
+                <Container flex={{ justifyContent: 'center' }}>
+                  <Layout.Vertical>
+                    <Text padding={{ bottom: 'medium' }} font={{ variation: FontVariation.BODY2_SEMI }}>
+                      {getString('sshCard.noTokensText')}
+                    </Text>
+                    <Button
+                      icon="plus"
+                      text={getString('newToken.text')}
+                      variation={ButtonVariation.LINK}
+                      onClick={() => openModal()}
+                    />
+                  </Layout.Vertical>
+                </Container>
+              ) : (
+                <TableV2 data={userTokens || []} columns={columns} />
+              )}
+            </Container>
           </Container>
+          {systemConfig?.ssh_enabled && (
+            <Container className={css.containerCard} margin={{ top: 'medium' }}>
+              <Layout.Horizontal flex={{ justifyContent: 'space-between' }}>
+                <Text padding={{ bottom: 'medium' }} font={{ variation: FontVariation.CARD_TITLE }}>
+                  {getString('sshCard.mySshKeys')}
+                </Text>
+                {isEmpty(sshKeys) ? null : (
+                  <Button
+                    padding={{ bottom: 'medium' }}
+                    icon="small-plus"
+                    variation={ButtonVariation.LINK}
+                    onClick={() => {
+                      openSshKeyModal()
+                    }}
+                    text={getString('sshCard.newSshKey')}
+                  />
+                )}
+              </Layout.Horizontal>
+              <Text font={{ variation: FontVariation.BODY2_SEMI }}>{getString('sshCard.sshContent')}</Text>
+              {isEmpty(sshKeys) ? (
+                <Container flex={{ justifyContent: 'center' }}>
+                  <Layout.Vertical>
+                    <Text font={{ variation: FontVariation.BODY2_SEMI }} padding={{ top: 'medium', bottom: 'small' }}>
+                      {getString('sshCard.noSshKeyText')}
+                    </Text>
+                    <Button
+                      icon="small-plus"
+                      variation={ButtonVariation.LINK}
+                      onClick={() => {
+                        openSshKeyModal()
+                      }}
+                      text={getString('sshCard.newSshKey')}
+                    />
+                  </Layout.Vertical>
+                </Container>
+              ) : (
+                <TableV2 columns={sshkeysColumns} data={sshKeys || []} />
+              )}
+            </Container>
+          )}
         </Container>
       </Page.Body>
     </Container>
diff --git a/web/src/utils/Utils.ts b/web/src/utils/Utils.ts
index d83e3cdc92..4c33661197 100644
--- a/web/src/utils/Utils.ts
+++ b/web/src/utils/Utils.ts
@@ -556,6 +556,18 @@ export const filenameToLanguage = (name?: string): string | undefined => {
   return PLAIN_TEXT
 }
 
+export type EnumPublicKeyUsage = 'auth'
+
+export interface TypeKeys {
+  created: number
+  verified: number | undefined
+  identifier: string
+  usage: EnumPublicKeyUsage
+  fingerprint: string
+  comment: string
+  type: string
+}
+
 interface WaitUtilParams<T> {
   test: () => T
   onMatched: (result: T) => void