From 955c189bf6f5ac850aca4189202477b35637383b Mon Sep 17 00:00:00 2001
From: baljesingh <baljesingh@microsoft.com>
Date: Thu, 19 Sep 2024 13:54:48 -0700
Subject: [PATCH] Fix macOS UI issue by introducing grouped mode to load
 specific sections in test app

---
 apps/teams-test-app/src/App.css           |  28 ++++
 apps/teams-test-app/src/pages/TestApp.tsx | 178 ++++++++++++++--------
 2 files changed, 140 insertions(+), 66 deletions(-)

diff --git a/apps/teams-test-app/src/App.css b/apps/teams-test-app/src/App.css
index 76b873fae0..7b61b5be4d 100644
--- a/apps/teams-test-app/src/App.css
+++ b/apps/teams-test-app/src/App.css
@@ -16,3 +16,31 @@
 .App-container {
   display: grid;
 }
+
+/* ==============================================================
+ * Grouped Mode - Button, Section Button, and Section Content Styles
+ * ============================================================== */
+
+/* Style for individual section buttons */
+.section-button-in-grouped-mode {
+  background-color: #0f6cbd; /* Blue background for buttons */
+  color: white; /* White text */
+  border: none; /* Remove default border */
+  border-radius: 4px; /* Rounded corners */
+  padding: 8px 15px; /* Padding inside the button */
+  cursor: pointer; /* Pointer cursor on hover */
+  font-size: 14px; /* Font size of the button text */
+}
+
+/* Style for section button hover effect */
+.section-button-in-grouped-mode:hover {
+  background-color: #0056b3; /* Darker blue on hover */
+}
+
+/* Style for the section content */
+.section-content-in-grouped-mode {
+  margin-top: 2px; /* Space above each section's content */
+  border: 1px solid #ddd; /* Light grey border around the section */
+  padding: 4px; /* Padding inside the section */
+  border-radius: 4px; /* Rounded corners */
+}
diff --git a/apps/teams-test-app/src/pages/TestApp.tsx b/apps/teams-test-app/src/pages/TestApp.tsx
index 8e24066539..0938ad8ee9 100644
--- a/apps/teams-test-app/src/pages/TestApp.tsx
+++ b/apps/teams-test-app/src/pages/TestApp.tsx
@@ -1,5 +1,5 @@
 import { IAppWindow } from '@microsoft/teams-js';
-import React from 'react';
+import React, { useRef, useState } from 'react';
 
 import AppAPIs from '../components/AppAPIs';
 import AppEntityAPIs from '../components/AppEntityAPIs';
@@ -69,13 +69,95 @@ import WebStorageAPIs from '../components/WebStorageAPIs';
 export const appInitializationTestQueryParameter = 'appInitializationTest';
 
 export const TestApp: React.FC = () => {
-  const dialogWindowRef = React.useRef<IAppWindow | null>(null);
-  const [iframeUrl, setIframeUrl] = React.useState<URL | null>(null);
+  const dialogWindowRef = useRef<IAppWindow | null>(null);
+  const [iframeUrl, setIframeUrl] = useState<URL | null>(null);
+  const [groupedMode, setGroupedMode] = useState(false); // Toggle between default and grouped mode
+  const [visibleSections, setVisibleSections] = useState<string[]>([]); // Track multiple open sections
 
   const loadCurrentUrl = (): void => {
     setIframeUrl(new URL(window.location.href + `?${appInitializationTestQueryParameter}=true`));
   };
 
+  // Function to toggle the visibility of a specific section
+  const toggleSection = (sectionName: string): void => {
+    setVisibleSections(
+      (prev) =>
+        prev.includes(sectionName)
+          ? prev.filter((section) => section !== sectionName) // Hide section if already open
+          : [...prev, sectionName], // Show section if not open
+    );
+  };
+
+  // List of sections dynamically created from React elements
+  const sections = [
+    { name: 'AppAPIs', component: <AppAPIs /> },
+    { name: 'AppInitializationAPIs', component: <AppInitializationAPIs /> },
+    { name: 'AppInstallDialogAPIs', component: <AppInstallDialogAPIs /> },
+    { name: 'AuthenticationAPIs', component: <AuthenticationAPIs /> },
+    { name: 'AppEntityAPIs', component: <AppEntityAPIs /> },
+    { name: 'BarCodeAPIs', component: <BarCodeAPIs /> },
+    { name: 'CalendarAPIs', component: <CalendarAPIs /> },
+    { name: 'CallAPIs', component: <CallAPIs /> },
+    { name: 'ChatAPIs', component: <ChatAPIs /> },
+    { name: 'ClipboardAPIs', component: <ClipboardAPIs /> },
+    { name: 'CookieAccessComponent', component: <CookieAccessComponent /> },
+    { name: 'CopilotAPIs', component: <CopilotAPIs /> },
+    { name: 'CustomAPIs', component: <CustomAPIs /> },
+    { name: 'DialogAPIs', component: <DialogAPIs /> },
+    { name: 'DialogCardAPIs', component: <DialogCardAPIs /> },
+    { name: 'DialogCardBotAPIs', component: <DialogCardBotAPIs /> },
+    { name: 'DialogUpdateAPIs', component: <DialogUpdateAPIs /> },
+    { name: 'DialogUrlAPIs', component: <DialogUrlAPIs childWindowRef={dialogWindowRef} /> },
+    { name: 'DialogUrlBotAPIs', component: <DialogUrlBotAPIs /> },
+    {
+      name: 'DialogUrlParentCommunicationAPIs',
+      component: <DialogUrlParentCommunicationAPIs childWindowRef={dialogWindowRef} />,
+    },
+    { name: 'ExternalAppAuthenticationAPIs', component: <ExternalAppAuthenticationAPIs /> },
+    { name: 'ExternalAppCardActionsAPIs', component: <ExternalAppCardActionsAPIs /> },
+    { name: 'ExternalAppCommandsAPIs', component: <ExternalAppCommandsAPIs /> },
+    { name: 'FilesAPIs', component: <FilesAPIs /> },
+    { name: 'FullTrustAPIs', component: <FullTrustAPIs /> },
+    { name: 'GeoLocationAPIs', component: <GeoLocationAPIs /> },
+    { name: 'HostEntityTabAPIs', component: <HostEntityTabAPIs /> },
+    { name: 'Links', component: <Links /> },
+    { name: 'LocationAPIs', component: <LocationAPIs /> },
+    { name: 'LogAPIs', component: <LogAPIs /> },
+    { name: 'MailAPIs', component: <MailAPIs /> },
+    { name: 'MarketplaceAPIs', component: <MarketplaceAPIs /> },
+    { name: 'MediaAPIs', component: <MediaAPIs /> },
+    { name: 'MeetingAPIs', component: <MeetingAPIs /> },
+    { name: 'MeetingRoomAPIs', component: <MeetingRoomAPIs /> },
+    { name: 'MenusAPIs', component: <MenusAPIs /> },
+    { name: 'MessageChannelAPIs', component: <MessageChannelAPIs /> },
+    { name: 'MonetizationAPIs', component: <MonetizationAPIs /> },
+    { name: 'NestedAppAuthAPIs', component: <NestedAppAuthAPIs /> },
+    { name: 'NotificationAPIs', component: <NotificationAPIs /> },
+    { name: 'OtherAppStateChangedAPIs', component: <OtherAppStateChangedAPIs /> },
+    { name: 'PagesAPIs', component: <PagesAPIs /> },
+    { name: 'PagesAppButtonAPIs', component: <PagesAppButtonAPIs /> },
+    { name: 'PagesBackStackAPIs', component: <PagesBackStackAPIs /> },
+    { name: 'PagesConfigAPIs', component: <PagesConfigAPIs /> },
+    { name: 'PagesCurrentAppAPIs', component: <PagesCurrentAppAPIs /> },
+    { name: 'PagesTabsAPIs', component: <PagesTabsAPIs /> },
+    { name: 'PeopleAPIs', component: <PeopleAPIs /> },
+    { name: 'PrivateAPIs', component: <PrivateAPIs /> },
+    { name: 'ProfileAPIs', component: <ProfileAPIs /> },
+    { name: 'RemoteCameraAPIs', component: <RemoteCameraAPIs /> },
+    { name: 'SearchAPIs', component: <SearchAPIs /> },
+    { name: 'SecondaryBrowserAPIs', component: <SecondaryBrowserAPIs /> },
+    { name: 'SharingAPIs', component: <SharingAPIs /> },
+    { name: 'WebStorageAPIs', component: <WebStorageAPIs /> },
+    { name: 'StageViewAPIs', component: <StageViewAPIs /> },
+    { name: 'StageViewSelfAPIs', component: <StageViewSelfAPIs /> },
+    { name: 'TeamsCoreAPIs', component: <TeamsCoreAPIs /> },
+    { name: 'TeamsAPIs', component: <TeamsAPIs /> },
+    { name: 'ThirdPartyCloudStorageAPIs', component: <ThirdPartyCloudStorageAPIs /> },
+    { name: 'VideoAPIs', component: <VideoAPIs /> },
+    { name: 'VideoExAPIs', component: <VideoExAPIs /> },
+    { name: 'VisualMediaAPIs', component: <VisualMediaAPIs /> },
+  ];
+
   return (
     <>
       <button id="button_reload" onClick={() => window.location.reload()}>
@@ -84,6 +166,12 @@ export const TestApp: React.FC = () => {
       <button id="button_iframe" onClick={loadCurrentUrl}>
         Load Current URL in child Iframe for initialization testing
       </button>
+
+      {/* Toggle between default and grouped mode */}
+      <button onClick={() => setGroupedMode(!groupedMode)}>
+        {groupedMode ? 'Show All Sections' : 'Switch to Grouped Mode'}
+      </button>
+
       <div className="App-container">
         {iframeUrl !== null && (
           <div>
@@ -92,69 +180,27 @@ export const TestApp: React.FC = () => {
             <iframe src={iframeUrl.toString()} width="100%" height="500px" />
           </div>
         )}
-        <AppAPIs />
-        <AppInitializationAPIs />
-        <AppInstallDialogAPIs />
-        <AuthenticationAPIs />
-        <AppEntityAPIs />
-        <BarCodeAPIs />
-        <CalendarAPIs />
-        <CallAPIs />
-        <ChatAPIs />
-        <ClipboardAPIs />
-        <CookieAccessComponent />
-        <CopilotAPIs />
-        <CustomAPIs />
-        <DialogAPIs />
-        <DialogCardAPIs />
-        <DialogCardBotAPIs />
-        <DialogUpdateAPIs />
-        <DialogUrlAPIs childWindowRef={dialogWindowRef} />
-        <DialogUrlBotAPIs />
-        <DialogUrlParentCommunicationAPIs childWindowRef={dialogWindowRef} />
-        <ExternalAppAuthenticationAPIs />
-        <ExternalAppCardActionsAPIs />
-        <ExternalAppCommandsAPIs />
-        <FilesAPIs />
-        <FullTrustAPIs />
-        <GeoLocationAPIs />
-        <HostEntityTabAPIs />
-        <Links />
-        <LocationAPIs />
-        <LogAPIs />
-        <MailAPIs />
-        <MarketplaceAPIs />
-        <MediaAPIs />
-        <MeetingAPIs />
-        <MeetingRoomAPIs />
-        <MenusAPIs />
-        <MessageChannelAPIs />
-        <MonetizationAPIs />
-        <NestedAppAuthAPIs />
-        <NotificationAPIs />
-        <OtherAppStateChangedAPIs />
-        <PagesAPIs />
-        <PagesAppButtonAPIs />
-        <PagesBackStackAPIs />
-        <PagesConfigAPIs />
-        <PagesCurrentAppAPIs />
-        <PagesTabsAPIs />
-        <PeopleAPIs />
-        <PrivateAPIs />
-        <ProfileAPIs />
-        <RemoteCameraAPIs />
-        <SearchAPIs />
-        <SecondaryBrowserAPIs />
-        <SharingAPIs />
-        <WebStorageAPIs />
-        <StageViewAPIs />
-        <StageViewSelfAPIs />
-        <TeamsCoreAPIs />
-        <TeamsAPIs />
-        <ThirdPartyCloudStorageAPIs />
-        <VideoAPIs />
-        <VideoExAPIs />
-        <VisualMediaAPIs />
+
+        {/* Default mode: Show all sections */}
+        {!groupedMode ? (
+          <>
+            {sections.map((section) => (
+              <React.Fragment key={section.name}>{section.component}</React.Fragment>
+            ))}
+          </>
+        ) : (
+          <>
+            {/* Grouped mode: Dynamically create buttons for each section */}
+            {sections.map((section) => (
+              <div key={section.name} className="section-content-in-grouped-mode">
+                <button className="section-button-in-grouped-mode" onClick={() => toggleSection(section.name)}>
+                  {section.name}
+                </button>
+                {visibleSections.includes(section.name) && section.component}
+              </div>
+            ))}
+          </>
+        )}
       </div>
       <Version />
     </>