Dashboard: Migration - Dashboard Settings Variables (List, Duplicate, Delete)

public/app/features/dashboard-scene/settings/VariablesEditView.tsx

@@ -1,14 +1,14 @@
 import React from 'react';
 
 import { PageLayoutType } from '@grafana/data';
-import { SceneComponentProps, SceneObjectBase } from '@grafana/scenes';
+import { SceneComponentProps, SceneObjectBase, sceneGraph } from '@grafana/scenes';
 import { Page } from 'app/core/components/Page/Page';
 
 import { NavToolbarActions } from '../scene/NavToolbarActions';
 import { getDashboardSceneFor } from '../utils/utils';
 
 import { DashboardEditView, DashboardEditViewState, useDashboardEditPageNav } from './utils';
-
+import { VariableEditorList } from './variables/VariableEditorList';
 export interface VariablesEditViewState extends DashboardEditViewState {}
 
 export class VariablesEditView extends SceneObjectBase<VariablesEditViewState> implements DashboardEditView {
@@ -19,11 +19,93 @@ export class VariablesEditView extends SceneObjectBase<VariablesEditViewState> i
   static Component = ({ model }: SceneComponentProps<VariablesEditView>) => {
     const dashboard = getDashboardSceneFor(model);
     const { navModel, pageNav } = useDashboardEditPageNav(dashboard, model.getUrlKey());
+    // get variables from dashboard state
+    const variablesObject = sceneGraph.getVariables(dashboard);
+    const variables = variablesObject.useState().variables;
+
+    const getVariableIndex = (identifier: string) => {
+      return variables.findIndex((variable) => variable.state.name === identifier);
+    };
+
+    const onDelete = (identifier: string) => {
+      // Find the index of the variable to be deleted
+      const variableIndex = getVariableIndex(identifier);
+      if (variableIndex === -1) {
+        // Handle the case where the variable is not found
+        console.error('Variable not found');
+        return;
+      }
+
+      // Create a new array excluding the variable to be deleted
+      const updatedVariables = [...variables.slice(0, variableIndex), ...variables.slice(variableIndex + 1)];
+
+      // Update the state or the variables array
+      variablesObject.setState({ variables: updatedVariables });
+    };
+
+    const onDuplicated = (identifier: string) => {
+      const variableIndex = getVariableIndex(identifier);
+      if (variableIndex === -1) {
+        console.error('Variable not found');
+        return;
+      }
+
+      const originalVariable = variables[variableIndex];
+      let copyNumber = 0;
+      let newName = `copy_of_${originalVariable.state.name}`;
+
+      // Check if the name is unique, if not, increment the copy number
+      while (variables.some((v) => v.state.name === newName)) {
+        copyNumber++;
+        newName = `copy_of_${originalVariable.state.name}_${copyNumber}`;
+      }
+
+      //clone the original variable
+
+      const newVariable = originalVariable.clone(originalVariable.state);
+      // update state name of the new variable
+      newVariable.setState({ name: newName });
+
+      const updatedVariables = [
+        ...variables.slice(0, variableIndex + 1),
+        newVariable,
+        ...variables.slice(variableIndex + 1),
+      ];
+
+      variablesObject.setState({ variables: updatedVariables });
+    };
+
+    const onOrderChanged = (fromIndex: number, toIndex: number) => {
+      if (!variables) {
+        return;
+      }
+      // check the index are within the variables array
+      if (fromIndex < 0 || fromIndex >= variables.length || toIndex < 0 || toIndex >= variables.length) {
+        console.error('Invalid index');
+        return;
+      }
+      const updatedVariables = [...variables];
+      // Remove the variable from the array
+      const movedItem = updatedVariables.splice(fromIndex, 1);
+      updatedVariables.splice(toIndex, 0, movedItem[0]);
+      variablesObject.setState({ variables: updatedVariables });
+    };
+
+    const onEdit = (identifier: string) => {
+      return 'not implemented';
+    };
 
     return (
       <Page navModel={navModel} pageNav={pageNav} layout={PageLayoutType.Standard}>
         <NavToolbarActions dashboard={dashboard} />
-        <div>variables todo</div>
+        <VariableEditorList
+          variables={variables}
+          onDelete={onDelete}
+          onDuplicate={onDuplicated}
+          onChangeOrder={onOrderChanged}
+          onAdd={() => {}}
+          onEdit={onEdit}
+        />
       </Page>
     );
   };

public/app/features/dashboard-scene/settings/variables/VariableEditorList.tsx

@@ -0,0 +1,124 @@
+import { css } from '@emotion/css';
+import React, { ReactElement } from 'react';
+import { DragDropContext, Droppable, DropResult } from 'react-beautiful-dnd';
+
+import { selectors } from '@grafana/e2e-selectors';
+import { reportInteraction } from '@grafana/runtime';
+import { SceneVariable, SceneVariableState } from '@grafana/scenes';
+import { useStyles2, Stack } from '@grafana/ui';
+import EmptyListCTA from 'app/core/components/EmptyListCTA/EmptyListCTA';
+
+import { VariableEditorListRow } from './VariableEditorListRow';
+
+export interface Props {
+  variables: Array<SceneVariable<SceneVariableState>>;
+  onAdd: () => void;
+  onChangeOrder: (fromIndex: number, toIndex: number) => void;
+  onDuplicate: (identifier: string) => void;
+  onDelete: (identifier: string) => void;
+  onEdit: (identifier: string) => void;
+}
+
+export function VariableEditorList({
+  variables,
+  onChangeOrder,
+  onDelete,
+  onDuplicate,
+  onAdd,
+  onEdit,
+}: Props): ReactElement {
+  const styles = useStyles2(getStyles);
+  const onDragEnd = (result: DropResult) => {
+    if (!result.destination || !result.source) {
+      return;
+    }
+    reportInteraction('Variable drag and drop');
+    onChangeOrder(result.source.index, result.destination.index);
+  };
+
+  return (
+    <div>
+      <div>
+        {variables.length === 0 && <EmptyVariablesList onAdd={onAdd} />}
+
+        {variables && (
+          <Stack direction="column" gap={4}>
+            <div className={styles.tableContainer}>
+              <table
+                className="filter-table filter-table--hover"
+                data-testid={selectors.pages.Dashboard.Settings.Variables.List.table}
+                role="grid"
+              >
+                <thead>
+                  <tr>
+                    <th>Variable</th>
+                    <th>Definition</th>
+                    <th colSpan={5} />
+                  </tr>
+                </thead>
+                <DragDropContext onDragEnd={onDragEnd}>
+                  <Droppable droppableId="variables-list" direction="vertical">
+                    {(provided) => (
+                      <tbody ref={provided.innerRef} {...provided.droppableProps}>
+                        {variables.map((variableScene, index) => {
+                          const variableState = variableScene.state;
+                          return (
+                            <VariableEditorListRow
+                              index={index}
+                              key={`${variableState.name}-${index}`}
+                              variable={variableScene}
+                              onDelete={onDelete}
+                              onDuplicate={onDuplicate}
+                              onEdit={onEdit}
+                            />
+                          );
+                        })}
+                        {provided.placeholder}
+                      </tbody>
+                    )}
+                  </Droppable>
+                </DragDropContext>
+              </table>
+            </div>
+          </Stack>
+        )}
+      </div>
+    </div>
+  );
+}
+
+function EmptyVariablesList({ onAdd }: { onAdd: () => void }): ReactElement {
+  return (
+    <div>
+      <EmptyListCTA
+        title="There are no variables yet"
+        buttonIcon="calculator-alt"
+        buttonTitle="Add variable"
+        infoBox={{
+          __html: ` <p>
+                    Variables enable more interactive and dynamic dashboards. Instead of hard-coding things like server
+                    or sensor names in your metric queries you can use variables in their place. Variables are shown as
+                    list boxes at the top of the dashboard. These drop-down lists make it easy to change the data
+                    being displayed in your dashboard. Check out the
+                    <a class="external-link" href="https://grafana.com/docs/grafana/latest/variables/" target="_blank">
+                      Templates and variables documentation
+                    </a>
+                    for more information.
+                  </p>`,
+        }}
+        infoBoxTitle="What do variables do?"
+        onClick={(event) => {
+          event.preventDefault();
+          onAdd();
+        }}
+      />
+    </div>
+  );
+}
+
+const getStyles = () => ({
+  tableContainer: css({
+    overflow: 'scroll',
+    width: '100%',
+  }),
+});