add fav icon and fix formatting

Signed-off-by: Atif Ali <atali@redhat.com>

more Details formating

Signed-off-by: Atif Ali <atali@redhat.com>

Author: aali309

src/gitops/components/appset/AppsTab.scss

@@ -4,3 +4,5 @@
     flex-direction: column;
   }
 }
+
+

src/gitops/components/appset/EventsTab.scss

@@ -5,3 +5,6 @@
     gap: 12px;
   }
 }
+
+
+

src/gitops/components/appset/FavoriteButton.tsx

@@ -0,0 +1,162 @@
+import * as React from 'react';
+import { Button, Tooltip, Form, FormGroup, TextInput, FormHelperText, HelperText, HelperTextItem } from '@patternfly/react-core';
+import { Modal, ModalVariant } from '@patternfly/react-core/deprecated';
+import { StarIcon } from '@patternfly/react-icons';
+
+type FavoriteButtonProps = {
+  defaultName?: string;
+};
+
+const FavoriteButton: React.FC<FavoriteButtonProps> = ({ defaultName }) => {
+  const [isStarred, setIsStarred] = React.useState(false);
+  const [isModalOpen, setIsModalOpen] = React.useState(false);
+  const [name, setName] = React.useState<string>('');
+  const [error, setError] = React.useState<string | null>(null);
+
+  // Check if this page is already favorited on mount
+  React.useEffect(() => {
+    const currentUrlPath = window.location.pathname;
+    const favorites = JSON.parse(localStorage.getItem('console-favorites') || '[]');
+    const isCurrentlyFavorited = favorites.some((favorite: any) => favorite.url === currentUrlPath);
+    setIsStarred(isCurrentlyFavorited);
+  }, []);
+
+  const handleStarClick = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+    e.preventDefault();
+    e.stopPropagation();
+    
+    const currentUrlPath = window.location.pathname;
+    const favorites = JSON.parse(localStorage.getItem('console-favorites') || '[]');
+    const isCurrentlyFavorited = favorites.some((favorite: any) => favorite.url === currentUrlPath);
+    
+    if (isCurrentlyFavorited) {
+      // Remove from favorites
+      const updatedFavorites = favorites.filter((favorite: any) => favorite.url !== currentUrlPath);
+      localStorage.setItem('console-favorites', JSON.stringify(updatedFavorites));
+      setIsStarred(false);
+    } else {
+      // Open modal to add to favorites
+      const currentUrlSplit = currentUrlPath.includes('~')
+        ? currentUrlPath.split('~')
+        : currentUrlPath.split('/');
+      const sanitizedDefaultName = (
+        defaultName ?? currentUrlSplit.slice(-1)[0].split('?')[0]
+      ).replace(/[^\p{L}\p{N}\s-]/gu, '-');
+      setName(sanitizedDefaultName);
+      setIsModalOpen(true);
+    }
+  };
+
+  const handleModalClose = () => {
+    setError('');
+    setName('');
+    setIsModalOpen(false);
+  };
+
+  const handleNameChange = (value: string) => {
+    setName(value);
+    setError('');
+  };
+
+  const handleConfirmStar = () => {
+    const trimmedName = name.trim();
+    
+    if (!trimmedName) {
+      setError('Name is required');
+      return;
+    }
+
+    if (trimmedName.length > 50) {
+      setError('Name must be 50 characters or less');
+      return;
+    }
+
+    // Check for duplicate names
+    const favorites = JSON.parse(localStorage.getItem('console-favorites') || '[]');
+    const isDuplicate = favorites.some((favorite: any) => favorite.name === trimmedName);
+    
+    if (isDuplicate) {
+      setError('A favorite with this name already exists');
+      return;
+    }
+
+    // Add to favorites
+    const currentUrlPath = window.location.pathname;
+    const newFavorite = {
+      url: currentUrlPath,
+      name: trimmedName,
+    };
+    const updatedFavorites = [...favorites, newFavorite];
+    localStorage.setItem('console-favorites', JSON.stringify(updatedFavorites));
+    setIsStarred(true);
+    handleModalClose();
+  };
+
+  const tooltipText = isStarred ? 'Remove from favorites' : 'Add to favorites';
+
+  return (
+    <>
+      <div className="co-fav-actions-icon">
+        <Tooltip content={tooltipText} position="top">
+          <Button
+            icon={<StarIcon color={isStarred ? 'gold' : 'gray'} />}
+            className="co-xl-icon-button"
+            data-test="favorite-button"
+            variant="plain"
+            aria-label={tooltipText}
+            aria-pressed={isStarred}
+            onClick={handleStarClick}
+          />
+        </Tooltip>
+      </div>
+
+      {isModalOpen && (
+        <Modal
+          title="Add to favorites"
+          isOpen={isModalOpen}
+          onClose={handleModalClose}
+          variant={ModalVariant.small}
+          actions={[
+            <Button
+              key="confirm"
+              variant="primary"
+              onClick={handleConfirmStar}
+              form="confirm-favorite-form"
+            >
+              Save
+            </Button>,
+            <Button key="cancel" variant="link" onClick={handleModalClose}>
+              Cancel
+            </Button>,
+          ]}
+        >
+          <Form id="confirm-favorite-form" onSubmit={handleConfirmStar}>
+            <FormGroup label="Name" isRequired fieldId="input-name">
+              <TextInput
+                id="confirm-favorite-form-name"
+                data-test="input-name"
+                name="name"
+                type="text"
+                onChange={(e, v) => handleNameChange(v)}
+                value={name || ''}
+                autoFocus
+                required
+              />
+              {error && (
+                <FormHelperText>
+                  <HelperText>
+                    <HelperTextItem variant="error">
+                      {error}
+                    </HelperTextItem>
+                  </HelperText>
+                </FormHelperText>
+              )}
+            </FormGroup>
+          </Form>
+        </Modal>
+      )}
+    </>
+  );
+};
+
+export default FavoriteButton;

src/gitops/components/appset/Generators.tsx

@@ -47,3 +47,5 @@ const Generators: React.FC<GeneratorsProps> = ({ generators }) => {
 };
 
 export default Generators;
+
+

src/gitops/components/appset/GeneratorsTab.scss

@@ -5,3 +5,5 @@
     gap: 16px;
   }
 }
+
+

src/gitops/components/appset/README.md

@@ -87,3 +87,6 @@ Each component has its own SCSS file for styling:
 3. **Maintainability**: Easier to maintain and debug individual components
 4. **Consistency**: Follows the same pattern as gitops-admin-plugin
 5. **Scalability**: Easy to add new generator types or modify existing ones
+
+
+

src/gitops/components/appset/generators/Generators.scss

@@ -53,3 +53,6 @@
     word-break: break-all;
   }
 }
+
+
+

src/gitops/components/shared/ApplicationSetList.tsx

@@ -189,7 +189,11 @@ const ApplicationSetList: React.FC<ApplicationSetProps> = ({
   return (
     <div>
       {showTitle == undefined && (
-        <ListPageHeader title={t('plugin__gitops-plugin~ApplicationSets')} badge={<DevPreviewBadge />}>
+        <ListPageHeader 
+          title={t('plugin__gitops-plugin~ApplicationSets')} 
+          badge={<DevPreviewBadge />}
+          hideFavoriteButton={false}
+        >
           <ListPageCreate groupVersionKind={modelToRef(ApplicationSetModel)}>
             Create ApplicationSet
           </ListPageCreate>

src/gitops/utils/components/DetailsPageTitle/ResourceDetailsTitle.tsx

@@ -8,6 +8,7 @@ import { Action, K8sModel, K8sResourceCommon } from '@openshift-console/dynamic-
 import { Breadcrumb, BreadcrumbItem, Spinner, Title } from '@patternfly/react-core';
 import ActionsDropdown from '../../../utils/components/ActionDropDown/ActionDropDown';
 import DetailsPageTitle, { PaneHeading } from './DetailsPageTitle';
+import FavoriteButton from '../../../components/appset/FavoriteButton';
 
 type ResourceDetailsTitleProps = {
   obj: K8sResourceCommon;
@@ -74,7 +75,8 @@ const ResourceDetailsTitle: React.FC<ResourceDetailsTitleProps> = ({
                 </span>
               )}
             </Title>
-            <div className="co-actions">
+            <div className="co-actions" style={{ display: 'flex', alignItems: 'center', gap: '16px' }}>
+              <FavoriteButton defaultName={name ?? obj?.metadata?.name} />
               <ActionsDropdown actions={actions} isKebabToggle={false} />
             </div>
           </PaneHeading>