Templating: removes old Angular variable system and featureToggle (#24779)

* Chore: initial commit

* Tests: fixes MetricsQueryEditor.test.tsx

* Tests: fixes cloudwatch/specs/datasource.test.ts

* Tests: fixes stackdriver/specs/datasource.test.ts

* Tests: remove refrences to CustomVariable

* Refactor: moves DefaultVariableQueryEditor

* Refactor: moves utils

* Refactor: moves types

* Refactor: removes variableSrv

* Refactor: removes feature toggle newVariables

* Refactor: removes valueSelectDropDown

* Chore: removes GeneralTabCtrl

* Chore: migrates RowOptions

* Refactor: adds RowOptionsButton

* Refactor: makes the interface more explicit

* Refactor: small changes

* Refactor: changed type as it can be any variable type

* Tests: fixes broken test

* Refactor: changes after PR comments

* Refactor: adds loading state and call to onChange in componentDidMount

public/app/features/dashboard/components/RowOptions/RowOptionsButton.tsx

@@ -0,0 +1,37 @@
+import React, { FC } from 'react';
+import { Icon, ModalsController } from '@grafana/ui';
+
+import { RowOptionsModal } from './RowOptionsModal';
+import { OnRowOptionsUpdate } from './RowOptionsForm';
+
+export interface RowOptionsButtonProps {
+  title: string | null;
+  repeat: string | null;
+  onUpdate: OnRowOptionsUpdate;
+}
+
+export const RowOptionsButton: FC<RowOptionsButtonProps> = ({ repeat, title, onUpdate }) => {
+  const onUpdateChange = (hideModal: () => void) => (title: string | null, repeat: string | null) => {
+    onUpdate(title, repeat);
+    hideModal();
+  };
+
+  return (
+    <ModalsController>
+      {({ showModal, hideModal }) => {
+        return (
+          <a
+            className="pointer"
+            onClick={() => {
+              showModal(RowOptionsModal, { title, repeat, onDismiss: hideModal, onUpdate: onUpdateChange(hideModal) });
+            }}
+          >
+            <Icon name="cog" />
+          </a>
+        );
+      }}
+    </ModalsController>
+  );
+};
+
+RowOptionsButton.displayName = 'RowOptionsButton';

public/app/features/dashboard/components/RowOptions/RowOptionsCtrl.ts

@@ -1,39 +0,0 @@
-import { coreModule } from 'app/core/core';
-
-export class RowOptionsCtrl {
-  row: any;
-  source: any;
-  dismiss: any;
-  onUpdated: any;
-  showDelete: boolean;
-
-  /** @ngInject */
-  constructor() {
-    this.source = this.row;
-    this.row = this.row.getSaveModel();
-  }
-
-  update() {
-    this.source.title = this.row.title;
-    this.source.repeat = this.row.repeat;
-    this.onUpdated();
-    this.dismiss();
-  }
-}
-
-export function rowOptionsDirective() {
-  return {
-    restrict: 'E',
-    templateUrl: 'public/app/features/dashboard/components/RowOptions/template.html',
-    controller: RowOptionsCtrl,
-    bindToController: true,
-    controllerAs: 'ctrl',
-    scope: {
-      row: '=',
-      dismiss: '&',
-      onUpdated: '&',
-    },
-  };
-}
-
-coreModule.directive('rowOptions', rowOptionsDirective);

public/app/features/dashboard/components/RowOptions/RowOptionsForm.tsx

@@ -0,0 +1,46 @@
+import React, { FC, useCallback, useState } from 'react';
+import { Button, Field, Form, HorizontalGroup, Input } from '@grafana/ui';
+
+import { RepeatRowSelect } from '../RepeatRowSelect/RepeatRowSelect';
+
+export type OnRowOptionsUpdate = (title: string | null, repeat: string | null) => void;
+
+export interface Props {
+  title: string | null;
+  repeat: string | null;
+  onUpdate: OnRowOptionsUpdate;
+  onCancel: () => void;
+}
+
+export const RowOptionsForm: FC<Props> = ({ repeat, title, onUpdate, onCancel }) => {
+  const [newRepeat, setNewRepeat] = useState<string | null>(repeat);
+  const onChangeRepeat = useCallback((name: string) => setNewRepeat(name), [setNewRepeat]);
+
+  return (
+    <Form
+      defaultValues={{ title }}
+      onSubmit={(formData: { title: string | null }) => {
+        onUpdate(formData.title, newRepeat);
+      }}
+    >
+      {({ register }) => (
+        <>
+          <Field label="Title">
+            <Input name="title" ref={register} type="text" />
+          </Field>
+
+          <Field label="Repeat for">
+            <RepeatRowSelect repeat={newRepeat} onChange={onChangeRepeat} />
+          </Field>
+
+          <HorizontalGroup>
+            <Button type="submit">Update</Button>
+            <Button variant="secondary" onClick={onCancel}>
+              Cancel
+            </Button>
+          </HorizontalGroup>
+        </>
+      )}
+    </Form>
+  );
+};

public/app/features/dashboard/components/RowOptions/RowOptionsModal.tsx

@@ -0,0 +1,30 @@
+import React, { FC } from 'react';
+import { Modal, stylesFactory } from '@grafana/ui';
+import { css } from 'emotion';
+
+import { OnRowOptionsUpdate, RowOptionsForm } from './RowOptionsForm';
+
+export interface RowOptionsModalProps {
+  title: string | null;
+  repeat: string | null;
+  onDismiss: () => void;
+  onUpdate: OnRowOptionsUpdate;
+}
+
+export const RowOptionsModal: FC<RowOptionsModalProps> = ({ repeat, title, onDismiss, onUpdate }) => {
+  const styles = getStyles();
+  return (
+    <Modal isOpen={true} title="Row Options" icon="copy" onDismiss={onDismiss} className={styles.modal}>
+      <RowOptionsForm repeat={repeat} title={title} onCancel={onDismiss} onUpdate={onUpdate} />
+    </Modal>
+  );
+};
+
+const getStyles = stylesFactory(() => {
+  return {
+    modal: css`
+      label: RowOptionsModal;
+      width: 500px;
+    `,
+  };
+});

public/app/features/dashboard/components/RowOptions/index.ts

@@ -1 +0,0 @@
-export { RowOptionsCtrl } from './RowOptionsCtrl';

public/app/features/dashboard/components/RowOptions/template.html

@@ -1,30 +0,0 @@
-<div class="modal-body">
-	<div class="modal-header">
-		<h2 class="modal-header-title">
-			<icon name="'copy'"  size="'lg'"></icon>
-			<span class="p-l-1">Row Options</span>
-		</h2>
-
-		<a class="modal-header-close" ng-click="ctrl.dismiss();">
-			<icon name="'times'"></icon>
-		</a>
-	</div>
-
-	<form name="ctrl.saveForm" ng-submit="ctrl.save()" class="modal-content text-center" novalidate>
-		<div class="section">
-			<div class="gf-form">
-				<span class="gf-form-label width-7">Title</span>
-				<input type="text" class="gf-form-input max-width-13" ng-model='ctrl.row.title'></input>
-			</div>
-			<div class="gf-form">
-				<span class="gf-form-label width-7">Repeat for</span>
-				<dash-repeat-option panel="ctrl.row"></dash-repeat-option>
-			</div>
-
-			<div class="gf-form-button-row">
-				<button type="submit" class="btn btn-primary" ng-click="ctrl.update()">Update</button>
-				<button type="button" class="btn btn-inverse" ng-click="ctrl.dismiss()">Cancel</button>
-			</div>
-		</div>
-	</form>
-</div>