Dynamic Dashboards: Change look and copy of add variable control to make it more obvious what it does (#113361)

Change look+copy of add variable control

public/app/features/dashboard-scene/scene/DashboardControls.tsx

@@ -222,6 +222,10 @@ function getStyles(theme: GrafanaTheme2) {
         flexDirection: 'column-reverse',
         alignItems: 'stretch',
       },
+      '&:hover .dashboard-canvas-add-button': {
+        opacity: 1,
+        filter: 'unset',
+      },
     }),
     controlsPanelEdit: css({
       flexWrap: 'wrap-reverse',

public/app/features/dashboard-scene/scene/VariableControls.tsx

@@ -27,7 +27,11 @@ export function VariableControls({ dashboard }: { dashboard: DashboardScene }) {
         .map((variable) => (
           <VariableValueSelectWrapper key={variable.state.key} variable={variable} />
         ))}
-      {config.featureToggles.dashboardNewLayouts ? <AddVariableButton dashboard={dashboard} /> : null}
+      {config.featureToggles.dashboardNewLayouts ? (
+        <div className="dashboard-canvas-add-button">
+          <AddVariableButton dashboard={dashboard} />
+        </div>
+      ) : null}
     </>
   );
 }

public/app/features/dashboard-scene/scene/VariableControlsAddButton.tsx

@@ -26,7 +26,7 @@ export function AddVariableButton({ dashboard }: { dashboard: DashboardScene })
 
   return (
     <Button icon="plus" variant="primary" fill="text" onPointerDown={handlePointerDown}>
-      <Trans i18nKey="dashboard-scene.variable-controls.add-variable">Add</Trans>
+      <Trans i18nKey="dashboard-scene.variable-controls.add-variable">Add variable</Trans>
     </Button>
   );
 }

public/locales/en-US/grafana.json

@@ -6326,7 +6326,7 @@
       "content-variable-referenced-other-variables-dashboard": "This variable is referenced by other variables or dashboard."
     },
     "variable-controls": {
-      "add-variable": "Add"
+      "add-variable": "Add variable"
     },
     "variable-editor-form": {
       "aria-label-variable-editor-form": "Variable editor form",