Enhances spo page section add with collapsibleTitle option. Closes #6461

docs/docs/cmd/spo/page/page-section-add.mdx

@@ -66,6 +66,9 @@ m365 spo page section add [options]
 
 `--overlayOpacity [overlayOpacity]`	
 : The overlay opacity for the background. Applied only when `zoneEmphasis` is `Image` or `Gradient`. Sets `60` value if not specified.
+
+`--collapsibleTitle [collapsibleTitle]`	
+: The display name of the collapsible section
 ```
 
 <Global />

src/m365/spo/commands/page/canvasContent.ts

@@ -61,4 +61,5 @@ interface ZoneGroupMetadata {
   isExpanded: boolean;
   showDividerLine: boolean;
   iconAlignment: string;
+  displayName?: string;
 }

src/m365/spo/commands/page/page-section-add.spec.ts

@@ -904,6 +904,42 @@ describe(commands.PAGE_SECTION_ADD, () => {
     assert.strictEqual(data, JSON.stringify({ "CanvasContent1": "[{\"displayMode\":2,\"position\":{\"zoneIndex\":1,\"sectionIndex\":1,\"sectionFactor\":12,\"layoutIndex\":1},\"emphasis\":{},\"zoneGroupMetadata\":{\"type\":1,\"isExpanded\":false,\"showDividerLine\":false,\"iconAlignment\":\"left\"}},{\"controlType\":0,\"pageSettingsSlice\":{\"isDefaultDescription\":true,\"isDefaultThumbnail\":true}}]" }));
   });
 
+  it('adds a OneColumn section at the end to an uncustomized page with collapsible setting and section title', async () => {
+    sinon.stub(request, 'get').callsFake(async (opts) => {
+      if ((opts.url as string).includes(`/_api/sitepages/pages/GetByUrl('sitepages/home.aspx')?$select=CanvasContent1,IsPageCheckedOutToCurrentUser`)) {
+        return {
+          "IsPageCheckedOutToCurrentUser": true,
+          "CanvasContent1": "[{\"controlType\":0,\"pageSettingsSlice\":{\"isDefaultDescription\":true,\"isDefaultThumbnail\":true}}]"
+        };
+      }
+
+      throw 'Invalid request';
+    });
+
+    let data: string = '';
+    sinon.stub(request, 'post').callsFake(async (opts) => {
+      if ((opts.url as string).includes(`/_api/sitepages/pages/GetByUrl('sitepages/home.aspx')/savepage`)) {
+        data = JSON.stringify(opts.data);
+        return {};
+      }
+
+      throw 'Invalid request';
+    });
+
+    await command.action(logger, {
+      options:
+      {
+        pageName: 'home.aspx',
+        webUrl: 'https://contoso.sharepoint.com/sites/newsletter',
+        sectionTemplate: 'OneColumn',
+        isCollapsibleSection: true,
+        iconAlignment: 'Right',
+        collapsibleTitle: 'Collapsible section title'
+      }
+    });
+    assert.strictEqual(data, JSON.stringify({ "CanvasContent1": "[{\"displayMode\":2,\"position\":{\"zoneIndex\":1,\"sectionIndex\":1,\"sectionFactor\":12,\"layoutIndex\":1},\"emphasis\":{},\"zoneGroupMetadata\":{\"type\":1,\"isExpanded\":false,\"showDividerLine\":false,\"iconAlignment\":\"right\",\"displayName\":\"Collapsible section title\"}},{\"controlType\":0,\"pageSettingsSlice\":{\"isDefaultDescription\":true,\"isDefaultThumbnail\":true}}]" }));
+  });
+
   it('correctly handles random API error', async () => {
     sinon.stub(request, 'get').callsFake(() => {
       throw 'An error has occurred';

src/m365/spo/commands/page/page-section-add.ts

@@ -32,6 +32,7 @@ interface Options extends GlobalOptions {
   useLightText?: boolean;
   overlayColor?: string;
   overlayOpacity?: number;
+  collapsibleTitle?: string;
 }
 
 class SpoPageSectionAddCommand extends SpoCommand {
@@ -74,7 +75,8 @@ class SpoPageSectionAddCommand extends SpoCommand {
         fillMode: typeof args.options.fillMode !== 'undefined',
         useLightText: !!args.options.useLightText,
         overlayColor: typeof args.options.overlayColor !== 'undefined',
-        overlayOpacity: typeof args.options.overlayOpacity !== 'undefined'
+        overlayOpacity: typeof args.options.overlayOpacity !== 'undefined',
+        collapsibleTitle: typeof args.options.collapsibleTitle !== 'undefined'
       });
     });
   }
@@ -138,6 +140,9 @@ class SpoPageSectionAddCommand extends SpoCommand {
       },
       {
         option: '--overlayOpacity [overlayOpacity]'
+      },
+      {
+        option: '--collapsibleTitle [collapsibleTitle]'
       }
     );
   }
@@ -214,7 +219,7 @@ class SpoPageSectionAddCommand extends SpoCommand {
   }
 
   #initTypes(): void {
-    this.types.string = ['pageName', 'webUrl', 'sectionTemplate', 'zoneEmphasis', 'iconAlignment', 'gradientText', 'imageUrl', 'fillMode', 'overlayColor'];
+    this.types.string = ['pageName', 'webUrl', 'sectionTemplate', 'zoneEmphasis', 'iconAlignment', 'gradientText', 'imageUrl', 'fillMode', 'overlayColor', 'collapsibleTitle'];
     this.types.boolean = ['isLayoutReflowOnTop', 'isCollapsibleSection', 'showDivider', 'isExpanded', 'useLightText'];
   }
 
@@ -368,7 +373,7 @@ class SpoPageSectionAddCommand extends SpoCommand {
   }
 
   private getColumn(zoneIndex: number, sectionIndex: number, sectionFactor: number, args: CommandArgs, zoneId?: string): Control {
-    const { zoneEmphasis, isCollapsibleSection, isExpanded, showDivider, iconAlignment } = args.options;
+    const { zoneEmphasis, isCollapsibleSection, isExpanded, showDivider, iconAlignment, collapsibleTitle } = args.options;
     const columnValue: Control = {
       displayMode: 2,
       position: {
@@ -393,7 +398,8 @@ class SpoPageSectionAddCommand extends SpoCommand {
         type: 1,
         isExpanded: !!isExpanded,
         showDividerLine: !!showDivider,
-        iconAlignment: iconAlignment && iconAlignment.toLocaleLowerCase() === "right" ? "right" : "left"
+        iconAlignment: iconAlignment && iconAlignment.toLocaleLowerCase() === "right" ? "right" : "left",
+        displayName: collapsibleTitle
       };
     }