fix: scrollbar for dashboard, settings, load data and task page is Large (#3149)

Author: ChitlangeSahas

cypress/e2e/shared/simpleTable.test.ts

@@ -79,7 +79,7 @@ describe('simple table interactions', () => {
       .within(() => {
         cy.getByTestID('button').should(
           'have.class',
-          'cf-button cf-button-md cf-button-tertiary cf-button-square active'
+          'cf-button cf-button-md cf-button-tertiary active'
         )
       })
     // verify correct number of pages
@@ -145,7 +145,7 @@ describe('simple table interactions', () => {
       .within(() => {
         cy.getByTestID('button').should(
           'have.class',
-          'cf-button cf-button-md cf-button-tertiary cf-button-square active'
+          'cf-button cf-button-md cf-button-tertiary active'
         )
       })
     // verify correct number of pages

package.json

@@ -158,7 +158,7 @@
   },
   "dependencies": {
     "@docsearch/react": "^3.0.0-alpha.37",
-    "@influxdata/clockface": "^3.1.0",
+    "@influxdata/clockface": "^3.1.3",
     "@influxdata/flux": "^0.5.1",
     "@influxdata/flux-lsp-browser": "^0.5.53",
     "@influxdata/giraffe": "^2.20.0",

src/dashboards/components/dashboard_index/DashboardsIndex.tsx

@@ -1,15 +1,14 @@
 // Libraries
 import React, {PureComponent} from 'react'
-import {RouteComponentProps} from 'react-router-dom'
+import {Route, RouteComponentProps, Switch} from 'react-router-dom'
 import {connect, ConnectedProps} from 'react-redux'
-import {Switch, Route} from 'react-router-dom'
 
 // Decorators
 import {ErrorHandling} from 'src/shared/decorators/errors'
 
 // Components
 import DashboardsIndexContents from 'src/dashboards/components/dashboard_index/DashboardsIndexContents'
-import {Page} from '@influxdata/clockface'
+import {ComponentSize, Page, Sort} from '@influxdata/clockface'
 import SearchWidget from 'src/shared/components/search_widget/SearchWidget'
 import AddResourceDropdown from 'src/shared/components/AddResourceDropdown'
 import GetAssetLimits from 'src/cloud/components/GetAssetLimits'
@@ -29,7 +28,6 @@ import {setDashboardSort, setSearchTerm} from 'src/dashboards/actions/creators'
 
 // Types
 import {AppState, ResourceType} from 'src/types'
-import {Sort} from '@influxdata/clockface'
 import {SortTypes} from 'src/shared/utils/sort'
 import {DashboardSortKey} from 'src/shared/components/resource_sort_dropdown/generateSortItems'
 
@@ -102,6 +100,8 @@ class DashboardIndex extends PureComponent<Props, State> {
               className="dashboards-index__page-contents"
               fullWidth={false}
               scrollable={true}
+              scrollbarSize={ComponentSize.Large}
+              autoHideScrollbar={true}
             >
               <GetAssetLimits>
                 <DashboardsIndexContents

src/settings/components/LoadDataTabbedPage.tsx

@@ -5,7 +5,7 @@ import {connect, ConnectedProps} from 'react-redux'
 // Components
 import ErrorBoundary from 'src/shared/components/ErrorBoundary'
 import LoadDataNavigation from 'src/settings/components/LoadDataNavigation'
-import {Tabs, Orientation, Page} from '@influxdata/clockface'
+import {ComponentSize, Orientation, Page, Tabs} from '@influxdata/clockface'
 
 // Utils
 import {getOrg} from 'src/organizations/selectors'
@@ -28,6 +28,8 @@ const LoadDataTabbedPage: FC<Props> = ({activeTab, orgID, children}) => {
     <Page.Contents
       fullWidth={false}
       scrollable={shouldPageBeScrollable(activeTab)}
+      scrollbarSize={ComponentSize.Large}
+      autoHideScrollbar={true}
     >
       <Tabs.Container
         orientation={Orientation.Horizontal}

src/settings/components/SettingsTabbedPage.tsx

@@ -3,7 +3,7 @@ import React, {PureComponent} from 'react'
 
 // Components
 import SettingsNavigation from 'src/settings/components/SettingsNavigation'
-import {Tabs, Orientation, Page} from '@influxdata/clockface'
+import {ComponentSize, Orientation, Page, Tabs} from '@influxdata/clockface'
 
 // Decorators
 import {ErrorHandling} from 'src/shared/decorators/errors'
@@ -19,7 +19,12 @@ class SettingsTabbedPage extends PureComponent<Props> {
     const {activeTab, orgID, children} = this.props
 
     return (
-      <Page.Contents fullWidth={false} scrollable={true}>
+      <Page.Contents
+        fullWidth={false}
+        scrollable={true}
+        scrollbarSize={ComponentSize.Large}
+        autoHideScrollbar={true}
+      >
         <Tabs.Container orientation={Orientation.Horizontal}>
           <SettingsNavigation activeTab={activeTab} orgID={orgID} />
           <Tabs.TabContents>{children}</Tabs.TabContents>

src/tasks/containers/TasksPage.tsx

@@ -1,12 +1,12 @@
 // Libraries
 import React, {PureComponent} from 'react'
 import {connect, ConnectedProps} from 'react-redux'
-import {Switch, Route} from 'react-router-dom'
+import {Route, RouteComponentProps, Switch} from 'react-router-dom'
 
 // Components
 import TasksHeader from 'src/tasks/components/TasksHeader'
 import TasksList from 'src/tasks/components/TasksList'
-import {Page} from '@influxdata/clockface'
+import {ComponentSize, Page, Sort} from '@influxdata/clockface'
 import {ErrorHandling} from 'src/shared/decorators/errors'
 import FilterList from 'src/shared/components/FilterList'
 import GetResources from 'src/resources/components/GetResources'
@@ -20,12 +20,12 @@ import {isFlagEnabled} from 'src/shared/utils/featureFlag'
 
 // Actions
 import {
-  updateTaskStatus,
-  updateTaskName,
-  deleteTask,
-  cloneTask,
   addTaskLabel,
+  cloneTask,
+  deleteTask,
   runTask,
+  updateTaskName,
+  updateTaskStatus,
 } from 'src/tasks/actions/thunks'
 
 import {
@@ -36,9 +36,7 @@ import {
 import {checkTaskLimits as checkTasksLimitsAction} from 'src/cloud/actions/limits'
 
 // Types
-import {AppState, Task, ResourceType} from 'src/types'
-import {RouteComponentProps} from 'react-router-dom'
-import {Sort} from '@influxdata/clockface'
+import {AppState, ResourceType, Task} from 'src/types'
 import {SortTypes} from 'src/shared/utils/sort'
 import {extractTaskLimits} from 'src/cloud/utils/limits'
 import {TaskSortKey} from 'src/shared/components/resource_sort_dropdown/generateSortItems'
@@ -105,7 +103,12 @@ class TasksPage extends PureComponent<Props, State> {
             sortType={sortType}
             onSort={this.handleSort}
           />
-          <Page.Contents fullWidth={false} scrollable={true}>
+          <Page.Contents
+            fullWidth={false}
+            scrollable={true}
+            scrollbarSize={ComponentSize.Large}
+            autoHideScrollbar={true}
+          >
             <GetResources resources={[ResourceType.Tasks, ResourceType.Labels]}>
               <GetAssetLimits>
                 <Filter

yarn.lock

@@ -855,10 +855,10 @@
     "@docsearch/css" "3.0.0-alpha.37"
     algoliasearch "^4.0.0"
 
-"@influxdata/clockface@^3.1.0":
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/@influxdata/clockface/-/clockface-3.1.0.tgz#71607eb036a16d2da2af4df4a42a1d5cf6b127f1"
-  integrity sha512-2J9xPVtEa3VncRzD1CRGSaTuy5eSDUSOxvEqlx1j9kqGHNwk026bG/mvEAGY9RrDBe42NZQak906IIp6YvO95g==
+"@influxdata/clockface@^3.1.3":
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/@influxdata/clockface/-/clockface-3.1.3.tgz#d6e4484f55d323909fc06ccfc14dc689c334a823"
+  integrity sha512-0hAW+ZDsherbOTd+kUI57NFbgd8xp06he0vR3YtozmkO0pXHEF5YiDN+1i0OeMczJaF0gGVEF48i07nnzDjvkQ==
 
 "@influxdata/flux-lsp-browser@^0.5.53":
   version "0.5.53"