NewPanelEdit: Improvements to angular panels and other fixes (#23678)

* Removed old editor components

* Angular panel improvements

* Progress

* Updated tests

* Simple persistence for angular panel option state

* Improving graph edit experiance

* Improving series overrides

* updated e2e test

* Regstry: refactoring

packages/grafana-data/src/utils/Registry.ts

@@ -46,20 +46,26 @@ export class Registry<T extends RegistryItem> {
 
   getIfExists(id: string | undefined): T | undefined {
     if (!this.initialized) {
-      if (this.init) {
-        for (const ext of this.init()) {
-          this.register(ext);
-        }
-      }
-      this.sort();
-      this.initialized = true;
+      this.initialize();
     }
+
     if (id) {
       return this.byId.get(id);
     }
+
     return undefined;
   }
 
+  private initialize() {
+    if (this.init) {
+      for (const ext of this.init()) {
+        this.register(ext);
+      }
+    }
+    this.sort();
+    this.initialized = true;
+  }
+
   get(id: string): T {
     const v = this.getIfExists(id);
     if (!v) {
@@ -70,7 +76,7 @@ export class Registry<T extends RegistryItem> {
 
   selectOptions(current?: string[], filter?: (ext: T) => boolean): RegistrySelectInfo {
     if (!this.initialized) {
-      this.getIfExists('xxx'); // will trigger init
+      this.initialize();
     }
 
     const select = {
@@ -111,6 +117,10 @@ export class Registry<T extends RegistryItem> {
    * Return a list of values by ID, or all values if not specified
    */
   list(ids?: any[]): T[] {
+    if (!this.initialized) {
+      this.initialize();
+    }
+
     if (ids) {
       const found: T[] = [];
       for (const id of ids) {
@@ -121,16 +131,23 @@ export class Registry<T extends RegistryItem> {
       }
       return found;
     }
+
+    return this.ordered;
+  }
+
+  isEmpty(): boolean {
     if (!this.initialized) {
-      this.getIfExists('xxx'); // will trigger init
+      this.initialize();
     }
-    return this.ordered; // copy of everythign just in case
+
+    return this.ordered.length === 0;
   }
 
   register(ext: T) {
     if (this.byId.has(ext.id)) {
       throw new Error('Duplicate Key:' + ext.id);
     }
+
     this.byId.set(ext.id, ext);
     this.ordered.push(ext);
 

packages/grafana-e2e/src/noTypeCheck.ts

@@ -4,7 +4,7 @@
 // toBe, toEqual and so forth. That's why this file is not type checked and will be so until we
 // can solve the above mentioned issue with Cypress/Jest.
 import { e2eScenario, ScenarioArguments } from './support/scenario';
-import { Pages } from './pages';
+import { Pages, Components } from './pages';
 import { Flows } from './flows';
 import { getScenarioContext, setScenarioContext } from './support/scenarioContext';
 
@@ -21,6 +21,7 @@ const e2eObject = {
   imgSrcToBlob: (url: string) => Cypress.Blob.imgSrcToBlob(url),
   scenario: (args: ScenarioArguments) => e2eScenario(args),
   pages: Pages,
+  components: Components,
   flows: Flows,
   getScenarioContext,
   setScenarioContext,

packages/grafana-e2e/src/pages/graph/index.ts

@@ -1,5 +1,13 @@
 import { VisualizationTab } from './visualizationTab';
+import { pageFactory } from '../../support';
 
 export const Graph = {
   VisualizationTab,
+  Legend: pageFactory({
+    url: '',
+    selectors: {
+      legendItemAlias: (name: string) => `gpl alias ${name}`,
+      showLegendSwitch: 'gpl show legend',
+    },
+  }),
 };

packages/grafana-e2e/src/pages/graph/visualizationTab.ts

@@ -4,5 +4,8 @@ export const VisualizationTab = pageFactory({
   url: '',
   selectors: {
     xAxisSection: 'X-Axis section',
+    axesSection: 'Axes section',
+    legendSection: 'Legend section',
+    displaySection: 'Display section',
   },
 });

packages/grafana-e2e/src/pages/index.ts

@@ -39,26 +39,27 @@ export const Pages = {
         },
       },
     },
-    Panels: {
-      Panel,
-      EditPanel,
-      DataSource: {
-        TestData,
-      },
-      Visualization: {
-        Graph,
-      },
-    },
   },
   Dashboards,
   SaveDashboardAsModal,
   SaveDashboardModal,
   SharePanelModal,
-  Components: {
-    BackButton: pageFactory({
-      selectors: {
-        backArrow: 'Go Back button',
-      },
-    }),
-  },
+};
+
+export const Components = {
+  DataSource: {
+    TestData,
+  },
+  Panels: {
+    Panel,
+    EditPanel,
+    Visualization: {
+      Graph,
+    },
+  },
+  BackButton: pageFactory({
+    selectors: {
+      backArrow: 'Go Back button',
+    },
+  }),
 };

packages/grafana-ui/src/components/PanelOptionsGroup/_PanelOptionsGroup.scss

@@ -1,67 +1,34 @@
 .panel-options-group {
-  margin-bottom: 10px;
-  border: $panel-options-group-border;
-  border-radius: $border-radius;
-  background: $page-bg;
+  border-bottom: $panel-border;
 }
 
 .panel-options-group__header {
-  padding: 4px 8px;
-  background: $panel-options-group-header-bg;
+  padding: 8px 16px 8px 8px;
   position: relative;
-  border-radius: $border-radius $border-radius 0 0;
   display: flex;
   align-items: center;
-
-  .btn {
-    position: absolute;
-    right: 0;
-    top: 0;
-  }
-}
-
-.panel-options-group__add-btn {
-  background: none;
-  border: none;
-  display: flex;
-  align-items: center;
-  padding: 0;
+  cursor: pointer;
+  font-weight: 500;
+  color: $text-color-semi-weak;
 
   &:hover {
-    .panel-options-group__add-circle {
-      background-color: $btn-primary-bg;
-      color: $white;
+    color: $text-color;
+
+    .panel-options-group__icon {
+      color: $text-color;
     }
   }
 }
 
-.panel-options-group__add-circle {
-  @include gradientBar($btn-success-bg, $btn-success-bg-hl, #fff);
-
-  border-radius: 50px;
-  width: 20px;
-  height: 20px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin-right: 6px;
-
-  i {
-    position: relative;
-    top: 1px;
-  }
+.panel-options-group__icon {
+  color: $text-color-weak;
+  margin-right: 8px;
 }
 
 .panel-options-group__title {
-  font-size: 16px;
   position: relative;
-  top: 1px;
 }
 
 .panel-options-group__body {
-  padding: 20px;
-
-  &--queries {
-    min-height: 200px;
-  }
+  padding: 8px 16px 16px 32px;
 }

packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts

@@ -87,8 +87,9 @@ $body-bg: ${theme.colors.bodyBg};
 $page-bg: ${theme.colors.bodyBg};
 $dashboard-bg: ${theme.colors.dashboardBg};
 
-$text-color: ${theme.colors.text};
 $text-color-strong: ${theme.colors.textStrong};
+$text-color: ${theme.colors.text};
+$text-color-semi-weak: ${theme.colors.textSemiWeak};
 $text-color-weak: ${theme.colors.textWeak};
 $text-color-faint: ${theme.colors.textFaint};
 $text-color-emphasis: ${theme.colors.textStrong};

packages/grafana-ui/src/themes/_variables.light.scss.tmpl.ts

@@ -83,6 +83,7 @@ $dashboard-bg: ${theme.colors.dashboardBg};
 
 $text-color: ${theme.colors.text};
 $text-color-strong: ${theme.colors.textStrong};
+$text-color-semi-weak: ${theme.colors.textSemiWeak};
 $text-color-weak: ${theme.colors.textWeak};
 $text-color-faint: ${theme.colors.textFaint};
 $text-color-emphasis: ${theme.colors.textStrong};