Merge pull request #14968 from logonoff/OCPBUGS-54963-card

OCPBUGS-54963: Fix visual regression with knative getting started card

Author: openshift-merge-bot[bot]

frontend/packages/console-shared/src/components/getting-started/GettingStartedExpandableGrid.tsx

@@ -20,24 +20,44 @@ interface GettingStartedExpandableGridProps {
   isOpen?: boolean;
   setIsOpen?: (isOpen: boolean) => void;
   setShowState?: (showState: GettingStartedShowState) => void;
+  /** Optional title content. Defaults to "Getting started" */
+  title?: React.ReactNode;
+  /** Optional tooltip content placed after the title. Has default content. */
+  titleTooltip?: React.ReactNode | false;
+  /** Optional header content */
+  headerContent?: React.ReactNode;
+  /** Optional footer content */
+  footerContent?: React.ReactNode;
 }
 
-export const GettingStartedExpandableGrid: React.FC<GettingStartedExpandableGridProps> = ({
-  children,
-  isOpen,
-  setIsOpen,
-  setShowState,
-}) => {
+const TitleContent = () => {
   const { t } = useTranslation();
+  return <>{t('console-shared~Getting started resources')}</>;
+};
 
-  const title = t('console-shared~Getting started resources');
-  const titleTooltip = (
+const TitlePopoverContent = () => {
+  const { t } = useTranslation();
+
+  return (
     <span className="ocs-getting-started-expandable-grid__tooltip">
       {t(
         'console-shared~Use our collection of resources to help you get started with the Console.',
       )}
     </span>
   );
+};
+
+export const GettingStartedExpandableGrid: React.FC<GettingStartedExpandableGridProps> = ({
+  children,
+  isOpen,
+  setIsOpen,
+  setShowState,
+  title = <TitleContent />,
+  titleTooltip = <TitlePopoverContent />,
+  headerContent,
+  footerContent,
+}) => {
+  const { t } = useTranslation();
 
   const handleClose = () => {
     setShowState(GettingStartedShowState.HIDE);
@@ -75,15 +95,19 @@ export const GettingStartedExpandableGrid: React.FC<GettingStartedExpandableGrid
       >
         <CardTitle data-test="title" id="expandable-card-title">
           {title}{' '}
-          <Popover bodyContent={titleTooltip} triggerAction="hover">
-            <span role="button" aria-label={t('console-shared~More info')}>
-              <OutlinedQuestionCircleIcon />
-            </span>
-          </Popover>
+          {titleTooltip && (
+            <Popover bodyContent={titleTooltip} triggerAction="hover">
+              <span role="button" aria-label={t('console-shared~More info')}>
+                <OutlinedQuestionCircleIcon />
+              </span>
+            </Popover>
+          )}
         </CardTitle>
       </CardHeader>
       <CardExpandableContent>
+        {headerContent && headerContent}
         <CardBody className="ocs-getting-started-expandable-grid__content">{children}</CardBody>
+        {footerContent && footerContent}
       </CardExpandableContent>
     </Card>
   );

frontend/packages/knative-plugin/src/components/functions/GettingStartedSection.scss

@@ -1,14 +1,12 @@
 import * as React from 'react';
-import { Card, CardBody, ExpandableSection } from '@patternfly/react-core';
+import { CardHeader, Content, ContentVariants, PageSection } from '@patternfly/react-core';
 import { useTranslation } from 'react-i18next';
-import { useUserSettings } from '@console/shared';
+import { GettingStartedExpandableGrid, useUserSettings } from '@console/shared';
 import { FUNCTIONS_GETTING_STARTED_SECTION_USER_SETTING_KEY } from '../../const';
 import { FunctionsDocsGettingStartedCard } from './FunctionsDocsGettingStartedCard';
 import { QuickStartGettingStartedCard } from './QuickStartGettingStartedCard';
 import { SampleGettingStartedCard } from './SamplesGettingStartedCard';
 
-import './GettingStartedSection.scss';
-
 export const GettingStartedSection: React.FC = () => {
   const { t } = useTranslation();
 
@@ -18,30 +16,30 @@ export const GettingStartedSection: React.FC = () => {
   );
 
   return (
-    <div className="odc-functions-getting-started-section">
-      <ExpandableSection
-        toggleText={t('knative-plugin~Get started with functions')}
-        onToggle={() => setIsGettingStartedSectionOpen(!isGettingStartedSectionOpen)}
-        isExpanded={isGettingStartedSectionOpen}
-        displaySize="lg"
+    <PageSection className="pf-v6-u-pt-0">
+      <GettingStartedExpandableGrid
+        setIsOpen={setIsGettingStartedSectionOpen}
+        isOpen={isGettingStartedSectionOpen}
+        title={<>{t('knative-plugin~Get started with functions')}</>}
+        headerContent={
+          <CardHeader>
+            <Content component={ContentVariants.h4}>
+              {t('knative-plugin~Choose how to create a function from below methods')}
+            </Content>
+          </CardHeader>
+        }
+        titleTooltip={false}
       >
-        <Card className="odc-functions-getting-started-grid" data-test="getting-started">
-          <span className="odc-functions-getting-started-grid__title">
-            {t('knative-plugin~Choose how to create a function from below methods')}
-          </span>
-          <CardBody className="odc-functions-getting-started-grid__content">
-            <SampleGettingStartedCard />
-            <QuickStartGettingStartedCard
-              featured={['serverless-functions-using-cli', 'serverless-functions-using-ide']}
-              title={t('knative-plugin~Create function with guided documentation')}
-              description={t(
-                'knative-plugin~Follow guided documentation to create serverless functions.',
-              )}
-            />
-            <FunctionsDocsGettingStartedCard />
-          </CardBody>
-        </Card>
-      </ExpandableSection>
-    </div>
+        <SampleGettingStartedCard />
+        <QuickStartGettingStartedCard
+          featured={['serverless-functions-using-cli', 'serverless-functions-using-ide']}
+          title={t('knative-plugin~Create function with guided documentation')}
+          description={t(
+            'knative-plugin~Follow guided documentation to create serverless functions.',
+          )}
+        />
+        <FunctionsDocsGettingStartedCard />
+      </GettingStartedExpandableGrid>
+    </PageSection>
   );
 };