NewPanelEditor: Enable new edit mode (#23405)

* WIP: initial commit to transition to new edit mode

* More old edit cleanup

* Minor update

* Refactoring url edit/fullscreen state to simplify logic, now seperate states

* Fixed tests and part of the explore integration

* Updated snapshot

* Fix alert rule links

* Fixed issue going back from explore

* Updated snapshots

* Fixes and changes

* Fixed bridge srv issue

* Fixed add panel issue

* Removed console log

* Removed render

* Tests: fixes e2e smoketest

* Make description optional

* Fixed typings

* e2e fixes

* removed import

* updated snapshot

Co-authored-by: Hugo Häggmark <hugo.haggmark@grafana.com>

packages/grafana-data/src/types/OptionsUIRegistryBuilder.ts

@@ -49,7 +49,7 @@ export interface OptionsEditorItem<TOptions, TSettings, TEditorProps, TValue> ex
 interface OptionEditorConfig<TOptions, TSettings, TValue = any> {
   id: keyof TOptions & string;
   name: string;
-  description: string;
+  description?: string;
   settings?: TSettings;
   defaultValue?: TValue;
 }

packages/grafana-data/src/types/fieldOverrides.ts

@@ -77,7 +77,7 @@ export interface FieldConfigEditorConfig<TOptions, TSettings = any, TValue = any
   /**
    * Description of the field config property. Will be displayed in the UI as form element description.
    */
-  description: string;
+  description?: string;
   /**
    * Array of strings representing category of the field config property. First element in the array will make option render as collapsible section.
    */

packages/grafana-data/src/types/panel.ts

@@ -142,7 +142,7 @@ export interface PanelOptionsEditorConfig<TOptions, TSettings = any, TValue = an
   /**
    * Description of the option. Will be displayed in the UI as form element description.
    */
-  description: string;
+  description?: string;
   /**al
    * Custom settings of the editor.
    */

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

@@ -3,7 +3,7 @@ import { SelectableValue } from '../types/select';
 export interface RegistryItem {
   id: string; // Unique Key -- saved in configs
   name: string; // Display Name, can change without breaking configs
-  description: string;
+  description?: string;
   aliasIds?: string[]; // when the ID changes, we may want backwards compatibility ('current' => 'last')
 
   /**

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

@@ -4,7 +4,6 @@ export const Dashboard = pageFactory({
   url: (uid: string) => `/d/${uid}`,
   selectors: {
     toolbarItems: (button: string) => `Dashboard navigation bar button ${button}`,
-    backArrow: 'Dashboard settings Go Back button',
     navBar: () => '.navbar',
   },
 });

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

@@ -15,6 +15,7 @@ import { SaveDashboardModal } from './saveDashboardModal';
 import { Panel } from './panel';
 import { SharePanelModal } from './sharePanelModal';
 import { ConstantVariable, QueryVariable, VariableGeneral, Variables, VariablesSubMenu } from './variables';
+import { pageFactory } from '../support';
 
 export const Pages = {
   Login,
@@ -53,4 +54,11 @@ export const Pages = {
   SaveDashboardAsModal,
   SaveDashboardModal,
   SharePanelModal,
+  Components: {
+    BackButton: pageFactory({
+      selectors: {
+        backArrow: 'Go Back button',
+      },
+    }),
+  },
 };

packages/grafana-ui/src/components/DataLinks/DataLinksInlineEditor/DataLinksInlineEditor.tsx

@@ -100,7 +100,7 @@ export const DataLinksInlineEditor: React.FC<DataLinksInlineEditorProps> = ({ li
       )}
 
       <FullWidthButtonContainer>
-        <Button size="sm" icon="plus-circle" onClick={onDataLinkAdd} variant="secondary">
+        <Button size="sm" icon="plus" onClick={onDataLinkAdd} variant="secondary">
           Add link
         </Button>
       </FullWidthButtonContainer>

packages/grafana-ui/src/components/ThresholdsEditorNew/ThresholdsEditor.tsx

@@ -200,7 +200,7 @@ export class ThresholdsEditor extends PureComponent<Props, State> {
           return (
             <div className={styles.wrapper}>
               <FullWidthButtonContainer className={styles.addButton}>
-                <Button size="sm" icon="plus-circle" onClick={() => this.onAddThreshold()} variant="secondary">
+                <Button size="sm" icon="plus" onClick={() => this.onAddThreshold()} variant="secondary">
                   Add threshold
                 </Button>
               </FullWidthButtonContainer>

packages/grafana-ui/src/components/ValueMappingsEditor/ValueMappingsEditor.tsx

@@ -68,7 +68,7 @@ export const ValueMappingsEditor: React.FC<Props> = ({ valueMappings, onChange,
       <FullWidthButtonContainer>
         <Button
           size="sm"
-          icon="plus-circle"
+          icon="plus"
           onClick={onAdd}
           aria-label="ValueMappingsEditor add mapping button"
           variant="secondary"