Merge pull request #13466 from lokanandaprabhu/feature/ODC-7465

ODC-7465: Update Getting started section in Openshift UI to use expandable section

Author: openshift-merge-bot[bot]

frontend/packages/console-shared/locales/en/console-shared.json

@@ -152,11 +152,12 @@
   "Switching to form view will delete any invalid YAML.": "Switching to form view will delete any invalid YAML.",
   "Switch and delete": "Switch and delete",
   "Form view is disabled for this chart because the schema is not available": "Form view is disabled for this chart because the schema is not available",
+  "Getting started resources": "Getting started resources",
+  "Use our collection of resources to help you get started with the Console.": "Use our collection of resources to help you get started with the Console.",
+  "More info": "More info",
   "You can always bring these getting started resources back into view by clicking Show getting started resources in the page heading.": "You can always bring these getting started resources back into view by clicking Show getting started resources in the page heading.",
   "Hide from view": "Hide from view",
-  "Getting started resources": "Getting started resources",
   "Use our collection of resources to help you get started with the Console.\n\nNote: This card can be hidden at any time.": "Use our collection of resources to help you get started with the Console.\n\nNote: This card can be hidden at any time.",
-  "More info": "More info",
   "View all quick starts": "View all quick starts",
   "Build with guided documentation": "Build with guided documentation",
   "Follow guided documentation to build applications and familiarize yourself with key features.": "Follow guided documentation to build applications and familiarize yourself with key features.",

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

@@ -0,0 +1,60 @@
+.ocs-getting-started-expandable-grid {
+    --min-column-width: 220px;
+  
+    // Increase css specificity to override a generic [class*="pf-v5-c-"] rule.
+    &__header.pf-v5-c-card__header {
+      // Use padding sm instead of lg to fix alignment of the KebabToggle action button.
+      padding-right: var(--pf-v5-global--spacer--sm);
+    }
+    &__tooltip {
+      white-space: pre-line;
+    }
+    &__tooltip-icon {
+      margin-left: var(--pf-v5-global--spacer--sm);
+    }
+  
+    // Increase css specificity to override a generic [class*="pf-v5-c-"] rule.
+    &__content.pf-v5-c-card__body {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(var(--min-column-width), 1fr));
+  
+      // Keep only additional spacing at the bottom. Horizontal spacing is added to the child elements.
+      padding: 0 0 calc(var(--pf-v5-c-card--child--PaddingBottom) / 2) 0;
+      // Hide the border on the right side of the content. Works together wie negative margin below.
+      overflow: hidden;
+      padding-top: 0 !important;
+  
+      // Increase css specificity to override a generic [class*="pf-v5-c-"] rule.
+      > .pf-v5-l-flex.pf-m-grow.pf-m-column {
+        // Show a divider on the right side and hide them in the latest column.
+        border-right: var(--pf-v5-global--BorderWidth--sm) solid var(--pf-v5-global--BorderColor--100);
+        margin-right: calc(-1 * var(--pf-v5-global--BorderWidth--sm));
+        // Padding around the card. Vertical spacing is splitted on the card and the grid.
+        padding-top: calc(var(--pf-v5-c-card--first-child--PaddingTop) / 2);
+        padding-bottom: calc(var(--pf-v5-c-card--child--PaddingBottom) / 2);
+        padding-left: var(--pf-v5-c-card--child--PaddingLeft);
+        padding-right: var(--pf-v5-c-card--child--PaddingRight);
+      }
+    }
+  }
+  
+  .ocs-getting-started-expandable-section {
+    background-color: var(--pf-v5-global--BackgroundColor--100);
+    &__toggle-text {
+      color: var(--pf-v5-global--Color--dark-100);
+      &.is-dark {
+        color: var(--pf-v5-global--Color--light-100);
+      }
+      font-size: var(--pf-v5-global--icon--FontSize--md);
+      font-weight: var(--pf-v5-global--FontWeight--bold);
+    }
+  }
+  
+  .pf-v5-c-expandable-section__toggle {
+    align-items: center;
+  }
+  
+  .pf-v5-c-expandable-section__content {
+    padding: 0 !important;
+  }
+  

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

@@ -0,0 +1,70 @@
+import * as React from 'react';
+import {
+  Card,
+  CardBody,
+  Title,
+  TitleSizes,
+  Popover,
+  ExpandableSection,
+} from '@patternfly/react-core';
+import { OutlinedQuestionCircleIcon } from '@patternfly/react-icons/dist/esm/icons/outlined-question-circle-icon';
+import { useTranslation } from 'react-i18next';
+
+import './GettingStartedExpandableGrid.scss';
+
+interface GettingStartedExpandableGridProps {
+  children?: React.ReactNodeArray;
+  isOpen?: boolean;
+  setIsOpen?: (isOpen: boolean) => void;
+}
+
+export const GettingStartedExpandableGrid: React.FC<GettingStartedExpandableGridProps> = ({
+  children,
+  isOpen,
+  setIsOpen,
+}) => {
+  const { t } = useTranslation();
+
+  const title = t('console-shared~Getting started resources');
+  const titleTooltip = (
+    <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>
+  );
+
+  return (
+    <ExpandableSection
+      onToggle={() => setIsOpen(!isOpen)}
+      isExpanded={isOpen}
+      displaySize="lg"
+      className="ocs-getting-started-expandable-section"
+      toggleContent={
+        <div className="ocs-getting-started-expandable-section__toggle-text">
+          <Title headingLevel="h2" size={TitleSizes.lg} data-test="title">
+            {title}{' '}
+            <Popover bodyContent={titleTooltip} triggerAction="hover">
+              <span
+                role="button"
+                aria-label={t('console-shared~More info')}
+                className="ocs-getting-started-expandable-grid__tooltip-icon"
+              >
+                <OutlinedQuestionCircleIcon />
+              </span>
+            </Popover>
+          </Title>
+        </div>
+      }
+    >
+      <Card
+        className="ocs-getting-started-expandable-grid"
+        data-test="getting-started"
+        isClickable
+        isSelectable
+      >
+        <CardBody className="ocs-getting-started-expandable-grid__content">{children}</CardBody>
+      </Card>
+    </ExpandableSection>
+  );
+};

frontend/packages/console-shared/src/components/getting-started/index.ts

@@ -3,3 +3,4 @@ export * from './GettingStartedCard';
 export * from './RestoreGettingStartedButton';
 export * from './QuickStartGettingStartedCard';
 export * from './useGettingStartedShowState';
+export * from './GettingStartedExpandableGrid';

frontend/packages/console-shared/src/constants/common.ts

@@ -102,3 +102,8 @@ export enum REQUESTER_FILTER {
 
 export const CLUSTER_VERSION_DEFAULT_UPSTREAM_SERVER_URL_PLACEHOLDER =
   'https://api.openshift.com/api/upgrades_info/v1/graph';
+
+export const GETTING_STARTED_USER_SETTINGS_KEY_ADD_PAGE =
+  'devconsole.addPage.gettingStarted.expanded';
+export const GETTING_STARTED_USER_SETTINGS_KEY_CLUSTER_DASHBOARD =
+  'console.clusterDashboard.gettingStarted.expanded';

frontend/packages/dev-console/src/components/add/AddPageLayout.tsx

@@ -5,14 +5,13 @@ import { useTranslation } from 'react-i18next';
 import { AddActionGroup, isAddActionGroup } from '@console/dynamic-plugin-sdk';
 import { getQueryArgument } from '@console/internal/components/utils';
 import { useExtensions } from '@console/plugin-sdk/src';
-import { PageLayout, useActiveNamespace, RestoreGettingStartedButton } from '@console/shared';
+import { PageLayout, useActiveNamespace } from '@console/shared';
 import TopologyQuickSearch from '@console/topology/src/components/quick-search/TopologyQuickSearch';
 import TopologyQuickSearchButton from '@console/topology/src/components/quick-search/TopologyQuickSearchButton';
 import { filterNamespaceScopedUrl } from '../../utils/add-page-utils';
 import { useAddActionExtensions } from '../../utils/useAddActionExtensions';
 import { ResourceQuotaAlert } from '../resource-quota/ResourceQuotaAlert';
 import AddCardSection from './AddCardSection';
-import { GETTING_STARTED_USER_SETTINGS_KEY } from './constants';
 import { GettingStartedSection } from './GettingStartedSection';
 import { useAccessFilterExtensions } from './hooks/useAccessFilterExtensions';
 import { useShowAddCardItemDetails } from './hooks/useShowAddCardItemDetails';
@@ -66,7 +65,6 @@ const AddPageLayout: React.FC<AddPageLayoutProps> = ({ title, hintBlock: additio
             <div className="odc-add-page-layout__resource-quota-message-block">
               <ResourceQuotaAlert namespace={activeNamespace} />
             </div>
-            <RestoreGettingStartedButton userSettingsKey={GETTING_STARTED_USER_SETTINGS_KEY} />
             <div
               className={cx('odc-add-page-layout__hint-block__details-switch', {
                 'odc-add-page-layout__hint-block__details-switch__loading-state': !extensionsLoaded,

frontend/packages/dev-console/src/components/add/GettingStartedSection.tsx

@@ -1,31 +1,36 @@
 import * as React from 'react';
-import { FLAGS } from '@console/shared';
 import {
-  GettingStartedGrid,
-  useGettingStartedShowState,
-  GettingStartedShowState,
+  FLAGS,
+  GETTING_STARTED_USER_SETTINGS_KEY_ADD_PAGE,
+  useUserSettings,
+} from '@console/shared';
+import {
   QuickStartGettingStartedCard,
+  GettingStartedExpandableGrid,
 } from '@console/shared/src/components/getting-started';
 import { useFlag } from '@console/shared/src/hooks/flag';
-import { GETTING_STARTED_USER_SETTINGS_KEY } from './constants';
 import { DeveloperFeaturesGettingStartedCard } from './DeveloperFeaturesGettingStartedCard';
 import { SampleGettingStartedCard } from './SampleGettingStartedCard';
 
 import './GettingStartedSection.scss';
 
 export const GettingStartedSection: React.FC = () => {
   const openshiftFlag = useFlag(FLAGS.OPENSHIFT);
-  const [showState, setShowState, showStateLoaded] = useGettingStartedShowState(
-    GETTING_STARTED_USER_SETTINGS_KEY,
+  const [isGettingStartedSectionOpen, setIsGettingStartedSectionOpen] = useUserSettings<boolean>(
+    GETTING_STARTED_USER_SETTINGS_KEY_ADD_PAGE,
+    true,
   );
 
-  if (!openshiftFlag || !showStateLoaded || showState !== GettingStartedShowState.SHOW) {
+  if (!openshiftFlag) {
     return null;
   }
 
   return (
     <div className="odc-add-page-getting-started-section">
-      <GettingStartedGrid onHide={() => setShowState(GettingStartedShowState.HIDE)}>
+      <GettingStartedExpandableGrid
+        isOpen={isGettingStartedSectionOpen}
+        setIsOpen={setIsGettingStartedSectionOpen}
+      >
         <SampleGettingStartedCard featured={['code-with-quarkus', 'java-springboot-basic']} />
         <QuickStartGettingStartedCard
           featured={[
@@ -45,7 +50,7 @@ export const GettingStartedSection: React.FC = () => {
           ]}
         />
         <DeveloperFeaturesGettingStartedCard />
-      </GettingStartedGrid>
+      </GettingStartedExpandableGrid>
     </div>
   );
 };

frontend/packages/dev-console/src/components/add/__tests__/GettingStartedSection.spec.tsx

@@ -1,10 +1,7 @@
 import * as React from 'react';
 import { shallow } from 'enzyme';
-import {
-  GettingStartedGrid,
-  useGettingStartedShowState,
-  GettingStartedShowState,
-} from '@console/shared/src/components/getting-started';
+import { useUserSettings } from '@console/shared';
+import { GettingStartedExpandableGrid } from '@console/shared/src/components/getting-started';
 import { useFlag } from '@console/shared/src/hooks/flag';
 import { GettingStartedSection } from '../GettingStartedSection';
 
@@ -32,34 +29,30 @@ jest.mock(
     },
 );
 
+jest.mock('@console/shared/src/hooks/useUserSettings', () => ({
+  useUserSettings: jest.fn(),
+}));
+
+const mockUserSettings = useUserSettings as jest.Mock;
+
 const useFlagMock = useFlag as jest.Mock;
-const useGettingStartedShowStateMock = useGettingStartedShowState as jest.Mock;
 
 describe('GettingStartedSection', () => {
   it('should render with three child elements', () => {
     useFlagMock.mockReturnValue(true);
-    useGettingStartedShowStateMock.mockReturnValue([GettingStartedShowState.SHOW, jest.fn(), true]);
+    mockUserSettings.mockReturnValue([true, jest.fn()]);
 
     const wrapper = shallow(<GettingStartedSection />);
 
-    expect(wrapper.find(GettingStartedGrid).props().children.length).toEqual(3);
+    expect(wrapper.find(GettingStartedExpandableGrid).props().children.length).toEqual(3);
   });
 
   it('should render nothing when useFlag(FLAGS.OPENSHIFT) return false', () => {
     useFlagMock.mockReturnValue(false);
-    useGettingStartedShowStateMock.mockReturnValue([GettingStartedShowState.SHOW, jest.fn(), true]);
-
-    const wrapper = shallow(<GettingStartedSection />);
-
-    expect(wrapper.find(GettingStartedGrid).length).toEqual(0);
-  });
-
-  it('should render nothing if user settings hide them', () => {
-    useFlagMock.mockReturnValue(true);
-    useGettingStartedShowStateMock.mockReturnValue([GettingStartedShowState.HIDE, jest.fn(), true]);
+    mockUserSettings.mockReturnValue([true, jest.fn()]);
 
     const wrapper = shallow(<GettingStartedSection />);
 
-    expect(wrapper.find(GettingStartedGrid).length).toEqual(0);
+    expect(wrapper.find(GettingStartedExpandableGrid).length).toEqual(0);
   });
 });

frontend/packages/dev-console/src/components/add/constants.ts

@@ -1,12 +1,9 @@
 import * as React from 'react';
 import { shallow } from 'enzyme';
 
+import { useUserSettings } from '@console/shared';
 import { useFlag } from '@console/shared/src/hooks/flag';
-import {
-  GettingStartedGrid,
-  useGettingStartedShowState,
-  GettingStartedShowState,
-} from '@console/shared/src/components/getting-started';
+import { GettingStartedExpandableGrid } from '@console/shared/src/components/getting-started';
 
 import { GettingStartedSection } from '../getting-started-section';
 
@@ -34,35 +31,31 @@ jest.mock(
     },
 );
 
+jest.mock('@console/shared/src/hooks/useUserSettings', () => ({
+  useUserSettings: jest.fn(),
+}));
+
+const mockUserSettings = useUserSettings as jest.Mock;
+
 const useFlagMock = useFlag as jest.Mock;
-const useGettingStartedShowStateMock = useGettingStartedShowState as jest.Mock;
 
 describe('GettingStartedSection', () => {
   it('should render with three child elements', () => {
     useFlagMock.mockReturnValue(true);
-    useGettingStartedShowStateMock.mockReturnValue([GettingStartedShowState.SHOW, jest.fn(), true]);
+    mockUserSettings.mockReturnValue([true, jest.fn()]);
 
     const wrapper = shallow(<GettingStartedSection />);
 
-    expect(wrapper.find(GettingStartedGrid).length).toEqual(1);
-    expect(wrapper.find(GettingStartedGrid).props().children.length).toEqual(3);
+    expect(wrapper.find(GettingStartedExpandableGrid).length).toEqual(1);
+    expect(wrapper.find(GettingStartedExpandableGrid).props().children.length).toEqual(3);
   });
 
   it('should render nothing when useFlag(FLAGS.OPENSHIFT) return false', () => {
     useFlagMock.mockReturnValue(false);
-    useGettingStartedShowStateMock.mockReturnValue([GettingStartedShowState.SHOW, jest.fn(), true]);
-
-    const wrapper = shallow(<GettingStartedSection />);
-
-    expect(wrapper.find(GettingStartedGrid).length).toEqual(0);
-  });
-
-  it('should render nothing if user settings hide them', () => {
-    useFlagMock.mockReturnValue(true);
-    useGettingStartedShowStateMock.mockReturnValue([GettingStartedShowState.HIDE, jest.fn(), true]);
+    mockUserSettings.mockReturnValue([true, jest.fn()]);
 
     const wrapper = shallow(<GettingStartedSection />);
 
-    expect(wrapper.find(GettingStartedGrid).length).toEqual(0);
+    expect(wrapper.find(GettingStartedExpandableGrid).length).toEqual(0);
   });
 });