fix: get started content is not visible (#9219)

Render Get Started content in panel content area to avoid content truncation.

The initial approach was working on the previous fluent version due to relaxed styles for the panel header area. Now the overlapping content is truncated causing the panel to be empty.

It is not recommended to use the header area for rendering panel content.

Composer/packages/client/src/components/GetStarted/GetStarted.tsx

@@ -3,7 +3,7 @@
 
 /** @jsx jsx */
 import { jsx } from '@emotion/react';
-import React from 'react';
+import React, { useState, useCallback } from 'react';
 import formatMessage from 'format-message';
 import { Panel, IPanelStyles, PanelType } from '@fluentui/react/lib/Panel';
 import { Pivot, PivotItem } from '@fluentui/react/lib/Pivot';
@@ -22,29 +22,57 @@ type GetStartedProps = {
   onBotReady: () => void;
 };
 
-const panelStyles = {
+const panelStyles: Partial<IPanelStyles> = {
   root: {
     marginTop: 50,
   },
-} as IPanelStyles;
+};
+
+enum GetStartedTab {
+  GetStarted = 'GetStarted',
+  LearnMore = 'LearnMore',
+}
+
+interface ActiveTabContentProps {
+  activeTab: GetStartedTab;
+  tabProps: GetStartedProps;
+}
+
+const ActiveTabContent: React.FC<ActiveTabContentProps> = ({ activeTab, tabProps }) => {
+  switch (activeTab) {
+    case GetStartedTab.GetStarted:
+      return <GetStartedNextSteps {...tabProps} />;
+    case GetStartedTab.LearnMore: {
+      const { projectId, onDismiss } = tabProps;
+      return <GetStartedLearn {...{ projectId, onDismiss }} />;
+    }
+    default:
+      return null;
+  }
+};
 
 export const GetStarted: React.FC<GetStartedProps> = (props) => {
-  const { projectId, onDismiss } = props;
+  const [activeTab, setActiveTab] = useState(GetStartedTab.GetStarted);
+
+  const handleLinkClick = useCallback((item?: PivotItem) => {
+    if (item) {
+      setActiveTab(item.props.itemKey as GetStartedTab);
+    }
+  }, []);
 
-  const renderTabs = () => {
+  const renderTabs = useCallback(() => {
     return (
       <Stack grow styles={{ root: { alignSelf: 'flex-start', padding: '0 20px' } }}>
-        <Pivot styles={{ link: { fontSize: '20px' }, linkIsSelected: { fontSize: '20px' } }}>
-          <PivotItem headerText={formatMessage('Get started')}>
-            <GetStartedNextSteps {...props} />
-          </PivotItem>
-          <PivotItem headerText={formatMessage('Learn more')}>
-            <GetStartedLearn projectId={projectId} onDismiss={onDismiss} />
-          </PivotItem>
+        <Pivot
+          styles={{ link: { fontSize: '20px' }, linkIsSelected: { fontSize: '20px' } }}
+          onLinkClick={handleLinkClick}
+        >
+          <PivotItem headerText={formatMessage('Get started')} itemKey={GetStartedTab.GetStarted} />
+          <PivotItem headerText={formatMessage('Learn more')} itemKey={GetStartedTab.LearnMore} />
         </Pivot>
       </Stack>
     );
-  };
+  }, []);
 
   return (
     <Panel
@@ -56,6 +84,8 @@ export const GetStarted: React.FC<GetStartedProps> = (props) => {
       type={PanelType.custom}
       onDismiss={props.onDismiss}
       onRenderHeader={renderTabs}
-    />
+    >
+      <ActiveTabContent activeTab={activeTab} tabProps={props} />
+    </Panel>
   );
 };