add Guided tour tile

frontend/packages/dev-console/src/components/EmptyState.tsx

@@ -6,6 +6,7 @@ import { history, PageHeading, useAccessReview } from '@console/internal/compone
 import { useExtensions } from '@console/plugin-sdk';
 import { RootState } from '@console/internal/redux';
 import { isAddAction, AddAction } from '../extensions/add-actions';
+import GuidedTourAddAction from './GuidedTourAddAction';
 import './EmptyState.scss';
 import { ALL_NAMESPACES_KEY } from '@console/shared';
 
@@ -83,6 +84,7 @@ const ODCEmptyState: React.FC<Props> = ({
       </div>
       <div className="odc-empty-state__content">
         <Gallery className="co-catalog-tile-view" hasGutter>
+          <GuidedTourAddAction />
           {addActionExtensions.map((action) => (
             <Item key={action.properties.id} namespace={activeNamespace} action={action} />
           ))}

frontend/packages/dev-console/src/components/GuidedTourAddAction.tsx

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import { getGuidedToursWithStatus } from '@console/app/src/components/guided-tours/utils/guided-tour-utils';
+import GuidedTourTile from './GuidedTourTile';
+
+const GuidedTourAddAction: React.FC = () => {
+  const guidedTourList = getGuidedToursWithStatus();
+  return guidedTourList.length > 0 ? <GuidedTourTile tours={guidedTourList} /> : null;
+};
+
+export default GuidedTourAddAction;

frontend/packages/dev-console/src/components/GuidedTourTile.scss

@@ -0,0 +1,27 @@
+.odc-guidedtour-tile {
+  &__card {
+    height: 100%;
+  }
+  &__header {
+    padding: 0px var(--pf-global--spacer--md);
+    margin: 0px;
+  }
+  &__body {
+    padding: var(--pf-global--spacer--sm);
+  }
+  &__tour {
+    padding: var(--pf-global--spacer--sm) var(--pf-global--spacer--md);
+    text-align: left;
+  }
+  &__arrowbtn {
+    margin-right: var(--pf-global--spacer--md);
+  }
+  &__footer {
+    border-top: 1px solid var(--pf-global--BorderColor--100);
+    padding: var(--pf-global--spacer--sm) var(--pf-global--spacer--lg);
+  }
+  &__title {
+    font-weight: var(--pf-global--FontWeight--bold);
+    font-size: var(--pf-global--FontSize--lg);
+  }
+}

frontend/packages/dev-console/src/components/GuidedTourTile.tsx

@@ -0,0 +1,63 @@
+import * as React from 'react';
+import { Link } from 'react-router-dom';
+import {
+  Card,
+  CardActions,
+  CardBody,
+  CardFooter,
+  CardHeader,
+  CardHeaderMain,
+  Dropdown,
+  DropdownItem,
+  GalleryItem,
+  KebabToggle,
+} from '@patternfly/react-core';
+import { ArrowRightIcon } from '@patternfly/react-icons';
+import {
+  GuidedTourItem,
+  TourStatus,
+} from '@console/app/src/components/guided-tours/utils/guided-tour-typings';
+import './GuidedTourTile.scss';
+
+type TourItem = GuidedTourItem & TourStatus;
+type GuidedTourTileProps = {
+  tours: TourItem[];
+};
+
+const GuidedTourTile: React.FC<GuidedTourTileProps> = ({ tours }) => {
+  const [isOpen, setOpen] = React.useState(false);
+  const onToggle = () => setOpen(!isOpen);
+  const actionDropdownItem = [<DropdownItem key="link">Remove guided tours</DropdownItem>];
+  const orderedTours = tours.length > 3 ? tours.slice(0, 3) : tours;
+  return (
+    <GalleryItem className="odc-guidedtour-tile">
+      <Card className="odc-guidedtour-tile__card">
+        <CardHeader>
+          <CardHeaderMain className="odc-guidedtour-tile__title">Guided Tours</CardHeaderMain>
+          <CardActions>
+            <Dropdown
+              toggle={<KebabToggle onToggle={onToggle} />}
+              isOpen={isOpen}
+              isPlain
+              dropdownItems={actionDropdownItem}
+              position={'right'}
+            />
+          </CardActions>
+        </CardHeader>
+        <CardBody className="odc-guidedtour-tile__body">
+          {orderedTours.map((tour) => (
+            <div key={tour.name} className="odc-guidedtour-tile__tour">
+              <Link to="/#">{tour.name}</Link>
+            </div>
+          ))}
+        </CardBody>
+        <CardFooter className="odc-guidedtour-tile__footer">
+          <ArrowRightIcon className="odc-guidedtour-tile__arrowbtn" />
+          <Link to="/tours">See all guided tours</Link>
+        </CardFooter>
+      </Card>
+    </GalleryItem>
+  );
+};
+
+export default GuidedTourTile;

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

@@ -0,0 +1,31 @@
+import * as React from 'react';
+import { Link } from 'react-router-dom';
+import { shallow } from 'enzyme';
+import GuidedTourTile from '../GuidedTourTile';
+import { getGuidedToursWithStatus } from '@console/app/src/components/guided-tours/utils/guided-tour-utils';
+import { CardActions, Dropdown, CardBody, CardFooter } from '@patternfly/react-core';
+
+type GuidedTourTileProps = React.ComponentProps<typeof GuidedTourTile>;
+
+describe('GuidedTourTile', () => {
+  const guidedTourTileProps: GuidedTourTileProps = {
+    tours: getGuidedToursWithStatus(),
+  };
+  const guidedTourTileWrapper = shallow(<GuidedTourTile {...guidedTourTileProps} />);
+  it('should show proper CardAction', () => {
+    const cardAction = guidedTourTileWrapper.find(CardActions);
+    expect(cardAction.exists()).toBe(true);
+    expect(cardAction.find(Dropdown).prop('dropdownItems').length).toEqual(1);
+  });
+  it('should show 3 tour links', () => {
+    const cardBody = guidedTourTileWrapper.find(CardBody);
+    expect(cardBody.exists()).toBe(true);
+    expect(cardBody.find(Link).length).toEqual(3);
+  });
+  it('should show a footer link to GuidedTourCatalog', () => {
+    const cardFooter = guidedTourTileWrapper.find(CardFooter);
+    expect(cardFooter.exists()).toBe(true);
+    expect(cardFooter.find(Link).exists()).toBe(true);
+    expect(cardFooter.find(Link).prop('to')).toEqual('/tours');
+  });
+});