1- import React , { useState } from "react" ;
1+ import { useState } from "react" ;
2+ import type { FC } from "react" ;
23import { observer } from "mobx-react" ;
34import useSWR from "swr" ;
45// plane imports
@@ -19,7 +20,7 @@ import { useWorkspace } from "@/hooks/store/use-workspace";
1920
2021const apiTokenService = new APITokenService ( ) ;
2122
22- function ApiTokensPage ( ) {
23+ const ApiTokensPage : FC = observer ( function ApiTokensPage ( ) {
2324 // states
2425 const [ isCreateTokenModalOpen , setIsCreateTokenModalOpen ] = useState ( false ) ;
2526 // plane hooks
@@ -42,67 +43,49 @@ function ApiTokensPage() {
4243 < PageHead title = { pageTitle } />
4344 < CreateApiTokenModal isOpen = { isCreateTokenModalOpen } onClose = { ( ) => setIsCreateTokenModalOpen ( false ) } />
4445 < section className = "w-full" >
46+ < SettingsHeading
47+ title = { t ( "account_settings.api_tokens.heading" ) }
48+ description = { t ( "account_settings.api_tokens.description" ) }
49+ button = { {
50+ label : t ( "workspace_settings.settings.api_tokens.add_token" ) ,
51+ onClick : ( ) => {
52+ captureClick ( {
53+ elementName : PROFILE_SETTINGS_TRACKER_ELEMENTS . HEADER_ADD_PAT_BUTTON ,
54+ } ) ;
55+ setIsCreateTokenModalOpen ( true ) ;
56+ } ,
57+ } }
58+ />
4559 { tokens . length > 0 ? (
4660 < >
47- < SettingsHeading
48- title = { t ( "account_settings.api_tokens.heading" ) }
49- description = { t ( "account_settings.api_tokens.description" ) }
50- button = { {
51- label : t ( "workspace_settings.settings.api_tokens.add_token" ) ,
52- onClick : ( ) => {
53- captureClick ( {
54- elementName : PROFILE_SETTINGS_TRACKER_ELEMENTS . HEADER_ADD_PAT_BUTTON ,
55- } ) ;
56- setIsCreateTokenModalOpen ( true ) ;
57- } ,
58- } }
59- />
60- < div >
61- { tokens . map ( ( token ) => (
62- < ApiTokenListItem key = { token . id } token = { token } />
63- ) ) }
64- </ div >
61+ { tokens . map ( ( token ) => (
62+ < ApiTokenListItem key = { token . id } token = { token } />
63+ ) ) }
6564 </ >
6665 ) : (
67- < div className = "flex h-full w-full flex-col py-" >
68- < SettingsHeading
69- title = { t ( "account_settings.api_tokens.heading" ) }
70- description = { t ( "account_settings.api_tokens.description" ) }
71- button = { {
72- label : t ( "workspace_settings.settings.api_tokens.add_token" ) ,
66+ < EmptyStateCompact
67+ assetKey = "token"
68+ assetClassName = "size-20"
69+ title = { t ( "settings_empty_state.tokens.title" ) }
70+ description = { t ( "settings_empty_state.tokens.description" ) }
71+ actions = { [
72+ {
73+ label : t ( "settings_empty_state.tokens.cta_primary" ) ,
7374 onClick : ( ) => {
7475 captureClick ( {
75- elementName : PROFILE_SETTINGS_TRACKER_ELEMENTS . HEADER_ADD_PAT_BUTTON ,
76+ elementName : PROFILE_SETTINGS_TRACKER_ELEMENTS . EMPTY_STATE_ADD_PAT_BUTTON ,
7677 } ) ;
7778 setIsCreateTokenModalOpen ( true ) ;
7879 } ,
79- } }
80- />
81-
82- < EmptyStateCompact
83- assetKey = "token"
84- assetClassName = "size-20"
85- title = { t ( "settings_empty_state.tokens.title" ) }
86- description = { t ( "settings_empty_state.tokens.description" ) }
87- actions = { [
88- {
89- label : t ( "settings_empty_state.tokens.cta_primary" ) ,
90- onClick : ( ) => {
91- captureClick ( {
92- elementName : PROFILE_SETTINGS_TRACKER_ELEMENTS . EMPTY_STATE_ADD_PAT_BUTTON ,
93- } ) ;
94- setIsCreateTokenModalOpen ( true ) ;
95- } ,
96- } ,
97- ] }
98- align = "start"
99- rootClassName = "py-20"
100- />
101- </ div >
80+ } ,
81+ ] }
82+ align = "start"
83+ rootClassName = "py-20"
84+ />
10285 ) }
10386 </ section >
10487 </ div >
10588 ) ;
106- }
89+ } ) ;
10790
108- export default observer ( ApiTokensPage ) ;
91+ export default ApiTokensPage ;
0 commit comments