[Dashboard] [Controls] Hide controls callout when the hideAnnouncements setting is true (#136410)

* Make controls callout dependent on new UI setting

* Add functional test

src/plugins/dashboard/public/application/embeddable/viewport/dashboard_viewport.tsx

@@ -107,12 +107,16 @@ export class DashboardViewport extends React.Component<DashboardViewportProps, S
     const isEditMode = container.getInput().viewMode !== ViewMode.VIEW;
     const { isEmbeddedExternally, isFullScreenMode, panelCount, title, description, useMargins } =
       this.state;
+    const hideAnnouncements = Boolean(this.context.services.uiSettings.get('hideAnnouncements'));
 
     return (
       <>
         {controlsEnabled ? (
           <>
-            {isEditMode && panelCount !== 0 && controlGroup?.getPanelCount() === 0 ? (
+            {!hideAnnouncements &&
+            isEditMode &&
+            panelCount !== 0 &&
+            controlGroup?.getPanelCount() === 0 ? (
               <ControlsCallout
                 getCreateControlButton={() => {
                   return controlGroup?.getCreateControlButton('callout');

test/functional/apps/dashboard_elements/controls/controls_callout.ts

@@ -11,8 +11,12 @@ import { OPTIONS_LIST_CONTROL } from '@kbn/controls-plugin/common';
 import { FtrProviderContext } from '../../../ftr_provider_context';
 
 export default function ({ getService, getPageObjects }: FtrProviderContext) {
+  const kibanaServer = getService('kibanaServer');
+  const browser = getService('browser');
   const testSubjects = getService('testSubjects');
   const dashboardAddPanel = getService('dashboardAddPanel');
+  const dashboardPanelActions = getService('dashboardPanelActions');
+
   const { dashboardControls, timePicker, dashboard } = getPageObjects([
     'dashboardControls',
     'timePicker',
@@ -25,12 +29,24 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
     describe('callout visibility', async () => {
       before(async () => {
         await dashboard.gotoDashboardLandingPage();
+
         await dashboard.clickNewDashboard();
         await timePicker.setDefaultDataRange();
         await dashboard.saveDashboard('Test Controls Callout');
       });
 
       describe('does not show the empty control callout on an empty dashboard', async () => {
+        before(async () => {
+          const panelCount = await dashboard.getPanelCount();
+          if (panelCount > 0) {
+            const panels = await dashboard.getAllPanels();
+            for (const panel of panels) {
+              await dashboardPanelActions.removePanel(panel);
+            }
+            await dashboard.clickQuickSave();
+          }
+        });
+
         it('in view mode', async () => {
           await dashboard.clickCancelOutOfEditMode();
           await testSubjects.missingOrFail('controls-empty');
@@ -44,7 +60,10 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
 
       it('show the empty control callout on a dashboard with panels', async () => {
         await dashboard.switchToEditMode();
-        await dashboardAddPanel.addVisualization('Rendering-Test:-animal-sounds-pie');
+        const panelCount = await dashboard.getPanelCount();
+        if (panelCount < 1) {
+          await dashboardAddPanel.addVisualization('Rendering-Test:-animal-sounds-pie');
+        }
         await testSubjects.existOrFail('controls-empty');
       });
 
@@ -57,6 +76,24 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
         await testSubjects.missingOrFail('controls-empty');
       });
 
+      it('deleting all controls shows the emoty control callout again', async () => {
+        await dashboardControls.deleteAllControls();
+        await testSubjects.existOrFail('controls-empty');
+      });
+
+      it('hide callout when hide announcement setting is true', async () => {
+        await dashboard.clickQuickSave();
+        await dashboard.gotoDashboardLandingPage();
+        await kibanaServer.uiSettings.update({ hideAnnouncements: true });
+        await browser.refresh();
+
+        await dashboard.loadSavedDashboard('Test Controls Callout');
+        await dashboard.switchToEditMode();
+        await testSubjects.missingOrFail('controls-empty');
+
+        await kibanaServer.uiSettings.update({ hideAnnouncements: false });
+      });
+
       after(async () => {
         await dashboard.clickCancelOutOfEditMode();
         await dashboard.gotoDashboardLandingPage();

test/functional/page_objects/dashboard_page.ts

@@ -42,6 +42,7 @@ export class DashboardPageObject extends FtrService {
   private readonly header = this.ctx.getPageObject('header');
   private readonly visualize = this.ctx.getPageObject('visualize');
   private readonly discover = this.ctx.getPageObject('discover');
+
   private readonly logstashIndex = this.config.get('esTestCluster.ccs')
     ? 'ftr-remote:logstash-*'
     : 'logstash-*';
@@ -605,6 +606,11 @@ export class DashboardPageObject extends FtrService {
     return panels.length;
   }
 
+  public async getAllPanels() {
+    this.log.debug('getAllPanels');
+    return await this.testSubjects.findAll('embeddablePanel');
+  }
+
   public getTestVisualizations() {
     return [
       { name: PIE_CHART_VIS_NAME, description: 'PieChart' },