feat: add alert banner on new tokens UI (#3559)

* feat: add alert banner on new tokens UI

* fix: update personal api token to custom api token

* fix: wording

Author: Palakp41

src/authorizations/components/PostDeploymentTokensBanner.tsx

@@ -0,0 +1,14 @@
+// Libraries
+import React, {FunctionComponent} from 'react'
+
+// Constants
+
+const PostDeploymentTokensBanner: FunctionComponent = () => (
+  <div>
+    Our Tokens UI has changed. You are only able to view and safely store token
+    details at the point of creation. If you lose access to token credentials,
+    you can generate a new token.
+  </div>
+)
+
+export default PostDeploymentTokensBanner

src/authorizations/components/redesigned/CustomApiTokenOverlay.tsx

@@ -255,10 +255,7 @@ const CustomApiTokenOverlay: FC<Props> = props => {
 
   return (
     <Overlay.Container maxWidth={800}>
-      <Overlay.Header
-        title="Generate a Personal API Token"
-        onDismiss={onClose}
-      />
+      <Overlay.Header title="Generate a Custom API Token" onDismiss={onClose} />
       <Overlay.Body>
         <Form>
           <FlexBox

src/authorizations/components/redesigned/DisplayTokenOverlay.tsx

@@ -41,7 +41,7 @@ const DisplayTokenOverlay: FC<Props> = props => {
           alignItems={AlignItems.Stretch}
         >
           <Alert icon={IconFont.AlertTriangle} color={ComponentColor.Primary}>
-            Make sure to copy your new personal API token now. You won't be able
+            Make sure to copy your new custom API token now. You won't be able
             to see it again!
           </Alert>
 

src/authorizations/components/redesigned/TokensTab.tsx

@@ -5,7 +5,18 @@ import {withRouter, RouteComponentProps} from 'react-router-dom'
 import {isEmpty} from 'lodash'
 
 // Components
-import {Sort, ComponentSize, EmptyState} from '@influxdata/clockface'
+import {
+  Sort,
+  ComponentSize,
+  EmptyState,
+  FlexBox,
+  FlexDirection,
+  AlignItems,
+  BannerPanel,
+  Gradients,
+  IconFont,
+  InfluxColors,
+} from '@influxdata/clockface'
 import SearchWidget from 'src/shared/components/search_widget/SearchWidget'
 import {TokenList} from 'src/authorizations/components/redesigned/TokenList'
 import FilterList from 'src/shared/components/FilterList'
@@ -19,6 +30,7 @@ import {SortTypes} from 'src/shared/utils/sort'
 
 // Selectors
 import {getAll} from 'src/resources/selectors'
+import PostDeploymentTokensBanner from '../PostDeploymentTokensBanner'
 
 enum AuthSearchKeys {
   Description = 'description',
@@ -80,7 +92,20 @@ class TokensTab extends PureComponent<Props, State> {
     const rightHeaderItems = <GenerateTokenDropdown />
 
     return (
-      <>
+      <FlexBox
+        direction={FlexDirection.Column}
+        alignItems={AlignItems.Center}
+        margin={ComponentSize.Large}
+      >
+        <BannerPanel
+          size={ComponentSize.ExtraSmall}
+          gradient={Gradients.PolarExpress}
+          icon={IconFont.Bell}
+          hideMobileIcon={true}
+          textColor={InfluxColors.Yeti}
+        >
+          <PostDeploymentTokensBanner />
+        </BannerPanel>
         <TabbedPageHeader
           childrenLeft={leftHeaderItems}
           childrenRight={rightHeaderItems}
@@ -102,7 +127,7 @@ class TokensTab extends PureComponent<Props, State> {
             />
           )}
         </FilterAuthorizations>
-      </>
+      </FlexBox>
     )
   }
 

src/authorizations/pagination/TokensTab.tsx

@@ -23,6 +23,7 @@ import GenerateTokenDropdown from 'src/authorizations/components/GenerateTokenDr
 import GenerateTokenDropdownRedesigned from 'src/authorizations/components/redesigned/GenerateTokenDropdown'
 import ResourceSortDropdown from 'src/shared/components/resource_sort_dropdown/ResourceSortDropdown'
 import TokensRedesignBanner from 'src/authorizations/components/TokensRedesignBanner'
+import PostDeploymentTokensBanner from 'src/authorizations/components/PostDeploymentTokensBanner'
 
 // Types
 import {AppState, Authorization, ResourceType} from 'src/types'
@@ -133,21 +134,23 @@ class TokensTab extends PureComponent<Props, State> {
     }
 
     const tokensBanner = () => {
-      if (!isFlagEnabled('tokensUIRedesign')) {
-        return (
-          <>
-            <BannerPanel
-              size={ComponentSize.ExtraSmall}
-              gradient={Gradients.PolarExpress}
-              icon={IconFont.Bell}
-              hideMobileIcon={true}
-              textColor={InfluxColors.Yeti}
-            >
+      return (
+        <>
+          <BannerPanel
+            size={ComponentSize.ExtraSmall}
+            gradient={Gradients.PolarExpress}
+            icon={IconFont.Bell}
+            hideMobileIcon={true}
+            textColor={InfluxColors.Yeti}
+          >
+            {isFlagEnabled('tokensUIRedesign') ? (
+              <PostDeploymentTokensBanner />
+            ) : (
               <TokensRedesignBanner />
-            </BannerPanel>
-          </>
-        )
-      }
+            )}
+          </BannerPanel>
+        </>
+      )
     }
 
     return (
@@ -156,19 +159,12 @@ class TokensTab extends PureComponent<Props, State> {
         <AutoSizer>
           {({width, height}) => {
             // if tokens redesign flag is off, adjust the page height so the banner doesn't push the pagination controller off
-            let heightWithPagination
-            isFlagEnabled('tokensUIRedesign')
-              ? (heightWithPagination =
-                  this.paginationRef?.current?.clientHeight +
-                    DEFAULT_TAB_NAVIGATION_HEIGHT ||
-                  DEFAULT_PAGINATION_CONTROL_HEIGHT +
-                    DEFAULT_TAB_NAVIGATION_HEIGHT)
-              : (heightWithPagination =
-                  this.paginationRef?.current?.clientHeight +
-                    DEFAULT_TAB_NAVIGATION_HEIGHT ||
-                  DEFAULT_PAGINATION_CONTROL_HEIGHT +
-                    DEFAULT_TAB_NAVIGATION_HEIGHT +
-                    DEFAULT_ALERT_HEIGHT)
+            const heightWithPagination =
+              this.paginationRef?.current?.clientHeight +
+                DEFAULT_TAB_NAVIGATION_HEIGHT ||
+              DEFAULT_PAGINATION_CONTROL_HEIGHT +
+                DEFAULT_TAB_NAVIGATION_HEIGHT +
+                DEFAULT_ALERT_HEIGHT
 
             const adjustedHeight = height - heightWithPagination
             return (