Update styles namespace for organizations table

ui/src/admin/components/chronograf/DefaultOrganization.js

@@ -2,15 +2,15 @@ import React, {PropTypes} from 'react'
 
 // This is a non-editable organization row, used currently for DEFAULT_ORG
 const DefaultOrganization = ({organization}) =>
-  <div className="manage-orgs-form--org">
+  <div className="orgs-table--org">
-    <div className="manage-orgs-form--id">
+    <div className="orgs-table--id">
       {organization.id}
     </div>
-    <div className="manage-orgs-form--name-disabled">
+    <div className="orgs-table--name-disabled">
       {organization.name}
     </div>
     <button
-      className="btn btn-sm btn-default btn-square manage-orgs-form--delete"
+      className="btn btn-sm btn-default btn-square orgs-table--delete"
       disabled={true}
     >
       <span className="icon trash" />

ui/src/admin/components/chronograf/NewOrganization.js

@@ -47,11 +47,11 @@ class Organization extends Component {
     const isSaveDisabled = organizationName === null || organizationName === ''
 
     return (
-      <div className="manage-orgs-form--org manage-orgs-form--new-org">
+      <div className="orgs-table--org orgs-table--new-org">
-        <div className="manage-orgs-form--id">&mdash;</div>
+        <div className="orgs-table--id">&mdash;</div>
         <input
           type="text"
-          className="form-control input-sm manage-orgs-form--input"
+          className="form-control input-sm orgs-table--input"
           value={organizationName}
           onKeyDown={this.handleKeyDown}
           onChange={this.handleInputChange}

ui/src/admin/components/chronograf/Organization.js

@@ -63,14 +63,14 @@ class Organization extends Component {
     const {organization} = this.props
 
     return (
-      <div className="manage-orgs-form--org">
+      <div className="orgs-table--org">
-        <div className="manage-orgs-form--id">
+        <div className="orgs-table--id">
           {organization.id}
         </div>
         {isEditing
           ? <input
               type="text"
-              className="form-control input-sm manage-orgs-form--input"
+              className="form-control input-sm orgs-table--input"
               defaultValue={workingName}
               onBlur={this.handleInputBlur(reset)}
               onKeyDown={this.handleKeyDown}
@@ -79,10 +79,7 @@ class Organization extends Component {
               onFocus={this.handleFocus}
               ref={r => (this.inputRef = r)}
             />
-          : <div
+          : <div className="orgs-table--name" onClick={this.handleNameClick}>
-              className="manage-orgs-form--name"
-              onClick={this.handleNameClick}
-            >
               {workingName}
               <span className="icon pencil" />
             </div>}

ui/src/admin/components/chronograf/OrganizationsTable.js

@@ -54,9 +54,9 @@ class OrganizationsTable extends Component {
                 </button>
               </div>
               <div className="panel-body">
-                <div className="manage-orgs-form--org-labels">
+                <div className="orgs-table--org-labels">
-                  <div className="manage-orgs-form--id">ID</div>
+                  <div className="orgs-table--id">ID</div>
-                  <div className="manage-orgs-form--name">Name</div>
+                  <div className="orgs-table--name">Name</div>
                 </div>
                 {isAddingOrganization
                   ? <NewOrganization

ui/src/style/chronograf.scss

@@ -31,7 +31,6 @@
 @import 'components/confirm-buttons';
 @import 'components/code-mirror-theme';
 @import 'components/custom-time-range';
-@import 'components/manage-orgs-form';
 @import 'components/dygraphs';
 @import 'components/fancy-scrollbars';
 @import 'components/fill-query';
@@ -42,6 +41,7 @@
 @import 'components/input-tag-list';
 @import 'components/newsfeed';
 @import 'components/opt-in';
+@import 'components/organizations-table';
 @import 'components/page-header-dropdown';
 @import 'components/page-header-editable';
 @import 'components/page-spinner';

ui/src/style/components/manage-orgs-form.scss

@@ -1,152 +0,0 @@
-/*
-  Styles for the Manage Organizations Overlay
-  ------------------------------------------------------------------------------
-  Accessed via Chronograf Admin
-*/
-
-$manage-orgs--form-z: 2;
-$manage-orgs--max-width: 650px;
-$manage-orgs--max-height: calc(100vh - 120px);
-$manage-orgs--gutter: 30px;
-
-.manage-orgs-form {
-  max-width: $manage-orgs--max-width;
-  margin: 0 auto;
-  position: relative;
-  z-index: $manage-orgs--form-z;
-}
-.manage-orgs-form--header {
-  height: $chronograf-page-header-height;
-  background: $g0-obsidian;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 0 $manage-orgs--gutter;
-
-  .page-header__right span.page-header__dismiss {
-    margin-right: -10px !important;
-  }
-}
-.manage-orgs-form--footer {
-  margin-top: $manage-orgs--gutter;
-  display: inline-flex;
-  width: 100%;
-  align-items: center;
-  flex-wrap: nowrap;
-
-  > .btn {
-    margin: 0 4px;
-    width: 90px;
-    justify-content: center;
-  }
-}
-.manage-orgs-form--body {
-  padding: $manage-orgs--gutter;
-  border-radius: 0 0 $radius $radius;
-  @include gradient-v($g2-kevlar,$g0-obsidian);
-  @include custom-scrollbar-round($g2-kevlar,$c-pool);
-  display: block;
-  max-height: $manage-orgs--max-height;
-  overflow: auto;
-}
-
-.manage-orgs-form--org {
-  width: 100%;
-  display: flex;
-  align-items: center;
-  margin-bottom: 8px;
-  position: relative;
-
-  &:last-of-type {
-    margin-bottom: 0;
-  }
-}
-.manage-orgs-form--id {
-  padding: 0 11px;
-  width: 60px;
-  height: 30px;
-  line-height: 30px;
-  font-size: 13px;
-  color: $g13-mist;
-  font-weight: 500;
-}
-.manage-orgs-form--name,
-.manage-orgs-form--name-disabled,
-input[type="text"].form-control.manage-orgs-form--input {
-  flex: 1 0 0;
-  font-weight: 600;
-  font-size: 13px;
-  margin-right: 4px;
-}
-.manage-orgs-form--name,
-.manage-orgs-form--name-disabled {
-  @include no-user-select();
-  padding: 0 11px;
-  border-radius: 4px;
-  height: 30px;
-  line-height: 28px;
-  border-style: solid;
-  border-width: 2px;
-}
-.manage-orgs-form--name {
-  border-color: $g2-kevlar;
-  background-color: $g2-kevlar;
-  color: $g13-mist;
-  position: relative;
-  transition:
-    color 0.4s ease,
-    background-color 0.4s ease,
-    border-color 0.4s ease;
-
-  > span.icon {
-    position: absolute;
-    top: 50%;
-    right: 11px;
-    transform: translateY(-50%);
-    color: $g8-storm;
-    opacity: 0;
-    transition: opacity 0.25s ease;
-  }
-
-  &:hover {
-    color: $g20-white;
-    background-color: $g5-pepper;
-    border-color: $g5-pepper;
-    cursor: text;
-
-    > span.icon {opacity: 1;}
-  }
-}
-.manage-orgs-form--name-disabled {
-  border-color: $g4-onyx;
-  background-color: $g4-onyx;
-  font-style: italic;
-  color: $g9-mountain;
-}
-
-.manage-orgs-form--org-labels {
-  display: flex;
-  align-items: center;
-  border-bottom: 2px solid $g3-castle;
-  margin-bottom: 8px;
-  width: 100%;
-
-  > .manage-orgs-form--name,
-  > .manage-orgs-form--name:hover {
-    transition: none;
-    background-color: transparent;
-    border-color: transparent;
-  }
-
-  > .manage-orgs-form--id,
-  > .manage-orgs-form--name,
-  > .manage-orgs-form--name:hover {
-    color: $g15-platinum;
-    font-weight: 700;
-  }
-}
-.manage-orgs-form--org.manage-orgs-form--new-org {
-  .btn {
-    margin-left: 4px;
-  }
-}

ui/src/style/components/organizations-table.scss

@@ -0,0 +1,106 @@
+/*
+  Styles for the Manage Organizations Page
+  ------------------------------------------------------------------------------
+  Is not actually a table
+*/
+
+.orgs-table--org {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  margin-bottom: 8px;
+  position: relative;
+
+  &:last-of-type {
+    margin-bottom: 0;
+  }
+}
+.orgs-table--id {
+  padding: 0 11px;
+  width: 60px;
+  height: 30px;
+  line-height: 30px;
+  font-size: 13px;
+  color: $g13-mist;
+  font-weight: 500;
+}
+.orgs-table--name,
+.orgs-table--name-disabled,
+input[type="text"].form-control.orgs-table--input {
+  flex: 1 0 0;
+  font-weight: 600;
+  font-size: 13px;
+  margin-right: 4px;
+}
+.orgs-table--name,
+.orgs-table--name-disabled {
+  @include no-user-select();
+  padding: 0 11px;
+  border-radius: 4px;
+  height: 30px;
+  line-height: 28px;
+  border-style: solid;
+  border-width: 2px;
+}
+.orgs-table--name {
+  border-color: $g2-kevlar;
+  background-color: $g2-kevlar;
+  color: $g13-mist;
+  position: relative;
+  transition:
+    color 0.4s ease,
+    background-color 0.4s ease,
+    border-color 0.4s ease;
+
+  > span.icon {
+    position: absolute;
+    top: 50%;
+    right: 11px;
+    transform: translateY(-50%);
+    color: $g8-storm;
+    opacity: 0;
+    transition: opacity 0.25s ease;
+  }
+
+  &:hover {
+    color: $g20-white;
+    background-color: $g5-pepper;
+    border-color: $g5-pepper;
+    cursor: text;
+
+    > span.icon {opacity: 1;}
+  }
+}
+.orgs-table--name-disabled {
+  border-color: $g4-onyx;
+  background-color: $g4-onyx;
+  font-style: italic;
+  color: $g9-mountain;
+}
+
+.orgs-table--org-labels {
+  display: flex;
+  align-items: center;
+  border-bottom: 2px solid $g3-castle;
+  margin-bottom: 8px;
+  width: 100%;
+
+  > .orgs-table--name,
+  > .orgs-table--name:hover {
+    transition: none;
+    background-color: transparent;
+    border-color: transparent;
+  }
+
+  > .orgs-table--id,
+  > .orgs-table--name,
+  > .orgs-table--name:hover {
+    color: $g15-platinum;
+    font-weight: 700;
+  }
+}
+.orgs-table--org.orgs-table--new-org {
+  .btn {
+    margin-left: 4px;
+  }
+}