From cf7ab909fb813365ba3544e1f4218a3e28bbe101 Mon Sep 17 00:00:00 2001
From: alexpaxton <alex@influxdata.com>
Date: Tue, 15 Jan 2019 15:56:15 -0800
Subject: [PATCH] Various Polish Stories (#11123)

* Decrease space below overlay headings

* Make panels contrast with background when nested in a tabbed page

* Improve styling of user settings page

* Improve styling of Labels and Tokens pages

* Polish Bucket overlays

* Link to org profile from dashboards list

* Refer to actual resource type instead of "This Resource"

* Link homepage card to collectors page

* Update test snapshots
---
 .../components/overlays/Overlay.scss          |   2 +-
 ui/src/clockface/components/panel/Panel.scss  |  11 +
 .../components/dashboard_index/TableRow.tsx   |  11 +-
 ui/src/me/components/GettingStarted.tsx       |  34 +-
 ui/src/me/components/account/Settings.tsx     |  30 +-
 ui/src/me/components/account/Tokens.tsx       |  54 +-
 ui/src/me/components/account/TokensList.tsx   |   6 +-
 .../__snapshots__/Settings.test.tsx.snap      | 144 +--
 .../__snapshots__/Tokens.test.tsx.snap        | 866 +++++++++---------
 .../components/BucketOverlayForm.tsx          |  29 +-
 .../components/CreateBucketOverlay.tsx        |   2 +-
 ui/src/organizations/components/Labels.tsx    |  19 +-
 ui/src/organizations/components/Retention.tsx |  40 +-
 .../components/RetentionDuration.tsx          |   8 +-
 .../components/UpdateBucketOverlay.tsx        |   6 +-
 ui/src/tasks/components/TaskRow.tsx           |   2 +-
 16 files changed, 664 insertions(+), 600 deletions(-)

diff --git a/ui/src/clockface/components/overlays/Overlay.scss b/ui/src/clockface/components/overlays/Overlay.scss
index 4f9a928fc3..57520a903c 100644
--- a/ui/src/clockface/components/overlays/Overlay.scss
+++ b/ui/src/clockface/components/overlays/Overlay.scss
@@ -121,6 +121,6 @@ $overlay-min-height: 150px;
 
 .overlay--body {
   padding: $overlay-gutter;
-  padding-top: 18px; 
+  padding-top: 0; 
   min-height: $overlay-min-height;
 }
diff --git a/ui/src/clockface/components/panel/Panel.scss b/ui/src/clockface/components/panel/Panel.scss
index bc480486df..8bccdfeb00 100644
--- a/ui/src/clockface/components/panel/Panel.scss
+++ b/ui/src/clockface/components/panel/Panel.scss
@@ -5,6 +5,7 @@
 
 $panel-gutter: $ix-marg-b * 2;
 $panel-background: $g3-castle;
+$panel-nested-background: $g4-onyx;
 
 .panel {
   display: flex;
@@ -55,3 +56,13 @@ $panel-background: $g3-castle;
 .panel-body hr {
   margin: $ix-marg-c 0;
 }
+
+//  Panels Nested inside Tabbed Pages
+//  ----------------------------------------------------------------------------
+.tabbed-page .panel {
+  background-color: $panel-nested-background;
+
+  .panel-footer {
+    background-color: mix($panel-nested-background, $g3-castle, 50%);
+  }
+}
diff --git a/ui/src/dashboards/components/dashboard_index/TableRow.tsx b/ui/src/dashboards/components/dashboard_index/TableRow.tsx
index 7a871c713d..1216c7c2ad 100644
--- a/ui/src/dashboards/components/dashboard_index/TableRow.tsx
+++ b/ui/src/dashboards/components/dashboard_index/TableRow.tsx
@@ -98,6 +98,7 @@ export default class DashboardsIndexTableRow extends PureComponent<Props> {
           limitChildCount={4}
           className="index-list--labels"
           onEdit={this.handleEditLabels}
+          resourceName="this Dashboard"
         />
       )
     }
@@ -107,6 +108,7 @@ export default class DashboardsIndexTableRow extends PureComponent<Props> {
         limitChildCount={4}
         className="index-list--labels"
         onEdit={this.handleEditLabels}
+        resourceName="this Dashboard"
       >
         {dashboard.labels.map(label => (
           <Label
@@ -147,10 +149,15 @@ export default class DashboardsIndexTableRow extends PureComponent<Props> {
     return dashboard.name || DEFAULT_DASHBOARD_NAME
   }
 
-  private get ownerName(): string {
+  private get ownerName(): JSX.Element {
     const {dashboard, orgs} = this.props
     const ownerOrg = orgs.find(o => o.id === dashboard.orgID)
-    return ownerOrg.name
+
+    return (
+      <Link to={`/organizations/${dashboard.orgID}/members_tab`}>
+        {ownerOrg.name}
+      </Link>
+    )
   }
 
   private get nameClassName(): string {
diff --git a/ui/src/me/components/GettingStarted.tsx b/ui/src/me/components/GettingStarted.tsx
index 9b9b56d3f4..c6c5b271f4 100644
--- a/ui/src/me/components/GettingStarted.tsx
+++ b/ui/src/me/components/GettingStarted.tsx
@@ -1,6 +1,7 @@
 // Libraries
 import React, {PureComponent} from 'react'
 import {Link} from 'react-router'
+import {connect} from 'react-redux'
 
 // Components
 import GradientBorder from 'src/shared/components/cells/GradientBorder'
@@ -8,15 +9,25 @@ import DashboardingGraphic from 'src/me/graphics/DashboardingGraphic'
 import ExploreGraphic from 'src/me/graphics/ExploreGraphic'
 import CollectorGraphic from 'src/me/graphics/CollectorGraphic'
 
+// Types
+import {Organization} from 'src/types/v2'
+
 // Styles
 import 'src/me/components/GettingStarted.scss'
 
-export default class GettingStarted extends PureComponent {
+interface StateProps {
+  orgs: Organization[]
+}
+
+class GettingStarted extends PureComponent<StateProps> {
   public render() {
     return (
       <div className="getting-started">
         <div className="getting-started--container">
-          <Link to={`/data-explorer`} className="getting-started--card">
+          <Link
+            to={this.firstOrgCollectorLink}
+            className="getting-started--card"
+          >
             <GradientBorder />
             <CollectorGraphic />
             <h3 className="getting-started--title">
@@ -50,4 +61,23 @@ export default class GettingStarted extends PureComponent {
       </div>
     )
   }
+
+  private get firstOrgCollectorLink(): string {
+    const {orgs} = this.props
+
+    const firstOrgID = orgs[0].id
+
+    return `/organizations/${firstOrgID}/collectors_tab`
+  }
 }
+
+const mstp = (state): StateProps => {
+  const {orgs} = state
+
+  return {orgs}
+}
+
+export default connect<StateProps>(
+  mstp,
+  null
+)(GettingStarted)
diff --git a/ui/src/me/components/account/Settings.tsx b/ui/src/me/components/account/Settings.tsx
index f6c14df851..b84fa0a752 100644
--- a/ui/src/me/components/account/Settings.tsx
+++ b/ui/src/me/components/account/Settings.tsx
@@ -35,15 +35,15 @@ export class Settings extends PureComponent<StateProps, State> {
     const {me} = this.state
 
     return (
-      <Panel>
-        <Panel.Header title="About Me">
-          <Button text="Edit About Me" />
-        </Panel.Header>
-        <Panel.Body>
-          <Form>
-            <Grid>
-              <Grid.Row>
-                <Grid.Column widthXS={Columns.Six}>
+      <Grid>
+        <Grid.Row>
+          <Grid.Column widthXS={Columns.Six}>
+            <Panel>
+              <Panel.Header title="About Me">
+                <Button text="Edit About Me" />
+              </Panel.Header>
+              <Panel.Body>
+                <Form>
                   <Form.Element label="Username">
                     <Input
                       value={me.name}
@@ -54,12 +54,12 @@ export class Settings extends PureComponent<StateProps, State> {
                       onChange={this.handleChangeInput}
                     />
                   </Form.Element>
-                </Grid.Column>
-              </Grid.Row>
-            </Grid>
-          </Form>
-        </Panel.Body>
-      </Panel>
+                </Form>
+              </Panel.Body>
+            </Panel>
+          </Grid.Column>
+        </Grid.Row>
+      </Grid>
     )
   }
 
diff --git a/ui/src/me/components/account/Tokens.tsx b/ui/src/me/components/account/Tokens.tsx
index caf4ca852b..c9452e4677 100644
--- a/ui/src/me/components/account/Tokens.tsx
+++ b/ui/src/me/components/account/Tokens.tsx
@@ -3,10 +3,11 @@ import React, {PureComponent, ChangeEvent} from 'react'
 import {connect} from 'react-redux'
 
 // Components
-import {Panel, Input, Spinner} from 'src/clockface'
+import {IconFont, Input, Spinner} from 'src/clockface'
 import ResourceFetcher from 'src/shared/components/resource_fetcher'
 import TokenList from 'src/me/components/account/TokensList'
 import FilterList from 'src/shared/components/Filter'
+import TabbedPageHeader from 'src/shared/components/tabbed_page/TabbedPageHeader'
 
 // APIs
 import {getAuthorizations} from 'src/authorizations/apis'
@@ -44,37 +45,36 @@ export class Tokens extends PureComponent<Props, State> {
     const {searchTerm} = this.state
 
     return (
-      <Panel>
-        <Panel.Body>
+      <>
+        <TabbedPageHeader>
           <Input
+            icon={IconFont.Search}
             value={searchTerm}
-            placeholder="Filter tokens by column"
+            placeholder="Filter Tokens..."
             onChange={this.handleChangeSearchTerm}
             widthPixels={256}
           />
-        </Panel.Body>
-        <Panel.Body>
-          <ResourceFetcher<Authorization[]> fetcher={getAuthorizations}>
-            {(fetchedAuths, loading) => (
-              <Spinner loading={loading}>
-                <FilterList<Authorization>
-                  list={fetchedAuths}
-                  searchTerm={searchTerm}
-                  searchKeys={this.searchKeys}
-                >
-                  {filteredAuths => (
-                    <TokenList
-                      auths={filteredAuths}
-                      onNotify={onNotify}
-                      searchTerm={searchTerm}
-                    />
-                  )}
-                </FilterList>
-              </Spinner>
-            )}
-          </ResourceFetcher>
-        </Panel.Body>
-      </Panel>
+        </TabbedPageHeader>
+        <ResourceFetcher<Authorization[]> fetcher={getAuthorizations}>
+          {(fetchedAuths, loading) => (
+            <Spinner loading={loading}>
+              <FilterList<Authorization>
+                list={fetchedAuths}
+                searchTerm={searchTerm}
+                searchKeys={this.searchKeys}
+              >
+                {filteredAuths => (
+                  <TokenList
+                    auths={filteredAuths}
+                    onNotify={onNotify}
+                    searchTerm={searchTerm}
+                  />
+                )}
+              </FilterList>
+            </Spinner>
+          )}
+        </ResourceFetcher>
+      </>
     )
   }
 
diff --git a/ui/src/me/components/account/TokensList.tsx b/ui/src/me/components/account/TokensList.tsx
index aee738520b..69627f458d 100644
--- a/ui/src/me/components/account/TokensList.tsx
+++ b/ui/src/me/components/account/TokensList.tsx
@@ -82,11 +82,13 @@ export default class TokenList extends PureComponent<Props, State> {
 
   private get emptyState(): JSX.Element {
     const {searchTerm} = this.props
-    let emptyStateText = 'Could not find any tokens'
+    let emptyStateText =
+      'There are not any Tokens associated with this account. Contact your administrator'
 
     if (searchTerm) {
-      emptyStateText = 'Looks like no tokens match your search term'
+      emptyStateText = 'No Tokens match your search term'
     }
+
     return (
       <EmptyState size={ComponentSize.Large}>
         <EmptyState.Text text={emptyStateText} />
diff --git a/ui/src/me/components/account/__snapshots__/Settings.test.tsx.snap b/ui/src/me/components/account/__snapshots__/Settings.test.tsx.snap
index 10c377f2f7..3770e38ebe 100644
--- a/ui/src/me/components/account/__snapshots__/Settings.test.tsx.snap
+++ b/ui/src/me/components/account/__snapshots__/Settings.test.tsx.snap
@@ -13,81 +13,81 @@ exports[`Account rendering renders! 1`] = `
     }
   }
 >
-  <Panel>
+  <Grid>
     <div
-      className="panel"
+      className="grid--container"
     >
-      <PanelHeader
-        title="About Me"
+      <Select
+        type={[Function]}
       >
-        <div
-          className="panel-header"
+        <GridRow
+          key=".0"
         >
           <div
-            className="panel-title"
+            className="grid--row"
           >
-            About Me
-          </div>
-          <div
-            className="panel-controls"
-          >
-            <ComponentSpacer
-              align="right"
+            <GridColumn
+              widthXS={6}
             >
               <div
-                className="component-spacer component-spacer--right component-spacer--horizontal"
+                className="grid--column col-xs-6"
               >
-                <Button
-                  active={false}
-                  color="default"
-                  shape="none"
-                  size="sm"
-                  status="default"
-                  text="Edit About Me"
-                  type="button"
-                >
-                  <button
-                    className="button button-sm button-default"
-                    disabled={false}
-                    tabIndex={0}
-                    title="Edit About Me"
-                    type="button"
+                <Panel>
+                  <div
+                    className="panel"
                   >
-                    Edit About Me
-                  </button>
-                </Button>
-              </div>
-            </ComponentSpacer>
-          </div>
-        </div>
-      </PanelHeader>
-      <PanelBody>
-        <div
-          className="panel-body"
-        >
-          <Form>
-            <form
-              className="form--wrapper"
-              onSubmit={[Function]}
-            >
-              <Grid>
-                <div
-                  className="grid--container"
-                >
-                  <Select
-                    type={[Function]}
-                  >
-                    <GridRow
-                      key=".0"
+                    <PanelHeader
+                      title="About Me"
                     >
                       <div
-                        className="grid--row"
+                        className="panel-header"
                       >
-                        <GridColumn
-                          widthXS={6}
+                        <div
+                          className="panel-title"
                         >
-                          <div
-                            className="grid--column col-xs-6"
+                          About Me
+                        </div>
+                        <div
+                          className="panel-controls"
+                        >
+                          <ComponentSpacer
+                            align="right"
+                          >
+                            <div
+                              className="component-spacer component-spacer--right component-spacer--horizontal"
+                            >
+                              <Button
+                                active={false}
+                                color="default"
+                                shape="none"
+                                size="sm"
+                                status="default"
+                                text="Edit About Me"
+                                type="button"
+                              >
+                                <button
+                                  className="button button-sm button-default"
+                                  disabled={false}
+                                  tabIndex={0}
+                                  title="Edit About Me"
+                                  type="button"
+                                >
+                                  Edit About Me
+                                </button>
+                              </Button>
+                            </div>
+                          </ComponentSpacer>
+                        </div>
+                      </div>
+                    </PanelHeader>
+                    <PanelBody>
+                      <div
+                        className="panel-body"
+                      >
+                        <Form>
+                          <form
+                            className="form--wrapper"
+                            onSubmit={[Function]}
                           >
                             <FormElement
                               label="Username"
@@ -148,18 +148,18 @@ exports[`Account rendering renders! 1`] = `
                                 </Input>
                               </div>
                             </FormElement>
-                          </div>
-                        </GridColumn>
+                          </form>
+                        </Form>
                       </div>
-                    </GridRow>
-                  </Select>
-                </div>
-              </Grid>
-            </form>
-          </Form>
-        </div>
-      </PanelBody>
+                    </PanelBody>
+                  </div>
+                </Panel>
+              </div>
+            </GridColumn>
+          </div>
+        </GridRow>
+      </Select>
     </div>
-  </Panel>
+  </Grid>
 </Settings>
 `;
diff --git a/ui/src/me/components/account/__snapshots__/Tokens.test.tsx.snap b/ui/src/me/components/account/__snapshots__/Tokens.test.tsx.snap
index ac0469cdb1..ad78aefd0c 100644
--- a/ui/src/me/components/account/__snapshots__/Tokens.test.tsx.snap
+++ b/ui/src/me/components/account/__snapshots__/Tokens.test.tsx.snap
@@ -4,135 +4,250 @@ exports[`Account rendering renders! 1`] = `
 <Tokens
   authorizationsLink="api/v2/authorizations"
 >
-  <Panel>
+  <TabbedPageHeader>
     <div
-      className="panel"
+      className="tabbed-page-section--header"
     >
-      <PanelBody>
+      <Input
+        autoFocus={false}
+        autocomplete="off"
+        disabledTitleText="This input is disabled"
+        icon="search"
+        name=""
+        onChange={[Function]}
+        placeholder="Filter Tokens..."
+        size="sm"
+        spellCheck={false}
+        status="default"
+        titleText=""
+        value=""
+        widthPixels={256}
+      >
         <div
-          className="panel-body"
+          className="input input-sm input--has-icon"
+          style={
+            Object {
+              "width": "256px",
+            }
+          }
         >
-          <Input
+          <input
+            autoComplete="off"
             autoFocus={false}
-            autocomplete="off"
-            disabledTitleText="This input is disabled"
+            className="input-field"
+            disabled={false}
             name=""
             onChange={[Function]}
-            placeholder="Filter tokens by column"
-            size="sm"
+            placeholder="Filter Tokens..."
             spellCheck={false}
-            status="default"
-            titleText=""
+            title=""
             value=""
-            widthPixels={256}
-          >
-            <div
-              className="input input-sm"
-              style={
-                Object {
-                  "width": "256px",
-                }
-              }
-            >
-              <input
-                autoComplete="off"
-                autoFocus={false}
-                className="input-field"
-                disabled={false}
-                name=""
-                onChange={[Function]}
-                placeholder="Filter tokens by column"
-                spellCheck={false}
-                title=""
-                value=""
-              />
-              <div
-                className="input-shadow"
-              />
-            </div>
-          </Input>
+          />
+          <span
+            className="input-icon icon search"
+          />
+          <div
+            className="input-shadow"
+          />
         </div>
-      </PanelBody>
-      <PanelBody>
-        <div
-          className="panel-body"
+      </Input>
+    </div>
+  </TabbedPageHeader>
+  <ResourceFetcher
+    fetcher={[Function]}
+  >
+    <Spinner
+      loading="Done"
+    >
+      <FilterList
+        list={
+          Array [
+            Object {
+              "description": "im a token",
+              "id": "030444b11fb10000",
+              "links": Object {
+                "self": "/api/v2/authorizations/030444b11fb10000",
+                "user": "/api/v2/users/030444b10a710000",
+              },
+              "orgID": "030444b10a713000",
+              "permissions": Array [
+                Object {
+                  "action": "write",
+                  "resource": Object {
+                    "type": "orgs",
+                  },
+                },
+                Object {
+                  "action": "write",
+                  "resource": Object {
+                    "type": "buckets",
+                  },
+                },
+              ],
+              "status": "active",
+              "token": "ohEmfY80A9UsW_cicNXgOMIPIsUvU6K9YcpTfCPQE3NV8Y6nTsCwVghczATBPyQh96CoZkOW5DIKldya6Y84KA==",
+              "user": "watts",
+              "userID": "030444b10a710000",
+            },
+            Object {
+              "description": "im a token",
+              "id": "1",
+              "links": Object {
+                "self": "/api/v2/authorizations/030444b11fb10000",
+                "user": "/api/v2/users/030444b10a710000",
+              },
+              "orgID": "030444b10a713000",
+              "permissions": Array [
+                Object {
+                  "action": "write",
+                  "resource": Object {
+                    "type": "orgs",
+                  },
+                },
+                Object {
+                  "action": "write",
+                  "resource": Object {
+                    "type": "buckets",
+                  },
+                },
+              ],
+              "status": "active",
+              "token": "ohEmfY80A9UsW_cicNXgOMIPIsUvU6K9YcpTfCPQE3NV8Y6nTsCwVghczATBPyQh96CoZkOW5DIKldya6Y84KA==",
+              "user": "watts",
+              "userID": "030444b10a710000",
+            },
+          ]
+        }
+        searchKeys={
+          Array [
+            "status",
+            "description",
+          ]
+        }
+        searchTerm=""
+      >
+        <TokenList
+          auths={
+            Array [
+              Object {
+                "description": "im a token",
+                "id": "030444b11fb10000",
+                "links": Object {
+                  "self": "/api/v2/authorizations/030444b11fb10000",
+                  "user": "/api/v2/users/030444b10a710000",
+                },
+                "orgID": "030444b10a713000",
+                "permissions": Array [
+                  Object {
+                    "action": "write",
+                    "resource": Object {
+                      "type": "orgs",
+                    },
+                  },
+                  Object {
+                    "action": "write",
+                    "resource": Object {
+                      "type": "buckets",
+                    },
+                  },
+                ],
+                "status": "active",
+                "token": "ohEmfY80A9UsW_cicNXgOMIPIsUvU6K9YcpTfCPQE3NV8Y6nTsCwVghczATBPyQh96CoZkOW5DIKldya6Y84KA==",
+                "user": "watts",
+                "userID": "030444b10a710000",
+              },
+              Object {
+                "description": "im a token",
+                "id": "1",
+                "links": Object {
+                  "self": "/api/v2/authorizations/030444b11fb10000",
+                  "user": "/api/v2/users/030444b10a710000",
+                },
+                "orgID": "030444b10a713000",
+                "permissions": Array [
+                  Object {
+                    "action": "write",
+                    "resource": Object {
+                      "type": "orgs",
+                    },
+                  },
+                  Object {
+                    "action": "write",
+                    "resource": Object {
+                      "type": "buckets",
+                    },
+                  },
+                ],
+                "status": "active",
+                "token": "ohEmfY80A9UsW_cicNXgOMIPIsUvU6K9YcpTfCPQE3NV8Y6nTsCwVghczATBPyQh96CoZkOW5DIKldya6Y84KA==",
+                "user": "watts",
+                "userID": "030444b10a710000",
+              },
+            ]
+          }
+          searchTerm=""
         >
-          <ResourceFetcher
-            fetcher={[Function]}
-          >
-            <Spinner
-              loading="Done"
+          <IndexList>
+            <table
+              className="index-list"
             >
-              <FilterList
-                list={
-                  Array [
-                    Object {
-                      "description": "im a token",
-                      "id": "030444b11fb10000",
-                      "links": Object {
-                        "self": "/api/v2/authorizations/030444b11fb10000",
-                        "user": "/api/v2/users/030444b10a710000",
-                      },
-                      "orgID": "030444b10a713000",
-                      "permissions": Array [
-                        Object {
-                          "action": "write",
-                          "resource": Object {
-                            "type": "orgs",
-                          },
-                        },
-                        Object {
-                          "action": "write",
-                          "resource": Object {
-                            "type": "buckets",
-                          },
-                        },
-                      ],
-                      "status": "active",
-                      "token": "ohEmfY80A9UsW_cicNXgOMIPIsUvU6K9YcpTfCPQE3NV8Y6nTsCwVghczATBPyQh96CoZkOW5DIKldya6Y84KA==",
-                      "user": "watts",
-                      "userID": "030444b10a710000",
-                    },
-                    Object {
-                      "description": "im a token",
-                      "id": "1",
-                      "links": Object {
-                        "self": "/api/v2/authorizations/030444b11fb10000",
-                        "user": "/api/v2/users/030444b10a710000",
-                      },
-                      "orgID": "030444b10a713000",
-                      "permissions": Array [
-                        Object {
-                          "action": "write",
-                          "resource": Object {
-                            "type": "orgs",
-                          },
-                        },
-                        Object {
-                          "action": "write",
-                          "resource": Object {
-                            "type": "buckets",
-                          },
-                        },
-                      ],
-                      "status": "active",
-                      "token": "ohEmfY80A9UsW_cicNXgOMIPIsUvU6K9YcpTfCPQE3NV8Y6nTsCwVghczATBPyQh96CoZkOW5DIKldya6Y84KA==",
-                      "user": "watts",
-                      "userID": "030444b10a710000",
-                    },
-                  ]
+              <IndexListHeader>
+                <thead
+                  className="index-list--header"
+                >
+                  <tr>
+                    <IndexListHeaderCell
+                      alignment="left"
+                      columnName="Description"
+                    >
+                      <th
+                        className="index-list--header-cell index-list--align-left"
+                        onClick={[Function]}
+                        style={
+                          Object {
+                            "width": undefined,
+                          }
+                        }
+                      >
+                        Description
+                      </th>
+                    </IndexListHeaderCell>
+                    <IndexListHeaderCell
+                      alignment="left"
+                      columnName="Status"
+                    >
+                      <th
+                        className="index-list--header-cell index-list--align-left"
+                        onClick={[Function]}
+                        style={
+                          Object {
+                            "width": undefined,
+                          }
+                        }
+                      >
+                        Status
+                      </th>
+                    </IndexListHeaderCell>
+                  </tr>
+                </thead>
+              </IndexListHeader>
+              <IndexListBody
+                columnCount={2}
+                emptyState={
+                  <EmptyState
+                    size="lg"
+                  >
+                    <EmptyStateText
+                      text="There are not any Tokens associated with this account. Contact your administrator"
+                    />
+                  </EmptyState>
                 }
-                searchKeys={
-                  Array [
-                    "status",
-                    "description",
-                  ]
-                }
-                searchTerm=""
               >
-                <TokenList
-                  auths={
-                    Array [
+                <tbody
+                  className="index-list--body"
+                >
+                  <TokenRow
+                    auth={
                       Object {
                         "description": "im a token",
                         "id": "030444b11fb10000",
@@ -159,7 +274,96 @@ exports[`Account rendering renders! 1`] = `
                         "token": "ohEmfY80A9UsW_cicNXgOMIPIsUvU6K9YcpTfCPQE3NV8Y6nTsCwVghczATBPyQh96CoZkOW5DIKldya6Y84KA==",
                         "user": "watts",
                         "userID": "030444b10a710000",
-                      },
+                      }
+                    }
+                    key="030444b11fb10000"
+                    onClickDescription={[Function]}
+                  >
+                    <IndexListRow
+                      disabled={false}
+                    >
+                      <tr
+                        className="index-list--row"
+                      >
+                        <IndexListRowCell
+                          alignment="left"
+                          revealOnHover={false}
+                        >
+                          <td
+                            className="index-list--row-cell index-list--align-left"
+                          >
+                            <div
+                              className="index-list--cell"
+                            >
+                              <a
+                                data-test="token-description-030444b11fb10000"
+                                href="#"
+                                onClick={[Function]}
+                              >
+                                im a token
+                              </a>
+                            </div>
+                          </td>
+                        </IndexListRowCell>
+                        <IndexListRowCell
+                          alignment="left"
+                          revealOnHover={false}
+                        >
+                          <td
+                            className="index-list--row-cell index-list--align-left"
+                          >
+                            <div
+                              className="index-list--cell"
+                            >
+                              active
+                            </div>
+                          </td>
+                        </IndexListRowCell>
+                        <IndexListRowCell
+                          alignment="right"
+                          revealOnHover={true}
+                        >
+                          <td
+                            className="index-list--row-cell index-list--show-hover index-list--align-right"
+                          >
+                            <div
+                              className="index-list--cell"
+                            >
+                              <ComponentSpacer
+                                align="right"
+                              >
+                                <div
+                                  className="component-spacer component-spacer--right component-spacer--horizontal"
+                                >
+                                  <Button
+                                    active={false}
+                                    color="danger"
+                                    shape="none"
+                                    size="xs"
+                                    status="default"
+                                    text="Delete"
+                                    type="button"
+                                  >
+                                    <button
+                                      className="button button-xs button-danger"
+                                      disabled={false}
+                                      tabIndex={0}
+                                      title="Delete"
+                                      type="button"
+                                    >
+                                      Delete
+                                    </button>
+                                  </Button>
+                                </div>
+                              </ComponentSpacer>
+                            </div>
+                          </td>
+                        </IndexListRowCell>
+                      </tr>
+                    </IndexListRow>
+                  </TokenRow>
+                  <TokenRow
+                    auth={
                       Object {
                         "description": "im a token",
                         "id": "1",
@@ -186,328 +390,116 @@ exports[`Account rendering renders! 1`] = `
                         "token": "ohEmfY80A9UsW_cicNXgOMIPIsUvU6K9YcpTfCPQE3NV8Y6nTsCwVghczATBPyQh96CoZkOW5DIKldya6Y84KA==",
                         "user": "watts",
                         "userID": "030444b10a710000",
-                      },
-                    ]
-                  }
-                  searchTerm=""
-                >
-                  <IndexList>
-                    <table
-                      className="index-list"
-                    >
-                      <IndexListHeader>
-                        <thead
-                          className="index-list--header"
-                        >
-                          <tr>
-                            <IndexListHeaderCell
-                              alignment="left"
-                              columnName="Description"
-                            >
-                              <th
-                                className="index-list--header-cell index-list--align-left"
-                                onClick={[Function]}
-                                style={
-                                  Object {
-                                    "width": undefined,
-                                  }
-                                }
-                              >
-                                Description
-                              </th>
-                            </IndexListHeaderCell>
-                            <IndexListHeaderCell
-                              alignment="left"
-                              columnName="Status"
-                            >
-                              <th
-                                className="index-list--header-cell index-list--align-left"
-                                onClick={[Function]}
-                                style={
-                                  Object {
-                                    "width": undefined,
-                                  }
-                                }
-                              >
-                                Status
-                              </th>
-                            </IndexListHeaderCell>
-                          </tr>
-                        </thead>
-                      </IndexListHeader>
-                      <IndexListBody
-                        columnCount={2}
-                        emptyState={
-                          <EmptyState
-                            size="lg"
-                          >
-                            <EmptyStateText
-                              text="Could not find any tokens"
-                            />
-                          </EmptyState>
-                        }
-                      >
-                        <tbody
-                          className="index-list--body"
-                        >
-                          <TokenRow
-                            auth={
-                              Object {
-                                "description": "im a token",
-                                "id": "030444b11fb10000",
-                                "links": Object {
-                                  "self": "/api/v2/authorizations/030444b11fb10000",
-                                  "user": "/api/v2/users/030444b10a710000",
-                                },
-                                "orgID": "030444b10a713000",
-                                "permissions": Array [
-                                  Object {
-                                    "action": "write",
-                                    "resource": Object {
-                                      "type": "orgs",
-                                    },
-                                  },
-                                  Object {
-                                    "action": "write",
-                                    "resource": Object {
-                                      "type": "buckets",
-                                    },
-                                  },
-                                ],
-                                "status": "active",
-                                "token": "ohEmfY80A9UsW_cicNXgOMIPIsUvU6K9YcpTfCPQE3NV8Y6nTsCwVghczATBPyQh96CoZkOW5DIKldya6Y84KA==",
-                                "user": "watts",
-                                "userID": "030444b10a710000",
-                              }
-                            }
-                            key="030444b11fb10000"
-                            onClickDescription={[Function]}
-                          >
-                            <IndexListRow
-                              disabled={false}
-                            >
-                              <tr
-                                className="index-list--row"
-                              >
-                                <IndexListRowCell
-                                  alignment="left"
-                                  revealOnHover={false}
-                                >
-                                  <td
-                                    className="index-list--row-cell index-list--align-left"
-                                  >
-                                    <div
-                                      className="index-list--cell"
-                                    >
-                                      <a
-                                        data-test="token-description-030444b11fb10000"
-                                        href="#"
-                                        onClick={[Function]}
-                                      >
-                                        im a token
-                                      </a>
-                                    </div>
-                                  </td>
-                                </IndexListRowCell>
-                                <IndexListRowCell
-                                  alignment="left"
-                                  revealOnHover={false}
-                                >
-                                  <td
-                                    className="index-list--row-cell index-list--align-left"
-                                  >
-                                    <div
-                                      className="index-list--cell"
-                                    >
-                                      active
-                                    </div>
-                                  </td>
-                                </IndexListRowCell>
-                                <IndexListRowCell
-                                  alignment="right"
-                                  revealOnHover={true}
-                                >
-                                  <td
-                                    className="index-list--row-cell index-list--show-hover index-list--align-right"
-                                  >
-                                    <div
-                                      className="index-list--cell"
-                                    >
-                                      <ComponentSpacer
-                                        align="right"
-                                      >
-                                        <div
-                                          className="component-spacer component-spacer--right component-spacer--horizontal"
-                                        >
-                                          <Button
-                                            active={false}
-                                            color="danger"
-                                            shape="none"
-                                            size="xs"
-                                            status="default"
-                                            text="Delete"
-                                            type="button"
-                                          >
-                                            <button
-                                              className="button button-xs button-danger"
-                                              disabled={false}
-                                              tabIndex={0}
-                                              title="Delete"
-                                              type="button"
-                                            >
-                                              Delete
-                                            </button>
-                                          </Button>
-                                        </div>
-                                      </ComponentSpacer>
-                                    </div>
-                                  </td>
-                                </IndexListRowCell>
-                              </tr>
-                            </IndexListRow>
-                          </TokenRow>
-                          <TokenRow
-                            auth={
-                              Object {
-                                "description": "im a token",
-                                "id": "1",
-                                "links": Object {
-                                  "self": "/api/v2/authorizations/030444b11fb10000",
-                                  "user": "/api/v2/users/030444b10a710000",
-                                },
-                                "orgID": "030444b10a713000",
-                                "permissions": Array [
-                                  Object {
-                                    "action": "write",
-                                    "resource": Object {
-                                      "type": "orgs",
-                                    },
-                                  },
-                                  Object {
-                                    "action": "write",
-                                    "resource": Object {
-                                      "type": "buckets",
-                                    },
-                                  },
-                                ],
-                                "status": "active",
-                                "token": "ohEmfY80A9UsW_cicNXgOMIPIsUvU6K9YcpTfCPQE3NV8Y6nTsCwVghczATBPyQh96CoZkOW5DIKldya6Y84KA==",
-                                "user": "watts",
-                                "userID": "030444b10a710000",
-                              }
-                            }
-                            key="1"
-                            onClickDescription={[Function]}
-                          >
-                            <IndexListRow
-                              disabled={false}
-                            >
-                              <tr
-                                className="index-list--row"
-                              >
-                                <IndexListRowCell
-                                  alignment="left"
-                                  revealOnHover={false}
-                                >
-                                  <td
-                                    className="index-list--row-cell index-list--align-left"
-                                  >
-                                    <div
-                                      className="index-list--cell"
-                                    >
-                                      <a
-                                        data-test="token-description-1"
-                                        href="#"
-                                        onClick={[Function]}
-                                      >
-                                        im a token
-                                      </a>
-                                    </div>
-                                  </td>
-                                </IndexListRowCell>
-                                <IndexListRowCell
-                                  alignment="left"
-                                  revealOnHover={false}
-                                >
-                                  <td
-                                    className="index-list--row-cell index-list--align-left"
-                                  >
-                                    <div
-                                      className="index-list--cell"
-                                    >
-                                      active
-                                    </div>
-                                  </td>
-                                </IndexListRowCell>
-                                <IndexListRowCell
-                                  alignment="right"
-                                  revealOnHover={true}
-                                >
-                                  <td
-                                    className="index-list--row-cell index-list--show-hover index-list--align-right"
-                                  >
-                                    <div
-                                      className="index-list--cell"
-                                    >
-                                      <ComponentSpacer
-                                        align="right"
-                                      >
-                                        <div
-                                          className="component-spacer component-spacer--right component-spacer--horizontal"
-                                        >
-                                          <Button
-                                            active={false}
-                                            color="danger"
-                                            shape="none"
-                                            size="xs"
-                                            status="default"
-                                            text="Delete"
-                                            type="button"
-                                          >
-                                            <button
-                                              className="button button-xs button-danger"
-                                              disabled={false}
-                                              tabIndex={0}
-                                              title="Delete"
-                                              type="button"
-                                            >
-                                              Delete
-                                            </button>
-                                          </Button>
-                                        </div>
-                                      </ComponentSpacer>
-                                    </div>
-                                  </td>
-                                </IndexListRowCell>
-                              </tr>
-                            </IndexListRow>
-                          </TokenRow>
-                        </tbody>
-                      </IndexListBody>
-                    </table>
-                  </IndexList>
-                  <OverlayTechnology
-                    visible={false}
+                      }
+                    }
+                    key="1"
+                    onClickDescription={[Function]}
                   >
-                    <div
-                      className="overlay-tech"
+                    <IndexListRow
+                      disabled={false}
                     >
-                      <div
-                        className="overlay--dialog"
-                        data-test="overlay-children"
-                      />
-                      <div
-                        className="overlay--mask"
-                      />
-                    </div>
-                  </OverlayTechnology>
-                </TokenList>
-              </FilterList>
-            </Spinner>
-          </ResourceFetcher>
-        </div>
-      </PanelBody>
-    </div>
-  </Panel>
+                      <tr
+                        className="index-list--row"
+                      >
+                        <IndexListRowCell
+                          alignment="left"
+                          revealOnHover={false}
+                        >
+                          <td
+                            className="index-list--row-cell index-list--align-left"
+                          >
+                            <div
+                              className="index-list--cell"
+                            >
+                              <a
+                                data-test="token-description-1"
+                                href="#"
+                                onClick={[Function]}
+                              >
+                                im a token
+                              </a>
+                            </div>
+                          </td>
+                        </IndexListRowCell>
+                        <IndexListRowCell
+                          alignment="left"
+                          revealOnHover={false}
+                        >
+                          <td
+                            className="index-list--row-cell index-list--align-left"
+                          >
+                            <div
+                              className="index-list--cell"
+                            >
+                              active
+                            </div>
+                          </td>
+                        </IndexListRowCell>
+                        <IndexListRowCell
+                          alignment="right"
+                          revealOnHover={true}
+                        >
+                          <td
+                            className="index-list--row-cell index-list--show-hover index-list--align-right"
+                          >
+                            <div
+                              className="index-list--cell"
+                            >
+                              <ComponentSpacer
+                                align="right"
+                              >
+                                <div
+                                  className="component-spacer component-spacer--right component-spacer--horizontal"
+                                >
+                                  <Button
+                                    active={false}
+                                    color="danger"
+                                    shape="none"
+                                    size="xs"
+                                    status="default"
+                                    text="Delete"
+                                    type="button"
+                                  >
+                                    <button
+                                      className="button button-xs button-danger"
+                                      disabled={false}
+                                      tabIndex={0}
+                                      title="Delete"
+                                      type="button"
+                                    >
+                                      Delete
+                                    </button>
+                                  </Button>
+                                </div>
+                              </ComponentSpacer>
+                            </div>
+                          </td>
+                        </IndexListRowCell>
+                      </tr>
+                    </IndexListRow>
+                  </TokenRow>
+                </tbody>
+              </IndexListBody>
+            </table>
+          </IndexList>
+          <OverlayTechnology
+            visible={false}
+          >
+            <div
+              className="overlay-tech"
+            >
+              <div
+                className="overlay--dialog"
+                data-test="overlay-children"
+              />
+              <div
+                className="overlay--mask"
+              />
+            </div>
+          </OverlayTechnology>
+        </TokenList>
+      </FilterList>
+    </Spinner>
+  </ResourceFetcher>
 </Tokens>
 `;
diff --git a/ui/src/organizations/components/BucketOverlayForm.tsx b/ui/src/organizations/components/BucketOverlayForm.tsx
index 5058e1d343..f75cc18ef2 100644
--- a/ui/src/organizations/components/BucketOverlayForm.tsx
+++ b/ui/src/organizations/components/BucketOverlayForm.tsx
@@ -60,25 +60,24 @@ export default class BucketOverlayForm extends PureComponent<Props> {
                 />
               </Form.Element>
             </Grid.Column>
-            <Grid.Column>
-              <Retention
-                type={ruleType}
-                retentionSeconds={retentionSeconds}
-                onChangeRuleType={onChangeRuleType}
-                onChangeRetentionRule={onChangeRetentionRule}
-              />
-            </Grid.Column>
+            <Retention
+              type={ruleType}
+              retentionSeconds={retentionSeconds}
+              onChangeRuleType={onChangeRuleType}
+              onChangeRetentionRule={onChangeRetentionRule}
+            />
+          </Grid.Row>
+          <Grid.Row>
             <Grid.Column>
               <Form.Footer>
                 <Button
                   text="Cancel"
-                  color={ComponentColor.Danger}
                   onClick={onCloseModal}
                   type={ButtonType.Button}
                 />
                 <Button
                   text={buttonText}
-                  color={ComponentColor.Primary}
+                  color={this.submitButtonColor}
                   type={ButtonType.Submit}
                 />
               </Form.Footer>
@@ -88,4 +87,14 @@ export default class BucketOverlayForm extends PureComponent<Props> {
       </Form>
     )
   }
+
+  private get submitButtonColor(): ComponentColor {
+    const {buttonText} = this.props
+
+    if (buttonText === 'Save Changes') {
+      return ComponentColor.Success
+    }
+
+    return ComponentColor.Primary
+  }
 }
diff --git a/ui/src/organizations/components/CreateBucketOverlay.tsx b/ui/src/organizations/components/CreateBucketOverlay.tsx
index 0256a36722..126d3739d9 100644
--- a/ui/src/organizations/components/CreateBucketOverlay.tsx
+++ b/ui/src/organizations/components/CreateBucketOverlay.tsx
@@ -47,7 +47,7 @@ export default class BucketOverlay extends PureComponent<Props, State> {
     const {bucket, nameInputStatus, errorMessage, ruleType} = this.state
 
     return (
-      <OverlayContainer>
+      <OverlayContainer maxWidth={500}>
         <OverlayHeading
           title="Create Bucket"
           onDismiss={this.props.onCloseModal}
diff --git a/ui/src/organizations/components/Labels.tsx b/ui/src/organizations/components/Labels.tsx
index b419f07de6..0d53af8bf4 100644
--- a/ui/src/organizations/components/Labels.tsx
+++ b/ui/src/organizations/components/Labels.tsx
@@ -213,15 +213,26 @@ class Labels extends PureComponent<Props, State> {
   private get emptyState(): JSX.Element {
     const {searchTerm} = this.state
 
-    let emptyText = 'No Labels were found'
-
     if (searchTerm) {
-      emptyText = 'No Labels match your search term'
+      return (
+        <EmptyState size={ComponentSize.Medium}>
+          <EmptyState.Text text="No Labels match your search term" />
+        </EmptyState>
+      )
     }
 
     return (
       <EmptyState size={ComponentSize.Medium}>
-        <EmptyState.Text text={emptyText} />
+        <EmptyState.Text
+          text="Looks like you haven't created any Labels , why not create one?"
+          highlightWords={['Labels']}
+        />
+        <Button
+          text="Create Label"
+          color={ComponentColor.Primary}
+          icon={IconFont.Plus}
+          onClick={this.handleShowOverlay}
+        />
       </EmptyState>
     )
   }
diff --git a/ui/src/organizations/components/Retention.tsx b/ui/src/organizations/components/Retention.tsx
index 4e82831f13..5dc139345f 100644
--- a/ui/src/organizations/components/Retention.tsx
+++ b/ui/src/organizations/components/Retention.tsx
@@ -2,7 +2,7 @@
 import React, {PureComponent, ChangeEvent} from 'react'
 
 // Components
-import {Form, Radio} from 'src/clockface'
+import {Grid, Form, Radio, ButtonShape} from 'src/clockface'
 import RetentionDuration from 'src/organizations/components/RetentionDuration'
 
 // Utils
@@ -27,24 +27,26 @@ export default class Retention extends PureComponent<Props> {
 
     return (
       <>
-        <Form.Element label="How often to clear data?">
-          <Radio>
-            <Radio.Button
-              active={type === BucketRetentionRules.TypeEnum.Expire}
-              onClick={this.handleRadioClick}
-              value={BucketRetentionRules.TypeEnum.Expire}
-            >
-              Periodically
-            </Radio.Button>
-            <Radio.Button
-              active={type === null}
-              onClick={this.handleRadioClick}
-              value={null}
-            >
-              Never
-            </Radio.Button>
-          </Radio>
-        </Form.Element>
+        <Grid.Column>
+          <Form.Element label="How often to clear data?">
+            <Radio shape={ButtonShape.StretchToFit}>
+              <Radio.Button
+                active={type === BucketRetentionRules.TypeEnum.Expire}
+                onClick={this.handleRadioClick}
+                value={BucketRetentionRules.TypeEnum.Expire}
+              >
+                Periodically
+              </Radio.Button>
+              <Radio.Button
+                active={type === null}
+                onClick={this.handleRadioClick}
+                value={null}
+              >
+                Never
+              </Radio.Button>
+            </Radio>
+          </Form.Element>
+        </Grid.Column>
         <RetentionDuration
           type={type}
           retentionSeconds={retentionSeconds}
diff --git a/ui/src/organizations/components/RetentionDuration.tsx b/ui/src/organizations/components/RetentionDuration.tsx
index 6f37c9e74f..2235fbfa9e 100644
--- a/ui/src/organizations/components/RetentionDuration.tsx
+++ b/ui/src/organizations/components/RetentionDuration.tsx
@@ -31,7 +31,7 @@ export default class RetentionDuration extends PureComponent<Props> {
 
     return (
       <>
-        <Grid.Column widthXS={Columns.Two}>
+        <Grid.Column widthSM={Columns.Three}>
           <Form.Element label="Days">
             <Input
               name={DurationKey.Days}
@@ -41,7 +41,7 @@ export default class RetentionDuration extends PureComponent<Props> {
             />
           </Form.Element>
         </Grid.Column>
-        <Grid.Column widthXS={Columns.Two}>
+        <Grid.Column widthSM={Columns.Three}>
           <Form.Element label="Hours">
             <Input
               name={DurationKey.Hours}
@@ -52,7 +52,7 @@ export default class RetentionDuration extends PureComponent<Props> {
             />
           </Form.Element>
         </Grid.Column>
-        <Grid.Column widthXS={Columns.Two}>
+        <Grid.Column widthSM={Columns.Three}>
           <Form.Element label="Minutes">
             <Input
               name={DurationKey.Minutes}
@@ -63,7 +63,7 @@ export default class RetentionDuration extends PureComponent<Props> {
             />
           </Form.Element>
         </Grid.Column>
-        <Grid.Column widthXS={Columns.Two}>
+        <Grid.Column widthSM={Columns.Three}>
           <Form.Element label="Seconds">
             <Input
               name={DurationKey.Seconds}
diff --git a/ui/src/organizations/components/UpdateBucketOverlay.tsx b/ui/src/organizations/components/UpdateBucketOverlay.tsx
index 5ea0c38941..741a761aa8 100644
--- a/ui/src/organizations/components/UpdateBucketOverlay.tsx
+++ b/ui/src/organizations/components/UpdateBucketOverlay.tsx
@@ -44,15 +44,15 @@ export default class BucketOverlay extends PureComponent<Props, State> {
     const {bucket, nameInputStatus, errorMessage, ruleType} = this.state
 
     return (
-      <OverlayContainer>
+      <OverlayContainer maxWidth={500}>
         <OverlayHeading
-          title="Update Bucket"
+          title="Edit Bucket"
           onDismiss={this.props.onCloseModal}
         />
         <OverlayBody>
           <BucketOverlayForm
             name={bucket.name}
-            buttonText="Update"
+            buttonText="Save Changes"
             ruleType={ruleType}
             onCloseModal={onCloseModal}
             errorMessage={errorMessage}
diff --git a/ui/src/tasks/components/TaskRow.tsx b/ui/src/tasks/components/TaskRow.tsx
index a609dff58d..bdef2886ad 100644
--- a/ui/src/tasks/components/TaskRow.tsx
+++ b/ui/src/tasks/components/TaskRow.tsx
@@ -104,7 +104,7 @@ export class TaskRow extends PureComponent<Props & WithRouterProps> {
     }
 
     return (
-      <Label.Container limitChildCount={4}>
+      <Label.Container limitChildCount={4} resourceName="this Task">
         {task.labels.map(label => (
           <Label
             key={label.resourceID}