fix(scopes): add missing dashboards toggle button

public/app/features/scopes/internal/ScopesDashboardsScene.tsx

@@ -3,7 +3,7 @@ import { isEqual } from 'lodash';
 
 import { GrafanaTheme2, ScopeDashboardBinding } from '@grafana/data';
 import { SceneComponentProps, SceneObjectBase, SceneObjectRef, SceneObjectState } from '@grafana/scenes';
-import { Button, CustomScrollbar, LoadingPlaceholder, useStyles2 } from '@grafana/ui';
+import { Button, CustomScrollbar, IconButton, LoadingPlaceholder, useStyles2 } from '@grafana/ui';
 import { t, Trans } from 'app/core/internationalization';
 
 import { ScopesDashboardsTree } from './ScopesDashboardsTree';
@@ -16,11 +16,8 @@ import { filterFolders, getScopeNamesFromSelectedScopes, groupDashboards } from
 
 export interface ScopesDashboardsSceneState extends SceneObjectState {
   selector: SceneObjectRef<ScopesSelectorScene> | null;
-  // by keeping a track of the raw response, it's much easier to check if we got any dashboards for the currently selected scopes
   dashboards: ScopeDashboardBinding[];
-  // this is a grouping in folders of the `dashboards` property. it is used for filtering the dashboards and folders when the search query changes
   folders: SuggestedDashboardsFoldersMap;
-  // a filtered version of the `folders` property. this prevents a lot of unnecessary parsings in React renders
   filteredFolders: SuggestedDashboardsFoldersMap;
   forScopeNames: string[];
   isLoading: boolean;
@@ -173,17 +170,31 @@ export function ScopesDashboardsSceneRenderer({ model }: SceneComponentProps<Sco
 
   const styles = useStyles2(getStyles);
 
-  if (!isEnabled || !isPanelOpened) {
+  const toggleButton = (
+    <IconButton
+      name={isPanelOpened ? 'angle-down' : 'angle-right'}
+      tooltip={isPanelOpened ? 'Collapse dashboards' : 'Expand dashboards'}
+      data-testid="scopes-dashboards-expand"
+      onClick={() => model.togglePanel()}
+    />
+  );
+
+  if (!isEnabled) {
     return null;
   }
 
+  if (!isPanelOpened) {
+    return toggleButton;
+  }
+
   if (!isLoading) {
     if (!scopesSelected) {
       return (
         <div
           className={cx(styles.container, styles.noResultsContainer)}
           data-testid="scopes-dashboards-notFoundNoScopes"
         >
+          {toggleButton}
           <Trans i18nKey="scopes.dashboards.noResultsNoScopes">No scopes selected</Trans>
         </div>
       );
@@ -193,6 +204,7 @@ export function ScopesDashboardsSceneRenderer({ model }: SceneComponentProps<Sco
           className={cx(styles.container, styles.noResultsContainer)}
           data-testid="scopes-dashboards-notFoundForScope"
         >
+          {toggleButton}
           <Trans i18nKey="scopes.dashboards.noResultsForScopes">No dashboards found for the selected scopes</Trans>
         </div>
       );
@@ -201,11 +213,14 @@ export function ScopesDashboardsSceneRenderer({ model }: SceneComponentProps<Sco
 
   return (
     <div className={styles.container} data-testid="scopes-dashboards-container">
-      <ScopesDashboardsTreeSearch
-        disabled={isLoading}
-        query={searchQuery}
-        onChange={(value) => model.changeSearchQuery(value)}
-      />
+      <div className={styles.header}>
+        {toggleButton}
+        <ScopesDashboardsTreeSearch
+          disabled={isLoading}
+          query={searchQuery}
+          onChange={(value) => model.changeSearchQuery(value)}
+        />
+      </div>
 
       {isLoading ? (
         <LoadingPlaceholder
@@ -263,5 +278,10 @@ const getStyles = (theme: GrafanaTheme2) => {
     loadingIndicator: css({
       alignSelf: 'center',
     }),
+    header: css({
+      display: 'flex',
+      alignItems: 'center',
+      gap: theme.spacing(1),
+    }),
   };
 };