Consolidate and standardize styles of resource renaming

Co-Authored-By: palakp41 <[email protected]>
influxdata · Feb 8, 2019 · 1a3e6cc · 1a3e6cc
1 parent c6dfe1a
commit 1a3e6cc
Show file tree

Hide file tree

Showing 15 changed files with 188 additions and 165 deletions.
diff --git a/ui/src/clockface/components/index_views/IndexList.scss b/ui/src/clockface/components/index_views/IndexList.scss
@@ -207,9 +207,3 @@
 .index-list--row-cell .index-list--cell a {
   white-space: nowrap;
 }
-
-.index-list--resource-name {
-  margin-left: 6px;
-  margin-right: $ix-marg-a + $ix-marg-b;
-  font-size: 17px;
-}
diff --git a/ui/src/dashboards/components/dashboard_index/DashboardsIndex.tsx b/ui/src/dashboards/components/dashboard_index/DashboardsIndex.tsx
@@ -146,6 +146,7 @@ class DashboardIndex extends PureComponent<Props, State> {
                 onEditLabels={this.handleStartEditingLabels}
                 notify={notify}
                 searchTerm={searchTerm}
+                showOwnerColumn={true}
               />
             </div>
           </Page.Contents>

diff --git a/ui/src/dashboards/components/dashboard_index/DashboardsIndexContents.tsx b/ui/src/dashboards/components/dashboard_index/DashboardsIndexContents.tsx
@@ -25,7 +25,7 @@ interface Props {
   onEditLabels: (dashboard: Dashboard) => void
   notify: (message: Notification) => void
   searchTerm: string
-  showInlineEdit?: boolean
+  showOwnerColumn: boolean
 }
 
 @ErrorHandling
@@ -42,7 +42,7 @@ export default class DashboardsIndexContents extends Component<Props> {
       onEditLabels,
       searchTerm,
       orgs,
-      showInlineEdit,
+      showOwnerColumn,
     } = this.props
 
     return (
@@ -58,7 +58,7 @@ export default class DashboardsIndexContents extends Component<Props> {
         onUpdateDashboard={onUpdateDashboard}
         onEditLabels={onEditLabels}
         orgs={orgs}
-        showInlineEdit={showInlineEdit}
+        showOwnerColumn={showOwnerColumn}
       />
     )
   }

diff --git a/ui/src/dashboards/components/dashboard_index/Table.tsx b/ui/src/dashboards/components/dashboard_index/Table.tsx
@@ -20,6 +20,10 @@ import SortingHat from 'src/shared/components/sorting_hat/SortingHat'
 import {Sort} from 'src/clockface'
 import {Dashboard, Organization} from 'src/types/v2'
 
+// Constants
+const OWNER_COL_WIDTH = 17
+const NAME_COL_WIDTH = 63
+
 interface Props {
   searchTerm: string
   dashboards: Dashboard[]
@@ -32,7 +36,7 @@ interface Props {
   onSetDefaultDashboard: (dashboardLink: string) => void
   onEditLabels: (dashboard: Dashboard) => void
   orgs: Organization[]
-  showInlineEdit?: boolean
+  showOwnerColumn: boolean
 }
 
 interface DatedDashboard extends Dashboard {
@@ -57,29 +61,22 @@ class DashboardsTable extends PureComponent<Props & WithRouterProps, State> {
 
   public render() {
     const {sortKey, sortDirection} = this.state
-    const headerKeys: SortKey[] = ['name', 'owner', 'modified', 'default']
 
     return (
       <IndexList>
         <IndexList.Header>
           <IndexList.HeaderCell
-            columnName={headerKeys[0]}
-            sortKey={headerKeys[0]}
-            sort={sortKey === headerKeys[0] ? sortDirection : Sort.None}
-            width="62%"
+            columnName={this.headerKeys[0]}
+            sortKey={this.headerKeys[0]}
+            sort={sortKey === this.headerKeys[0] ? sortDirection : Sort.None}
+            width={this.nameColWidth}
             onClick={this.handleClickColumn}
           />
+          {this.ownerColumnHeader}
           <IndexList.HeaderCell
-            columnName={headerKeys[1]}
-            sortKey={headerKeys[1]}
-            sort={sortKey === headerKeys[1] ? sortDirection : Sort.None}
-            width="17%"
-            onClick={this.handleClickColumn}
-          />
-          <IndexList.HeaderCell
-            columnName={headerKeys[2]}
-            sortKey={headerKeys[2]}
-            sort={sortKey === headerKeys[2] ? sortDirection : Sort.None}
+            columnName={this.headerKeys[2]}
+            sortKey={this.headerKeys[2]}
+            sort={sortKey === this.headerKeys[2] ? sortDirection : Sort.None}
             width="11%"
             onClick={this.handleClickColumn}
           />
@@ -96,6 +93,37 @@ class DashboardsTable extends PureComponent<Props & WithRouterProps, State> {
     )
   }
 
+  private get headerKeys(): SortKey[] {
+    return ['name', 'owner', 'modified', 'default']
+  }
+
+  private get ownerColumnHeader(): JSX.Element {
+    const {showOwnerColumn} = this.props
+    const {sortKey, sortDirection} = this.state
+
+    if (showOwnerColumn) {
+      return (
+        <IndexList.HeaderCell
+          columnName={this.headerKeys[1]}
+          sortKey={this.headerKeys[1]}
+          sort={sortKey === this.headerKeys[1] ? sortDirection : Sort.None}
+          width={`${OWNER_COL_WIDTH}%`}
+          onClick={this.handleClickColumn}
+        />
+      )
+    }
+  }
+
+  private get nameColWidth(): string {
+    const {showOwnerColumn} = this.props
+
+    if (showOwnerColumn) {
+      return `${NAME_COL_WIDTH}%`
+    }
+
+    return `${NAME_COL_WIDTH + OWNER_COL_WIDTH}%`
+  }
+
   private handleClickColumn = (nextSort: Sort, sortKey: SortKey) => {
     this.setState({sortKey, sortDirection: nextSort})
   }
@@ -109,7 +137,7 @@ class DashboardsTable extends PureComponent<Props & WithRouterProps, State> {
       onUpdateDashboard,
       onEditLabels,
       orgs,
-      showInlineEdit,
+      showOwnerColumn,
     } = this.props
 
     const {sortKey, sortDirection} = this.state
@@ -130,7 +158,7 @@ class DashboardsTable extends PureComponent<Props & WithRouterProps, State> {
               onUpdateDashboard={onUpdateDashboard}
               onEditLabels={onEditLabels}
               orgs={orgs}
-              showInlineEdit={showInlineEdit}
+              showOwnerColumn={showOwnerColumn}
             />
           )}
         </SortingHat>

diff --git a/ui/src/dashboards/components/dashboard_index/TableRow.test.tsx b/ui/src/dashboards/components/dashboard_index/TableRow.test.tsx
@@ -18,6 +18,7 @@ const setup = (override = {}) => {
     onExportDashboard: jest.fn(),
     onUpdateDashboard: jest.fn(),
     onEditLabels: jest.fn(),
+    showOwnerColumn: true,
     ...override,
   }
 

diff --git a/ui/src/dashboards/components/dashboard_index/TableRow.tsx b/ui/src/dashboards/components/dashboard_index/TableRow.tsx
@@ -1,7 +1,6 @@
 // Libraries
 import React, {PureComponent} from 'react'
 import {Link} from 'react-router'
-import classnames from 'classnames'
 
 // Components
 import {
@@ -37,7 +36,7 @@ interface Props {
   onExportDashboard: (dashboard: Dashboard) => void
   onUpdateDashboard: (dashboard: Dashboard) => void
   onEditLabels: (dashboard: Dashboard) => void
-  showInlineEdit?: boolean
+  showOwnerColumn: boolean
 }
 
 export default class DashboardsIndexTableRow extends PureComponent<Props> {
@@ -67,7 +66,7 @@ export default class DashboardsIndexTableRow extends PureComponent<Props> {
             />
           </ComponentSpacer>
         </IndexList.Cell>
-        <IndexList.Cell>{this.ownerName}</IndexList.Cell>
+        {this.ownerCell}
         {this.lastModifiedCell}
         <IndexList.Cell alignment={Alignment.Right} revealOnHover={true}>
           <ComponentSpacer align={Alignment.Left} stackChildren={Stack.Columns}>
@@ -91,21 +90,24 @@ export default class DashboardsIndexTableRow extends PureComponent<Props> {
     )
   }
 
-  private get resourceNames(): JSX.Element {
-    const {showInlineEdit, dashboard} = this.props
-    if (showInlineEdit) {
-      return (
-        <EditableName
-          onUpdate={this.handleUpdateDashboard}
-          name={dashboard.name}
-          hrefValue={`/dashboards/${dashboard.id}`}
-        />
-      )
+  private get ownerCell(): JSX.Element {
+    const {showOwnerColumn} = this.props
+
+    if (showOwnerColumn) {
+      return <IndexList.Cell>{this.ownerName}</IndexList.Cell>
     }
+  }
+
+  private get resourceNames(): JSX.Element {
+    const {dashboard} = this.props
+
     return (
-      <Link className={this.nameClassName} to={`/dashboards/${dashboard.id}`}>
-        {this.name}
-      </Link>
+      <EditableName
+        onUpdate={this.handleUpdateDashboard}
+        name={dashboard.name}
+        hrefValue={`/dashboards/${dashboard.id}`}
+        noNameString={DEFAULT_DASHBOARD_NAME}
+      />
     )
   }
 
@@ -120,7 +122,6 @@ export default class DashboardsIndexTableRow extends PureComponent<Props> {
       return (
         <Label.Container
           limitChildCount={4}
-          className="index-list--labels"
           onEdit={this.handleEditLabels}
           resourceName="this Dashboard"
         />
@@ -167,12 +168,6 @@ export default class DashboardsIndexTableRow extends PureComponent<Props> {
     onEditLabels(dashboard)
   }
 
-  private get name(): string {
-    const {dashboard} = this.props
-
-    return dashboard.name || DEFAULT_DASHBOARD_NAME
-  }
-
   private get ownerName(): JSX.Element {
     const {dashboard, orgs} = this.props
     const ownerOrg = orgs.find(o => o.id === dashboard.orgID)
@@ -184,17 +179,6 @@ export default class DashboardsIndexTableRow extends PureComponent<Props> {
     )
   }
 
-  private get nameClassName(): string {
-    const {dashboard} = this.props
-
-    const dashboardIsUntitled =
-      dashboard.name === '' || dashboard.name === DEFAULT_DASHBOARD_NAME
-
-    return classnames('index-list--resource-name', {
-      'untitled-name': dashboardIsUntitled,
-    })
-  }
-
   private handleUpdateDescription = (description: string): void => {
     const {onUpdateDashboard} = this.props
     const dashboard = {...this.props.dashboard, description}

diff --git a/ui/src/dashboards/components/dashboard_index/TableRows.tsx b/ui/src/dashboards/components/dashboard_index/TableRows.tsx
@@ -15,7 +15,7 @@ interface Props {
   onUpdateDashboard: (dashboard: Dashboard) => void
   onEditLabels: (dashboard: Dashboard) => void
   orgs: Organization[]
-  showInlineEdit?: boolean
+  showOwnerColumn: boolean
 }
 
 export default class DashboardsIndexTableRows extends PureComponent<Props> {
@@ -28,7 +28,7 @@ export default class DashboardsIndexTableRows extends PureComponent<Props> {
       onUpdateDashboard,
       onEditLabels,
       orgs,
-      showInlineEdit,
+      showOwnerColumn,
     } = this.props
 
     return dashboards.map(d => (
@@ -41,7 +41,7 @@ export default class DashboardsIndexTableRows extends PureComponent<Props> {
         onUpdateDashboard={onUpdateDashboard}
         onEditLabels={onEditLabels}
         orgs={orgs}
-        showInlineEdit={showInlineEdit}
+        showOwnerColumn={showOwnerColumn}
       />
     ))
   }

diff --git a/ui/src/dashboards/constants/index.ts b/ui/src/dashboards/constants/index.ts
@@ -89,6 +89,10 @@ type NewDefaultDashboard = Pick<
 >
 export const DEFAULT_CELL_NAME = 'Name this Cell'
 export const DEFAULT_DASHBOARD_NAME = 'Name this Dashboard'
+export const DEFAULT_BUCKET_NAME = 'Name this Bucket'
+export const DEFAULT_COLLECTOR_NAME = 'Name this Collector'
+export const DEFAULT_TASK_NAME = 'Name this Task'
+export const DEFAULT_SCRAPER_NAME = 'Name this Scraper'
 export const NEW_DASHBOARD: NewDefaultDashboard = {
   name: DEFAULT_DASHBOARD_NAME,
   cells: [NEW_DEFAULT_DASHBOARD_CELL],

diff --git a/ui/src/organizations/components/BucketRow.tsx b/ui/src/organizations/components/BucketRow.tsx
@@ -12,6 +12,9 @@ import {
   ComponentColor,
 } from 'src/clockface'
 
+// Constants
+import {DEFAULT_BUCKET_NAME} from 'src/dashboards/constants'
+
 // Types
 import {Bucket} from '@influxdata/influx'
 import {DataLoaderType} from 'src/types/v2/dataLoaders'
@@ -40,6 +43,7 @@ export default class BucketRow extends PureComponent<Props> {
               onUpdate={this.handleUpdateBucketName}
               name={bucket.name}
               onEditName={this.handleEditBucket}
+              noNameString={DEFAULT_BUCKET_NAME}
             />
           </IndexList.Cell>
           <IndexList.Cell>{bucket.ruleString}</IndexList.Cell>

diff --git a/ui/src/organizations/components/CollectorRow.tsx b/ui/src/organizations/components/CollectorRow.tsx
@@ -14,6 +14,9 @@ import {
 import {Telegraf} from '@influxdata/influx'
 import EditableName from 'src/shared/components/EditableName'
 
+// Constants
+import {DEFAULT_COLLECTOR_NAME} from 'src/dashboards/constants'
+
 interface Props {
   collector: Telegraf
   bucket: string
@@ -34,6 +37,7 @@ export default class CollectorRow extends PureComponent<Props> {
             <EditableName
               onUpdate={this.handleUpdateConfig}
               name={collector.name}
+              noNameString={DEFAULT_COLLECTOR_NAME}
             />
           </IndexList.Cell>
           <IndexList.Cell>{bucket}</IndexList.Cell>

diff --git a/ui/src/organizations/components/OrgDashboardIndex.tsx b/ui/src/organizations/components/OrgDashboardIndex.tsx
@@ -6,7 +6,7 @@ import {downloadTextFile} from 'src/shared/utils/download'
 import _ from 'lodash'
 
 // Components
-import DashboardsContents from 'src/dashboards/components/dashboard_index/DashboardIndexContents'
+import DashboardsIndexContents from 'src/dashboards/components/dashboard_index/DashboardsIndexContents'
 import {
   OverlayTechnology,
   Button,
@@ -133,7 +133,7 @@ class OrgDashboardIndex extends PureComponent<Props, State> {
             titleText="Create a new dashboard"
           />
         </TabbedPageHeader>
-        <DashboardsContents
+        <DashboardsIndexContents
           dashboards={dashboards}
           orgs={orgs}
           onSetDefaultDashboard={this.handleSetDefaultDashboard}
@@ -146,7 +146,7 @@ class OrgDashboardIndex extends PureComponent<Props, State> {
           onEditLabels={this.handleStartEditingLabels}
           notify={notify}
           searchTerm={searchTerm}
-          showInlineEdit={true}
+          showOwnerColumn={false}
         />
         {this.renderImportOverlay}
         {this.renderLabelEditorOverlay}

diff --git a/ui/src/organizations/components/ScraperRow.tsx b/ui/src/organizations/components/ScraperRow.tsx
@@ -11,6 +11,9 @@ import {
 import {ScraperTargetResponse} from '@influxdata/influx'
 import EditableName from 'src/shared/components/EditableName'
 
+// Constants
+import {DEFAULT_SCRAPER_NAME} from 'src/dashboards/constants'
+
 interface Props {
   scraper: ScraperTargetResponse
   onDeleteScraper: (scraper) => void
@@ -27,6 +30,7 @@ export default class ScraperRow extends PureComponent<Props> {
             <EditableName
               onUpdate={this.handleUpdateScraper}
               name={scraper.url}
+              noNameString={DEFAULT_SCRAPER_NAME}
             />
           </IndexList.Cell>
           <IndexList.Cell>{scraper.bucket}</IndexList.Cell>