add redux localstore

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

@@ -6,7 +6,8 @@ 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 GuidedTourTile from './GuidedTourTile';
+
 import './EmptyState.scss';
 import { ALL_NAMESPACES_KEY } from '@console/shared';
 
@@ -72,6 +73,7 @@ const ODCEmptyState: React.FC<Props> = ({
   const addActionExtensions = useExtensions<AddAction>(
     isAddAction,
   ).filter(({ properties: { hide } }) => (hide ? hide() : true));
+
   return (
     <>
       <div className="odc-empty-state__title">
@@ -84,7 +86,7 @@ const ODCEmptyState: React.FC<Props> = ({
       </div>
       <div className="odc-empty-state__content">
         <Gallery className="co-catalog-tile-view" hasGutter>
-          <GuidedTourAddAction />
+          <GuidedTourTile />
           {addActionExtensions.map((action) => (
             <Item key={action.properties.id} namespace={activeNamespace} action={action} />
           ))}

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

@@ -1,27 +1,19 @@
+@import '../../../../public/style/vars';
+
 .odc-guidedtour-tile {
   &__card {
-    height: 100%;
-  }
-  &__header {
-    padding: 0px var(--pf-global--spacer--md);
-    margin: 0px;
-  }
-  &__body {
-    padding: var(--pf-global--spacer--sm);
+    height: $co-m-catalog-tile-height;
+    width: $co-m-catalog-tile-width;
   }
   &__tour {
-    padding: var(--pf-global--spacer--sm) var(--pf-global--spacer--md);
-    text-align: left;
+    margin-bottom: var(--pf-global--spacer--sm);
   }
   &__arrowbtn {
-    margin-right: var(--pf-global--spacer--md);
+    margin-right: var(--pf-global--spacer--sm);
   }
   &__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);
+    padding-top: var(--pf-global--spacer--sm);
+    padding-bottom: var(--pf-global--spacer--sm);
   }
 }

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

@@ -11,41 +11,61 @@ import {
   DropdownItem,
   GalleryItem,
   KebabToggle,
+  Title,
 } 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 { getGuidedToursWithStatus } from '@console/app/src/components/guided-tours/utils/guided-tour-utils';
 import './GuidedTourTile.scss';
 
-type TourItem = GuidedTourItem & TourStatus;
-type GuidedTourTileProps = {
-  tours: TourItem[];
-};
+export const HIDE_TOUR_TILE_STORAGE_KEY = 'bridge/hide-tour-tile';
+
+const GuidedTourTile: React.FC = () => {
+  const isTourTileHidden = localStorage.getItem(HIDE_TOUR_TILE_STORAGE_KEY) === 'true';
+  const [showTile, setShowTile] = React.useState<boolean>(!isTourTileHidden);
+  const [isOpen, setOpen] = React.useState<boolean>(false);
+  const tours = getGuidedToursWithStatus();
+
+  const onRemove = () => {
+    localStorage.setItem(HIDE_TOUR_TILE_STORAGE_KEY, 'true');
+    setShowTile(false);
+  };
 
-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">
+
+  const actionDropdownItem = [
+    <DropdownItem
+      onClick={() => {
+        onRemove();
+      }}
+      key="action"
+      component="button"
+    >
+      Remove guided tours
+    </DropdownItem>,
+  ];
+  const slicedTours = tours.length > 3 ? tours.slice(0, 3) : tours;
+
+  return slicedTours.length > 0 && showTile ? (
+    <GalleryItem>
       <Card className="odc-guidedtour-tile__card">
         <CardHeader>
-          <CardHeaderMain className="odc-guidedtour-tile__title">Guided Tours</CardHeaderMain>
+          <CardHeaderMain>
+            <Title headingLevel="h1" size="xl">
+              Guided Tours
+            </Title>
+          </CardHeaderMain>
           <CardActions>
             <Dropdown
               toggle={<KebabToggle onToggle={onToggle} />}
               isOpen={isOpen}
               isPlain
               dropdownItems={actionDropdownItem}
-              position={'right'}
+              position="right"
             />
           </CardActions>
         </CardHeader>
-        <CardBody className="odc-guidedtour-tile__body">
-          {orderedTours.map((tour) => (
+        <CardBody>
+          {slicedTours.map((tour) => (
             <div key={tour.name} className="odc-guidedtour-tile__tour">
               <Link to="/#">{tour.name}</Link>
             </div>
@@ -57,7 +77,7 @@ const GuidedTourTile: React.FC<GuidedTourTileProps> = ({ tours }) => {
         </CardFooter>
       </Card>
     </GalleryItem>
-  );
+  ) : null;
 };
 
 export default GuidedTourTile;

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

@@ -1,17 +1,11 @@
 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 GuidedTourTile, { HIDE_TOUR_TILE_STORAGE_KEY } from '../GuidedTourTile';
 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} />);
+  const guidedTourTileWrapper = shallow(<GuidedTourTile />);
   it('should show proper CardAction', () => {
     const cardAction = guidedTourTileWrapper.find(CardActions);
     expect(cardAction.exists()).toBe(true);
@@ -28,4 +22,9 @@ describe('GuidedTourTile', () => {
     expect(cardFooter.find(Link).exists()).toBe(true);
     expect(cardFooter.find(Link).prop('to')).toEqual('/tours');
   });
+  it('should hide GuidedTourTile when locaStorage is set', () => {
+    localStorage.setItem(HIDE_TOUR_TILE_STORAGE_KEY, 'true');
+    const emptyWrapper = shallow(<GuidedTourTile />);
+    expect(emptyWrapper.find(GuidedTourTile).exists()).toBe(false);
+  });
 });