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

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;
 }

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%);
+  }
+}

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 {

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)

ui/src/me/components/account/Settings.tsx

@@ -35,15 +35,15 @@ export class Settings extends PureComponent<StateProps, State> {
     const {me} = this.state
 
     return (
+      <Grid>
+        <Grid.Row>
+          <Grid.Column widthXS={Columns.Six}>
             <Panel>
               <Panel.Header title="About Me">
                 <Button text="Edit About Me" />
               </Panel.Header>
               <Panel.Body>
                 <Form>
-            <Grid>
-              <Grid.Row>
-                <Grid.Column widthXS={Columns.Six}>
                   <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>
+          </Grid.Column>
+        </Grid.Row>
+      </Grid>
     )
   }
 

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,16 +45,16 @@ 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>
+        </TabbedPageHeader>
-        <Panel.Body>
         <ResourceFetcher<Authorization[]> fetcher={getAuthorizations}>
           {(fetchedAuths, loading) => (
             <Spinner loading={loading}>
@@ -73,8 +74,7 @@ export class Tokens extends PureComponent<Props, State> {
             </Spinner>
           )}
         </ResourceFetcher>
-        </Panel.Body>
+      </>
-      </Panel>
     )
   }
 

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} />

ui/src/me/components/account/__snapshots__/Settings.test.tsx.snap

@@ -13,6 +13,25 @@ exports[`Account rendering renders! 1`] = `
     }
   }
 >
+  <Grid>
+    <div
+      className="grid--container"
+    >
+      <Select
+        type={[Function]}
+      >
+        <GridRow
+          key=".0"
+        >
+          <div
+            className="grid--row"
+          >
+            <GridColumn
+              widthXS={6}
+            >
+              <div
+                className="grid--column col-xs-6"
+              >
                 <Panel>
                   <div
                     className="panel"
@@ -69,25 +88,6 @@ exports[`Account rendering renders! 1`] = `
                           <form
                             className="form--wrapper"
                             onSubmit={[Function]}
-            >
-              <Grid>
-                <div
-                  className="grid--container"
-                >
-                  <Select
-                    type={[Function]}
-                  >
-                    <GridRow
-                      key=".0"
-                    >
-                      <div
-                        className="grid--row"
-                      >
-                        <GridColumn
-                          widthXS={6}
-                        >
-                          <div
-                            className="grid--column col-xs-6"
                           >
                             <FormElement
                               label="Username"
@@ -148,6 +148,12 @@ exports[`Account rendering renders! 1`] = `
                                 </Input>
                               </div>
                             </FormElement>
+                          </form>
+                        </Form>
+                      </div>
+                    </PanelBody>
+                  </div>
+                </Panel>
               </div>
             </GridColumn>
           </div>
@@ -155,11 +161,5 @@ exports[`Account rendering renders! 1`] = `
       </Select>
     </div>
   </Grid>
-            </form>
-          </Form>
-        </div>
-      </PanelBody>
-    </div>
-  </Panel>
 </Settings>
 `;

ui/src/me/components/account/__snapshots__/Tokens.test.tsx.snap

@@ -4,21 +4,18 @@ exports[`Account rendering renders! 1`] = `
 <Tokens
   authorizationsLink="api/v2/authorizations"
 >
-  <Panel>
+  <TabbedPageHeader>
     <div
-      className="panel"
+      className="tabbed-page-section--header"
-    >
-      <PanelBody>
-        <div
-          className="panel-body"
     >
       <Input
         autoFocus={false}
         autocomplete="off"
         disabledTitleText="This input is disabled"
+        icon="search"
         name=""
         onChange={[Function]}
-            placeholder="Filter tokens by column"
+        placeholder="Filter Tokens..."
         size="sm"
         spellCheck={false}
         status="default"
@@ -27,7 +24,7 @@ exports[`Account rendering renders! 1`] = `
         widthPixels={256}
       >
         <div
-              className="input input-sm"
+          className="input input-sm input--has-icon"
           style={
             Object {
               "width": "256px",
@@ -41,22 +38,21 @@ exports[`Account rendering renders! 1`] = `
             disabled={false}
             name=""
             onChange={[Function]}
-                placeholder="Filter tokens by column"
+            placeholder="Filter Tokens..."
             spellCheck={false}
             title=""
             value=""
           />
+          <span
+            className="input-icon icon search"
+          />
           <div
             className="input-shadow"
           />
         </div>
       </Input>
     </div>
-      </PanelBody>
+  </TabbedPageHeader>
-      <PanelBody>
-        <div
-          className="panel-body"
-        >
   <ResourceFetcher
     fetcher={[Function]}
   >
@@ -242,7 +238,7 @@ exports[`Account rendering renders! 1`] = `
                     size="lg"
                   >
                     <EmptyStateText
-                              text="Could not find any tokens"
+                      text="There are not any Tokens associated with this account. Contact your administrator"
                     />
                   </EmptyState>
                 }
@@ -505,9 +501,5 @@ exports[`Account rendering renders! 1`] = `
       </FilterList>
     </Spinner>
   </ResourceFetcher>
-        </div>
-      </PanelBody>
-    </div>
-  </Panel>
 </Tokens>
 `;

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>
+          </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
+  }
 }

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}

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>
     )
   }

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,8 +27,9 @@ export default class Retention extends PureComponent<Props> {
 
     return (
       <>
+        <Grid.Column>
           <Form.Element label="How often to clear data?">
-          <Radio>
+            <Radio shape={ButtonShape.StretchToFit}>
               <Radio.Button
                 active={type === BucketRetentionRules.TypeEnum.Expire}
                 onClick={this.handleRadioClick}
@@ -45,6 +46,7 @@ export default class Retention extends PureComponent<Props> {
               </Radio.Button>
             </Radio>
           </Form.Element>
+        </Grid.Column>
         <RetentionDuration
           type={type}
           retentionSeconds={retentionSeconds}

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}

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}

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}