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 <[email protected]> * Changeset file for PR opensearch-project#8624 created/updated --------- Signed-off-by: Yulong Ruan <[email protected]> Co-authored-by: opensearch-changeset-bot[bot] <154024398+opensearch-changeset-bot[bot]@users.noreply.github.com>
CPTNB · Oct 17, 2024 · 650166d · 650166d
1 parent 527ebb6
commit 650166d
Show file tree

Hide file tree

Showing 6 changed files with 42 additions and 18 deletions.
diff --git a/changelogs/fragments/8624.yml b/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))
diff --git a/src/plugins/content_management/public/components/section_render.tsx b/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} />}
       </>
     );
   }

diff --git a/src/plugins/content_management/public/plugin.ts b/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) {

diff --git a/src/plugins/content_management/public/services/content_management/page.test.ts b/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);
+});
diff --git a/src/plugins/content_management/public/services/content_management/page.ts b/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);
   }

diff --git a/src/plugins/content_management/public/types.ts b/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;
 }