Styling empty states a bit

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

src/renderer/components/+preferences/extension-settings-page.module.scss

@@ -0,0 +1,26 @@
+/**
+ * Copyright (c) 2021 OpenLens Authors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of
+ * this software and associated documentation files (the "Software"), to deal in
+ * the Software without restriction, including without limitation the rights to
+ * use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+ * the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+ * FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+ * COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+ * IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+ * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+.noItems {
+  height: calc(100vh - 120px);
+  display: grid;
+  place-content: center;
+}

src/renderer/components/+preferences/extension-settings-page.tsx

@@ -19,10 +19,13 @@
  * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
+import styles from "./extension-settings-page.module.scss";
+
 import React from "react";
 import { matchPath, RouteComponentProps } from "react-router";
 import { extensionSettingsRoute } from "../../../common/routes";
 import { AppPreferenceRegistry } from "../../../extensions/registries";
+import { Icon } from "../icon";
 import { ExtensionSettings } from "./extension-settings";
 
 interface Props extends RouteComponentProps<{ extensionId?: string }> {
@@ -37,7 +40,7 @@ export const ExtensionSettingsPage = (props: Props) => {
 
   if (!match?.params.extensionId) {
     return (
-      <div>No extension id provided in URL</div>
+      <div className={styles.noItems}><span><Icon material="info"/> No extension id provided in URL.</span></div>
     );
   }
 
@@ -48,7 +51,7 @@ export const ExtensionSettingsPage = (props: Props) => {
   const renderContent = () => {
     if (!currentSettings.length) {
       return (
-        <div>No settings found</div>
+        <div className={styles.noItems}><span><Icon material="info"/> No settings found.</span></div>
       );
     }
 

src/renderer/components/+preferences/preferences.tsx

@@ -27,8 +27,6 @@ import {
   appRoute,
   appURL,
   editorURL,
-  extensionRoute,
-  extensionURL,
   kubernetesRoute,
   kubernetesURL,
   preferencesURL,
@@ -90,9 +88,6 @@ class Preferences extends React.Component<Dependencies> {
         {(telemetryExtensions.length > 0 || !!sentryDsn) &&
           <Tab value={telemetryURL()} label="Telemetry" data-testid="telemetry-tab" active={isActive(telemetryRoute)}/>
         }
-        {preferenceRegistries.filter(e => !e.showInPreferencesTab).length > 0 &&
-          <Tab value={extensionURL()} label="Extensions" data-testid="extensions-tab" active={isActive(extensionRoute)}/>
-        }
         {extensionsWithSettings.length > 0 && (
           <div data-testid="custom-settings">
             <hr/>