Rearrange variables (#4187)

* feat: variable re-arrange

* feat: update variable update from dashboard description

* feat: update variable update from dashboard description

* feat: update custom variable dropdown values on change

* feat: handle dependent value updates to dashboard description

* feat: handle dependent 0th order variable update

* feat: update variable item test

* feat: transform variables data to support rearraging

* feat: update modal import

* feat: remove console logs

* feat: ts-ignore

* feat: show variable name in delete modal

frontend/package.json

@@ -29,6 +29,9 @@
 	"dependencies": {
 		"@ant-design/colors": "6.0.0",
 		"@ant-design/icons": "4.8.0",
+		"@dnd-kit/core": "6.1.0",
+		"@dnd-kit/modifiers": "7.0.0",
+		"@dnd-kit/sortable": "8.0.0",
 		"@grafana/data": "^9.5.2",
 		"@mdx-js/loader": "2.3.0",
 		"@mdx-js/react": "2.3.0",

frontend/src/container/NewDashboard/DashboardDescription/SettingsDrawer.tsx

@@ -29,7 +29,7 @@ function SettingsDrawer({ drawerTitle }: { drawerTitle: string }): JSX.Element {
 			<DrawerContainer
 				title={drawerTitle}
 				placement="right"
-				width="50%"
+				width="60%"
 				onClose={onClose}
 				open={visible}
 			>

frontend/src/container/NewDashboard/DashboardSettings/DashboardSettings.styles.scss

@@ -0,0 +1,5 @@
+.delete-variable-name {
+	font-weight: 700;
+	color: rgb(207, 19, 34);
+	font-style: italic;
+}

frontend/src/container/NewDashboard/DashboardSettings/Variables/VariableItem/VariableItem.tsx

@@ -18,10 +18,10 @@ import {
 	VariableQueryTypeArr,
 	VariableSortTypeArr,
 } from 'types/api/dashboard/getAll';
-import { v4 } from 'uuid';
+import { v4 as generateUUID } from 'uuid';
 
 import { variablePropsToPayloadVariables } from '../../../utils';
-import { TVariableViewMode } from '../types';
+import { TVariableMode } from '../types';
 import { LabelContainer, VariableItemRow } from './styles';
 
 const { Option } = Select;
@@ -30,17 +30,17 @@ interface VariableItemProps {
 	variableData: IDashboardVariable;
 	existingVariables: Record<string, IDashboardVariable>;
 	onCancel: () => void;
-	onSave: (name: string, arg0: IDashboardVariable, arg1: string) => void;
+	onSave: (mode: TVariableMode, variableData: IDashboardVariable) => void;
 	validateName: (arg0: string) => boolean;
-	variableViewMode: TVariableViewMode;
+	mode: TVariableMode;
 }
 function VariableItem({
 	variableData,
 	existingVariables,
 	onCancel,
 	onSave,
 	validateName,
-	variableViewMode,
+	mode,
 }: VariableItemProps): JSX.Element {
 	const [variableName, setVariableName] = useState<string>(
 		variableData.name || '',
@@ -97,7 +97,7 @@ function VariableItem({
 	]);
 
 	const handleSave = (): void => {
-		const newVariableData: IDashboardVariable = {
+		const variable: IDashboardVariable = {
 			name: variableName,
 			description: variableDescription,
 			type: queryType,
@@ -111,16 +111,12 @@ function VariableItem({
 				selectedValue: (variableData.selectedValue ||
 					variableTextboxValue) as never,
 			}),
-			modificationUUID: v4(),
+			modificationUUID: generateUUID(),
+			id: variableData.id || generateUUID(),
+			order: variableData.order,
 		};
-		onSave(
-			variableName,
-			newVariableData,
-			(variableViewMode === 'EDIT' && variableName !== variableData.name
-				? variableData.name
-				: '') as string,
-		);
-		onCancel();
+
+		onSave(mode, variable);
 	};
 
 	// Fetches the preview values for the SQL variable query
@@ -175,7 +171,6 @@ function VariableItem({
 	return (
 		<div className="variable-item-container">
 			<div className="variable-item-content">
-				{/* <Typography.Title level={3}>Add Variable</Typography.Title> */}
 				<VariableItemRow>
 					<LabelContainer>
 						<Typography>Name</Typography>