feat(contentManagement): expose page API to allow remove section (ope…

…nsearch-project#8624)

* feat(contentManagement): expose page API to allow remove section

remove unnecessary space if card section title is not shown

Signed-off-by: Yulong Ruan <ruanyl@amazon.com>

* Changeset file for PR opensearch-project#8624 created/updated

---------

Signed-off-by: Yulong Ruan <ruanyl@amazon.com>
Co-authored-by: opensearch-changeset-bot[bot] <154024398+opensearch-changeset-bot[bot]@users.noreply.github.com>

changelogs/fragments/8624.yml

@@ -0,0 +1,2 @@
+feat:
+- (contentManagement) Add a Page API to allow remove section ([#8624](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/8624))

src/plugins/content_management/public/components/section_render.tsx

@@ -66,25 +66,24 @@ const CardSection = ({ section, embeddable, contents$ }: Props) => {
     return (
       <>
         {section.title ? (
-          <EuiTitle size="s">
-            <h2>
-              {isCardCollapsible ? (
-                <EuiButtonIcon
-                  iconType={isCardVisible ? 'arrowDown' : 'arrowRight'}
-                  onClick={() => setIsCardVisible(!isCardVisible)}
-                  color="text"
-                  aria-label={isCardVisible ? 'Show panel' : 'Hide panel'}
-                />
-              ) : null}
-              {section.title}
-            </h2>
-          </EuiTitle>
-        ) : null}
-        {isCardVisible && (
           <>
-            <EuiSpacer size="m" /> <EmbeddableRenderer factory={factory} input={input} />
+            <EuiTitle size="s">
+              <h2>
+                {isCardCollapsible ? (
+                  <EuiButtonIcon
+                    iconType={isCardVisible ? 'arrowDown' : 'arrowRight'}
+                    onClick={() => setIsCardVisible(!isCardVisible)}
+                    color="text"
+                    aria-label={isCardVisible ? 'Show panel' : 'Hide panel'}
+                  />
+                ) : null}
+                {section.title}
+              </h2>
+            </EuiTitle>
+            <EuiSpacer size="m" />
           </>
-        )}
+        ) : null}
+        {isCardVisible && <EmbeddableRenderer factory={factory} input={input} />}
       </>
     );
   }

src/plugins/content_management/public/plugin.ts

@@ -66,6 +66,7 @@ export class ContentManagementPublicPlugin
     return {
       registerContentProvider: this.contentManagementService.registerContentProvider,
       updatePageSection: this.contentManagementService.updatePageSection,
+      getPage: (id: string) => this.contentManagementService.getPage(id),
       renderPage: (id: string, renderOptions?: RenderOptions) => {
         const page = this.contentManagementService.getPage(id);
         if (page) {

src/plugins/content_management/public/services/content_management/page.test.ts

@@ -264,3 +264,16 @@ test('it should callback with error if section not exist', () => {
   expect(callbackMock.mock.calls[0][0]).toBe(null);
   expect(callbackMock.mock.calls[0][1]).toBeInstanceOf(Error);
 });
+
+test('it should remove the specified section', () => {
+  const page = new Page({ id: 'page1' });
+  page.createSection({
+    id: 'section_id',
+    kind: 'dashboard',
+    order: 1000,
+    input: { timeRange: { from: 'now-7d', to: 'now' } },
+  });
+  expect(page.getSections()).toHaveLength(1);
+  page.removeSection('section_id');
+  expect(page.getSections()).toHaveLength(0);
+});

src/plugins/content_management/public/services/content_management/page.ts

@@ -27,6 +27,11 @@ export class Page {
     this.setSection(section);
   }
 
+  removeSection(id: string) {
+    this.sections.delete(id);
+    this.sections$.next(this.getSections());
+  }
+
   getSections() {
     return [...this.sections.values()].sort((a, b) => a.order - b.order);
   }

src/plugins/content_management/public/types.ts

@@ -6,7 +6,7 @@
 import React from 'react';
 import { CoreStart } from 'opensearch-dashboards/public';
 
-import { ContentManagementService, ContentProvider, Section } from './services';
+import { ContentManagementService, ContentProvider, Page, Section } from './services';
 import { EmbeddableSetup, EmbeddableStart } from '../../embeddable/public';
 
 export interface ContentManagementPluginSetup {
@@ -36,6 +36,10 @@ export interface ContentManagementPluginStart {
     targetArea: string,
     callback: (section: Section | null, err?: Error) => Section | null
   ) => void;
+  /**
+   * @experimental this API is experimental and might change in future releases
+   */
+  getPage: (id: string) => Page | undefined;
   renderPage: (id: string, options?: RenderOptions) => React.ReactNode;
 }