wip

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

@@ -17,22 +17,29 @@ export function DashboardLinksControls({ links, dashboard }: Props) {
   sceneGraph.getTimeRange(dashboard).useState();
   const uid = dashboard.state.uid;
   const styles = useStyles2(getStyles);
+  const linksToDisplay = excludeControlMenuLinks(links);
 
-  if (!links || !uid || links.length === 0) {
+  if (!uid || linksToDisplay.length === 0) {
     return null;
   }
 
   return (
     <div className={styles.linksContainer}>
-      {links
-        .filter((link) => link.placement === undefined)
-        .map((link: DashboardLink, index: number) => (
-          <DashboardLinkRenderer link={link} dashboardUID={uid} key={`${link.title}-$${index}`} />
-        ))}
+      {linksToDisplay.map((link: DashboardLink, index: number) => (
+        <DashboardLinkRenderer link={link} dashboardUID={uid} key={`${link.title}-$${index}`} />
+      ))}
     </div>
   );
 }
 
+function excludeControlMenuLinks(links: DashboardLink[]): DashboardLink[] {
+  if (!links || links.length === 0) {
+    return [];
+  }
+
+  return links.filter((link) => link.placement === undefined);
+}
+
 function getStyles(theme: GrafanaTheme2) {
   return {
     linksContainer: css({

public/app/features/dashboard-scene/settings/variables/components/SwitchVariableForm.tsx

@@ -11,6 +11,7 @@ interface SwitchVariableFormProps {
   disabledValue: string;
   onEnabledValueChange: (value: string) => void;
   onDisabledValueChange: (value: string) => void;
+  inline?: boolean;
 }
 
 const VALUE_PAIR_OPTIONS: Array<ComboboxOption<string>> = [
@@ -25,6 +26,7 @@ export function SwitchVariableForm({
   disabledValue,
   onEnabledValueChange,
   onDisabledValueChange,
+  inline,
 }: SwitchVariableFormProps) {
   const currentValuePairType = getCurrentValuePairType(enabledValue, disabledValue);
   const [isCustomValuePairType, setIsCustomValuePairType] = useState(currentValuePairType === 'custom');
@@ -87,11 +89,15 @@ export function SwitchVariableForm({
     }
   };
 
+  const fieldWidth = inline ? undefined : 30;
+
   return (
     <>
-      <VariableLegend>
-        <Trans i18nKey="dashboard-scene.switch-variable-form.switch-options">Switch options</Trans>
-      </VariableLegend>
+      {!inline && (
+        <VariableLegend>
+          <Trans i18nKey="dashboard-scene.switch-variable-form.switch-options">Switch options</Trans>
+        </VariableLegend>
+      )}
 
       <Stack gap={2} direction="column">
         <Field
@@ -103,7 +109,7 @@ export function SwitchVariableForm({
           )}
         >
           <Combobox
-            width={40}
+            width={fieldWidth}
             value={isCustomValuePairType ? 'custom' : currentValuePairType}
             options={VALUE_PAIR_OPTIONS}
             onChange={onValuePairTypeChange}
@@ -125,7 +131,7 @@ export function SwitchVariableForm({
               invalid={enabledValueInvalid}
             >
               <Input
-                width={40}
+                width={fieldWidth}
                 defaultValue={enabledValue}
                 onChange={(event) => {
                   handleEnabledValueChange(event.currentTarget.value);
@@ -149,7 +155,7 @@ export function SwitchVariableForm({
               invalid={disabledValueInvalid}
             >
               <Input
-                width={40}
+                width={fieldWidth}
                 defaultValue={disabledValue}
                 onChange={(event) => handleDisabledValueChange(event.currentTarget.value)}
                 placeholder={t(

public/app/features/dashboard-scene/settings/variables/editors/SwitchVariableEditor.tsx

@@ -5,9 +5,10 @@ import { SwitchVariableForm } from '../components/SwitchVariableForm';
 
 interface SwitchVariableEditorProps {
   variable: SwitchVariable;
+  inline?: boolean;
 }
 
-export function SwitchVariableEditor({ variable }: SwitchVariableEditorProps) {
+export function SwitchVariableEditor({ variable, inline = false }: SwitchVariableEditorProps) {
   const { value, enabledValue, disabledValue } = variable.useState();
 
   const onEnabledValueChange = (newEnabledValue: string) => {
@@ -36,6 +37,7 @@ export function SwitchVariableEditor({ variable }: SwitchVariableEditorProps) {
       disabledValue={disabledValue}
       onEnabledValueChange={onEnabledValueChange}
       onDisabledValueChange={onDisabledValueChange}
+      inline={inline}
     />
   );
 }
@@ -49,7 +51,7 @@ export function getSwitchVariableOptions(variable: SceneVariable): OptionsPaneIt
   return [
     new OptionsPaneItemDescriptor({
       id: `variable-${variable.state.name}-value`,
-      render: () => <SwitchVariableEditor variable={variable} />,
+      render: () => <SwitchVariableEditor variable={variable} inline={true} />,
     }),
   ];
 }