Refactor empty state into two subcomponents

ui/src/dashboards/components/DashboardsTable.js

@@ -6,6 +6,27 @@ import Authorized, {EDITOR_ROLE} from 'src/auth/Authorized'
 
 import DeleteConfirmTableCell from 'shared/components/DeleteConfirmTableCell'
 
+const AuthorizedEmptyState = ({onCreateDashboard}) =>
+  <div className="generic-empty-state">
+    <h4 style={{marginTop: '90px'}}>
+      Looks like you don’t have any dashboards
+    </h4>
+    <br />
+    <button
+      className="btn btn-sm btn-primary"
+      onClick={onCreateDashboard}
+      style={{marginBottom: '90px'}}
+    >
+      <span className="icon plus" /> Create Dashboard
+    </button>
+  </div>
+
+const unauthorizedEmptyState = (
+  <div className="generic-empty-state">
+    <h4 style={{margin: '90px 0'}}>Looks like you don’t have any dashboards</h4>
+  </div>
+)
+
 const DashboardsTable = ({
   dashboards,
   onDeleteDashboard,
@@ -52,20 +73,12 @@ const DashboardsTable = ({
           )}
         </tbody>
       </table>
-    : <div className="generic-empty-state">
-        <h4 style={{marginTop: '90px'}}>
-          Looks like you don’t have any dashboards
-        </h4>
-        <Authorized requiredRole={EDITOR_ROLE}>
-          <button
-            className="btn btn-sm btn-primary"
-            onClick={onCreateDashboard}
-            style={{marginBottom: '90px'}}
-          >
-            <span className="icon plus" /> Create Dashboard
-          </button>
-        </Authorized>
-      </div>
+    : <Authorized
+        requiredRole={EDITOR_ROLE}
+        replaceWithIfNotAuthorized={unauthorizedEmptyState}
+      >
+        <AuthorizedEmptyState onCreateDashboard={onCreateDashboard} />
+      </Authorized>
 }
 
 const {arrayOf, func, shape, string} = PropTypes
@@ -77,4 +90,8 @@ DashboardsTable.propTypes = {
   dashboardLink: string.isRequired,
 }
 
+AuthorizedEmptyState.propTypes = {
+  onCreateDashboard: func.isRequired,
+}
+
 export default DashboardsTable

ui/src/style/unsorted.scss

@@ -57,6 +57,7 @@
   justify-content: center;
   color: $g12-forge;
   padding: 20px 0;
+  @include no-user-select();
 
   h4,
   h5 {