Extract quickstarts banner into its own component

src/Components/LandingPage/LandingPage.tsx

@@ -2,7 +2,6 @@ import React, { useEffect, useState } from 'react';
 
 import {
   Button,
-  ExpandableSection,
   Label,
   Popover,
   Tabs,
@@ -12,35 +11,26 @@ import {
   TextContent,
   TabAction,
 } from '@patternfly/react-core';
-import {
-  ArrowRightIcon,
-  ExternalLinkAltIcon,
-  HelpIcon,
-} from '@patternfly/react-icons';
+import { ExternalLinkAltIcon, HelpIcon } from '@patternfly/react-icons';
 // eslint-disable-next-line rulesdir/disallow-fec-relative-imports
 import {
   OpenSourceBadge,
   PageHeader,
   PageHeaderTitle,
 } from '@redhat-cloud-services/frontend-components';
-import { useChrome } from '@redhat-cloud-services/frontend-components/useChrome';
 import { useFlag } from '@unleash/proxy-client-react';
 import { Outlet, useLocation, useNavigate } from 'react-router-dom';
 
 import './LandingPage.scss';
 
+import Quickstarts from './Quickstarts';
+
 import { manageEdgeImagesUrlName } from '../../Utilities/edge';
 import { resolveRelPath } from '../../Utilities/path';
 import EdgeImagesTable from '../edge/ImagesTable';
 import ImagesTable from '../ImagesTable/ImagesTable';
 
 export const LandingPage = () => {
-  const [showHint, setShowHint] = useState(true);
-
-  const { quickStarts } = useChrome();
-  const activateQuickstart = (qs: string) => () =>
-    quickStarts.activateQuickstart(qs);
-
   const { pathname } = useLocation();
   const navigate = useNavigate();
   const tabsPath = [
@@ -64,66 +54,7 @@ export const LandingPage = () => {
   const edgeParityFlag = useFlag('edgeParity.image-list');
   const traditionalImageList = (
     <section className="pf-l-page__main-section pf-c-page__main-section">
-      <ExpandableSection
-        className="pf-m-light pf-u-mb-xl expand-section"
-        toggleText="Help get started with new features"
-        onToggle={setShowHint}
-        isExpanded={showHint}
-        displaySize="large"
-      >
-        <p className="pf-u-pt-sm">
-          <Button
-            icon={<ArrowRightIcon />}
-            iconPosition="right"
-            variant="link"
-            isInline
-            component="a"
-            onClick={activateQuickstart('insights-launch-aws')}
-            className="pf-u-font-weight-bold"
-          >
-            Launch an AWS Image
-          </Button>
-        </p>
-        <p className="pf-u-pt-sm">
-          <Button
-            icon={<ArrowRightIcon />}
-            iconPosition="right"
-            variant="link"
-            isInline
-            component="a"
-            onClick={activateQuickstart('insights-launch-azure')}
-            className="pf-u-font-weight-bold"
-          >
-            Launch an Azure Image
-          </Button>
-        </p>
-        <p className="pf-u-pt-sm">
-          <Button
-            icon={<ArrowRightIcon />}
-            iconPosition="right"
-            variant="link"
-            isInline
-            component="a"
-            onClick={activateQuickstart('insights-launch-gcp')}
-            className="pf-u-font-weight-bold"
-          >
-            Launch a GCP Image
-          </Button>
-        </p>
-        <p className="pf-u-pt-sm">
-          <Button
-            icon={<ArrowRightIcon />}
-            iconPosition="right"
-            variant="link"
-            isInline
-            component="a"
-            onClick={activateQuickstart('insights-custom-repos')}
-            className="pf-u-font-weight-bold"
-          >
-            Build an Image with Custom Content
-          </Button>
-        </p>
-      </ExpandableSection>
+      <Quickstarts />
 
       <ImagesTable />
     </section>

src/Components/LandingPage/Quickstarts.tsx

@@ -0,0 +1,78 @@
+import React, { useState } from 'react';
+
+import { Button, ExpandableSection } from '@patternfly/react-core';
+import { ArrowRightIcon } from '@patternfly/react-icons';
+import { useChrome } from '@redhat-cloud-services/frontend-components/useChrome';
+
+export const Quickstarts = () => {
+  const [showHint, setShowHint] = useState(true);
+
+  const { quickStarts } = useChrome();
+  const activateQuickstart = (qs: string) => () =>
+    quickStarts.activateQuickstart(qs);
+
+  return (
+    <ExpandableSection
+      className="pf-m-light pf-u-mb-xl expand-section"
+      toggleText="Help get started with new features"
+      onToggle={setShowHint}
+      isExpanded={showHint}
+      displaySize="large"
+    >
+      <p className="pf-u-pt-sm">
+        <Button
+          icon={<ArrowRightIcon />}
+          iconPosition="right"
+          variant="link"
+          isInline
+          component="a"
+          onClick={activateQuickstart('insights-launch-aws')}
+          className="pf-u-font-weight-bold"
+        >
+          Launch an AWS Image
+        </Button>
+      </p>
+      <p className="pf-u-pt-sm">
+        <Button
+          icon={<ArrowRightIcon />}
+          iconPosition="right"
+          variant="link"
+          isInline
+          component="a"
+          onClick={activateQuickstart('insights-launch-azure')}
+          className="pf-u-font-weight-bold"
+        >
+          Launch an Azure Image
+        </Button>
+      </p>
+      <p className="pf-u-pt-sm">
+        <Button
+          icon={<ArrowRightIcon />}
+          iconPosition="right"
+          variant="link"
+          isInline
+          component="a"
+          onClick={activateQuickstart('insights-launch-gcp')}
+          className="pf-u-font-weight-bold"
+        >
+          Launch a GCP Image
+        </Button>
+      </p>
+      <p className="pf-u-pt-sm">
+        <Button
+          icon={<ArrowRightIcon />}
+          iconPosition="right"
+          variant="link"
+          isInline
+          component="a"
+          onClick={activateQuickstart('insights-custom-repos')}
+          className="pf-u-font-weight-bold"
+        >
+          Build an Image with Custom Content
+        </Button>
+      </p>
+    </ExpandableSection>
+  );
+};
+
+export default Quickstarts;