feat: adding Tokens banner to tokens pagination (#3412)

* feat: adding tokens banner to tokens pagination

* fix: remove banner from tokens redesigned

* fix: prettier

Author: blegesse-w

src/authorizations/pagination/TokensTab.tsx

@@ -6,14 +6,23 @@ import {isEmpty} from 'lodash'
 import {AutoSizer} from 'react-virtualized'
 
 // Components
-import {Sort, ComponentSize, EmptyState} from '@influxdata/clockface'
+import {
+  Sort,
+  ComponentSize,
+  EmptyState,
+  BannerPanel,
+  Gradients,
+  IconFont,
+  InfluxColors,
+} from '@influxdata/clockface'
 import SearchWidget from 'src/shared/components/search_widget/SearchWidget'
 import TokenList from 'src/authorizations/pagination/TokenList'
 import FilterList from 'src/shared/components/FilterList'
 import TabbedPageHeader from 'src/shared/components/tabbed_page/TabbedPageHeader'
 import GenerateTokenDropdown from 'src/authorizations/components/GenerateTokenDropdown'
 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'
 
 // Types
 import {AppState, Authorization, ResourceType} from 'src/types'
@@ -45,6 +54,7 @@ interface StateProps {
 
 const DEFAULT_PAGINATION_CONTROL_HEIGHT = 62
 const DEFAULT_TAB_NAVIGATION_HEIGHT = 62
+const DEFAULT_ALERT_HEIGHT = 100
 
 type SortKey = keyof Authorization
 
@@ -122,46 +132,79 @@ class TokensTab extends PureComponent<Props, State> {
       rightHeaderItems = <GenerateTokenDropdownRedesigned />
     }
 
+    const tokensBanner = () => {
+      if (!isFlagEnabled('tokensUIRedesign')) {
+        return (
+          <>
+            <BannerPanel
+              size={ComponentSize.ExtraSmall}
+              gradient={Gradients.PolarExpress}
+              icon={IconFont.Bell}
+              hideMobileIcon={true}
+              textColor={InfluxColors.Yeti}
+            >
+              <TokensRedesignBanner />
+            </BannerPanel>
+          </>
+        )
+      }
+    }
+
     return (
-      <AutoSizer>
-        {({width, height}) => {
-          const heightWithPagination =
-            this.paginationRef?.current?.clientHeight +
-              DEFAULT_TAB_NAVIGATION_HEIGHT ||
-            DEFAULT_PAGINATION_CONTROL_HEIGHT + DEFAULT_TAB_NAVIGATION_HEIGHT
-
-          const adjustedHeight = height - heightWithPagination
-          return (
-            <>
-              <TabbedPageHeader
-                childrenLeft={leftHeaderItems}
-                childrenRight={rightHeaderItems}
-                width={width}
-              />
-              <FilterAuthorizations
-                list={tokens}
-                searchTerm={searchTerm}
-                searchKeys={this.searchKeys}
-              >
-                {filteredAuths => (
-                  <TokenList
-                    tokenCount={tokens.length}
-                    auths={filteredAuths}
-                    emptyState={this.emptyState}
-                    pageWidth={width}
-                    pageHeight={adjustedHeight}
-                    searchTerm={searchTerm}
-                    sortKey={sortKey}
-                    sortDirection={sortDirection}
-                    sortType={sortType}
-                    onClickColumn={this.handleClickColumn}
+      <>
+        {tokensBanner()}
+        <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 adjustedHeight = height - heightWithPagination
+            return (
+              <>
+                <div style={{margin: '10px 0px'}}>
+                  <TabbedPageHeader
+                    childrenLeft={leftHeaderItems}
+                    childrenRight={rightHeaderItems}
+                    width={width}
                   />
-                )}
-              </FilterAuthorizations>
-            </>
-          )
-        }}
-      </AutoSizer>
+                  <FilterAuthorizations
+                    list={tokens}
+                    searchTerm={searchTerm}
+                    searchKeys={this.searchKeys}
+                  >
+                    {filteredAuths => (
+                      <TokenList
+                        tokenCount={tokens.length}
+                        auths={filteredAuths}
+                        emptyState={this.emptyState}
+                        pageWidth={width}
+                        pageHeight={adjustedHeight}
+                        searchTerm={searchTerm}
+                        sortKey={sortKey}
+                        sortDirection={sortDirection}
+                        sortType={sortType}
+                        onClickColumn={this.handleClickColumn}
+                      />
+                    )}
+                  </FilterAuthorizations>
+                </div>
+              </>
+            )
+          }}
+        </AutoSizer>
+      </>
     )
   }