ODC-7727: Favoriting page in the Console admin perspective

frontend/packages/console-app/src/components/nav/FavoriteNavItemResource.tsx

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import { NavItem } from '@patternfly/react-core';
+import { NavLink } from 'react-router-dom';
+import { ResourceNSNavItem } from '@console/dynamic-plugin-sdk';
+
+export const FavoriteNavItemResource: React.FC<FavoriteNavItemResourceProps> = ({
+  className,
+  dataAttributes,
+  isActive,
+  to,
+  ...navLinkProps
+}) => {
+  return (
+    <NavItem className={className} isActive={isActive}>
+      <NavLink {...navLinkProps} {...dataAttributes} to={to} />
+    </NavItem>
+  );
+};
+
+export type FavoriteNavItemResourceProps = {
+  to: string;
+  dataAttributes?: ResourceNSNavItem['properties']['dataAttributes'];
+  isActive: boolean;
+  className: string;
+};

frontend/packages/console-app/src/components/nav/FavoriteNavItemResources.scss

@@ -0,0 +1,29 @@
+.oc-favorite-delete-button {
+  background-color: transparent !important;
+  margin-left: auto;
+  margin-right: var(--pf-t--global--spacer--lg);
+}
+
+.oc-favorite-resource.pf-v6-c-nav__item {
+  .pf-v6-c-nav__link {
+    padding-bottom: 0;
+    padding-right: 0;
+    padding-top: 0;
+    white-space: nowrap;
+
+    &:hover {
+      --pf-v6-c-nav__section-title--PaddingRight: 30px;
+
+      .oc-favorite-delete-button {
+        .pf-v6-c-button__text {
+          opacity: 1;
+        }
+      }
+    }
+  }
+}
+
+.oc-no-favorites-message {
+  color: var(--pf-v6-c-nav__link--Color);
+  padding-left: var(--pf-v6-c-nav__link--PaddingInlineStart);
+}

frontend/packages/console-app/src/components/nav/FavoriteNavItemResources.tsx

@@ -0,0 +1,104 @@
+import * as React from 'react';
+import { Nav, NavExpandable, NavList, Button, FlexItem, Flex } from '@patternfly/react-core';
+import { StarIcon } from '@patternfly/react-icons';
+import * as classNames from 'classnames';
+import { useTranslation } from 'react-i18next';
+import { FAVORITES_CONFIG_MAP_KEY, FavoritesType } from '@console/internal/components/utils';
+import { FAVORITES_LOCAL_STORAGE_KEY, useUserSettingsCompatibility } from '@console/shared';
+import { FavoriteNavItemResource } from './FavoriteNavItemResource';
+
+import './FavoriteNavItemResources.scss';
+
+export const FavoriteNavItemResources: React.FC = () => {
+  const { t } = useTranslation();
+  const [activeGroup, setActiveGroup] = React.useState('');
+  const [activeItem, setActiveItem] = React.useState('');
+  const currentUrlPath = window.location.pathname;
+
+  const onSelect = (
+    _event: React.FormEvent<HTMLInputElement>,
+    result: { itemId: number | string; groupId: number | string | null },
+  ) => {
+    setActiveGroup(result.groupId as string);
+    setActiveItem(result.itemId as string);
+  };
+
+  const [favorites, setFavorites, loaded] = useUserSettingsCompatibility<FavoritesType>(
+    FAVORITES_CONFIG_MAP_KEY,
+    FAVORITES_LOCAL_STORAGE_KEY,
+    null,
+    true,
+  );
+
+  React.useEffect(() => {
+    if (loaded && favorites) {
+      const currentFavorite = favorites.find((favorite) => favorite.url === currentUrlPath);
+      if (currentFavorite) {
+        setActiveGroup('favorites-group');
+        setActiveItem(`favorites-item-${currentFavorite.url}`);
+      }
+    }
+  }, [loaded, favorites, currentUrlPath]);
+
+  const navList = React.useMemo(() => {
+    const handleUnfavorite = (favoriteUrl: string) => {
+      const updatedFavorites = favorites?.filter((favorite) => favorite.url !== favoriteUrl);
+      setFavorites(updatedFavorites);
+      if (activeItem === `favorites-item-${favoriteUrl}`) {
+        setActiveItem('');
+      }
+    };
+    if (!loaded) return null;
+    if (!favorites || favorites.length === 0) {
+      return <li className="oc-no-favorites-message">{t('public~No favorites added')}</li>;
+    }
+
+    return favorites.map((favorite) => (
+      <FavoriteNavItemResource
+        key={favorite.url}
+        dataAttributes={{
+          'data-test': 'favorite-resource-item',
+        }}
+        className={classNames('oc-favorite-resource')}
+        to={favorite.url}
+        isActive={activeItem === `favorites-item-${favorite.url}`}
+      >
+        <Flex
+          justifyContent={{ default: 'justifyContentSpaceBetween' }}
+          alignItems={{ default: 'alignItemsCenter' }}
+          flexWrap={{ default: 'nowrap' }}
+          style={{ width: '100%' }}
+        >
+          <FlexItem className="pf-m-truncate">{favorite.name}</FlexItem>
+          <FlexItem>
+            <Button
+              variant="plain"
+              aria-label={`Unfavorite ${favorite.name}`}
+              onClick={(e) => {
+                e.preventDefault();
+                handleUnfavorite(favorite.url);
+              }}
+              className="oc-favorite-delete-button"
+              icon={<StarIcon color="gold" />}
+            />
+          </FlexItem>
+        </Flex>
+      </FavoriteNavItemResource>
+    ));
+  }, [favorites, activeItem, loaded, t, setFavorites]);
+
+  return (
+    <Nav onSelect={onSelect} aria-label="favorite-resources" className="pf-v6-u-py-0">
+      <NavList>
+        <NavExpandable
+          title={t('public~Favorites')}
+          groupId="favorites-group"
+          isActive={activeGroup === 'favorites-group'}
+          isExpanded={activeGroup === 'favorites-group'}
+        >
+          {navList}
+        </NavExpandable>
+      </NavList>
+    </Nav>
+  );
+};

frontend/packages/console-app/src/components/nav/PluginNavItem.tsx

@@ -7,20 +7,28 @@ import {
   isHrefNavItem,
   isResourceNSNavItem,
   isResourceNavItem,
+  useActivePerspective,
 } from '@console/dynamic-plugin-sdk';
 import { LoadedExtension } from '@console/dynamic-plugin-sdk/src/types';
+import { FavoriteNavItemResources } from './FavoriteNavItemResources';
 import { NavItemHref } from './NavItemHref';
 import { NavItemResource } from './NavItemResource';
 import { NavSection } from './NavSection';
 
 export const PluginNavItem: React.FC<PluginNavItemProps> = ({ extension }) => {
+  const [activePerspective] = useActivePerspective();
   if (isNavSection(extension)) {
     return (
-      <NavSection
-        id={extension.properties.id}
-        name={extension.properties.name}
-        dataAttributes={extension.properties.dataAttributes}
-      />
+      <>
+        <NavSection
+          id={extension.properties.id}
+          name={extension.properties.name}
+          dataAttributes={extension.properties.dataAttributes}
+        />
+        {extension.properties.id === 'home' && activePerspective === 'admin' && (
+          <FavoriteNavItemResources />
+        )}
+      </>
     );
   }
   if (isSeparator(extension)) {

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

@@ -50,6 +50,7 @@ export const LOG_WRAP_LINES_USERSETTINGS_KEY = `${USERSETTINGS_PREFIX}.log.wrapL
 export const SHOW_YAML_EDITOR_TOOLTIPS_USER_SETTING_KEY = `${USERSETTINGS_PREFIX}.showYAMLEditorTooltips`;
 export const SHOW_YAML_EDITOR_TOOLTIPS_LOCAL_STORAGE_KEY = `${STORAGE_PREFIX}/showYAMLEditorTooltips`;
 export const SHOW_FULL_LOG_USERSETTINGS_KEY = `${USERSETTINGS_PREFIX}.show.full.log`;
+export const FAVORITES_LOCAL_STORAGE_KEY = `${STORAGE_PREFIX}/favorites`;
 // Bootstrap user for OpenShift 4.0 clusters (kube:admin)
 export const KUBE_ADMIN_USERNAMES = ['kube:admin'];
 

frontend/packages/operator-lifecycle-manager/src/style.scss

@@ -319,7 +319,6 @@ $co-affinity-row-margin: 15px;
 .co-operator-details__actions {
   align-items: baseline;
   display: flex;
-  flex-grow: 1;
   flex-wrap: wrap;
   @media (min-width: $screen-sm-min) {
     flex-wrap: nowrap;

frontend/public/components/utils/_favorite-button.scss

@@ -0,0 +1,11 @@
+.co-actions-icon {
+  background: none;
+  background-color: transparent !important;
+  border: none;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  font-size: x-large;
+}