fix(homepage): add external link icon to Read documentation button an… (#1314)

* fix(homepage): add external link icon to Read documentation button and updated greetings

* fix(homepage): add padding and made endicon more generic

* add unit tests

Author: Eswaraiahsapram

workspaces/homepage/.changeset/curly-geese-pay.md

@@ -0,0 +1,5 @@
+---
+'@red-hat-developer-hub/backstage-plugin-dynamic-home-page': patch
+---
+
+Added external link icon to Read documentaion and updated homepage greetings

workspaces/homepage/plugins/dynamic-home-page/src/components/OnboardingSection/OnboardingCard.test.tsx

@@ -36,6 +36,8 @@ describe('OnboardingCard', () => {
     buttonText: 'Learn More',
     buttonLink: '/docs',
     target: '_blank',
+    ariaLabel: 'Learn more about getting started',
+    endIcon: null,
   };
 
   const renderWithTheme = (ui: ReactElement) => {
@@ -67,9 +69,31 @@ describe('OnboardingCard', () => {
     expect(link).toHaveAttribute('target', '_blank');
   });
 
-  it('should render the ArrowForwardIcon', () => {
+  it('should render custom icon when provided', () => {
+    const CustomIcon = () => <div data-testid="custom-icon">Custom</div>;
+    const propsWithIcon = { ...mockProps, endIcon: <CustomIcon /> };
+
+    renderWithTheme(<OnboardingCard {...propsWithIcon} />);
+
+    expect(screen.getByTestId('custom-icon')).toBeInTheDocument();
+  });
+
+  it('should apply aria-label when provided', () => {
     renderWithTheme(<OnboardingCard {...mockProps} />);
-    const icon = screen.getByTestId('ArrowForwardIcon');
-    expect(icon).toBeInTheDocument();
+    const link = screen.getByRole('link', { name: /Learn More/i });
+
+    expect(link).toHaveAttribute(
+      'aria-label',
+      'Learn more about getting started',
+    );
+  });
+
+  it('should not apply aria-label when not provided', () => {
+    const { ariaLabel, ...propsWithoutAriaLabel } = mockProps;
+
+    renderWithTheme(<OnboardingCard {...propsWithoutAriaLabel} />);
+    const link = screen.getByRole('link', { name: /Learn More/i });
+
+    expect(link).not.toHaveAttribute('aria-label');
   });
 });

workspaces/homepage/plugins/dynamic-home-page/src/components/OnboardingSection/OnboardingCard.tsx

@@ -18,7 +18,6 @@ import { Link as RouterLink } from 'react-router-dom';
 
 import Box from '@mui/material/Box';
 import CardContent from '@mui/material/CardContent';
-import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
 import Button from '@mui/material/Button';
 import Typography from '@mui/material/Typography';
 
@@ -29,6 +28,7 @@ interface OnboardingCardProps {
   buttonLink: string;
   target?: string;
   ariaLabel?: string;
+  endIcon: React.ReactNode;
 }
 
 const OnboardingCard: FC<OnboardingCardProps> = ({
@@ -38,6 +38,7 @@ const OnboardingCard: FC<OnboardingCardProps> = ({
   buttonLink,
   target,
   ariaLabel,
+  endIcon,
 }) => {
   return (
     <Box>
@@ -78,9 +79,13 @@ const OnboardingCard: FC<OnboardingCardProps> = ({
           sx={{
             padding: theme => theme.spacing(1, 1.5),
             fontSize: '16px',
+            '& .v5-MuiButton-endIcon': {
+              marginRight: 0,
+            },
           }}
+          endIcon={endIcon}
         >
-          {buttonText} <ArrowForwardIcon style={{ paddingLeft: '0.5rem' }} />
+          {buttonText}{' '}
         </Button>
       </CardContent>
     </Box>

workspaces/homepage/plugins/dynamic-home-page/src/components/OnboardingSection/OnboardingSection.tsx

@@ -31,6 +31,7 @@ import HomePageIllustrationDark from '../../images/homepage-illustration-dark.sv
 import HomePageIllustrationLight from '../../images/homepage-illustration-light.svg';
 import { LEARNING_SECTION_ITEMS } from '../../utils/constants';
 import useGreeting from '../../hooks/useGreeting';
+import { LearningSectionItem } from '../../types';
 
 export const OnboardingSection = () => {
   const [user, setUser] = useState<string | null>();
@@ -99,7 +100,7 @@ export const OnboardingSection = () => {
             }}
           />
         </Grid>
-        {LEARNING_SECTION_ITEMS.map(item => (
+        {LEARNING_SECTION_ITEMS.map((item: LearningSectionItem) => (
           <Grid
             item
             xs={12}
@@ -117,6 +118,7 @@ export const OnboardingSection = () => {
               buttonLink={item.buttonLink}
               target={item.target}
               ariaLabel={item.ariaLabel}
+              endIcon={<item.endIcon />}
             />
           </Grid>
         ))}
@@ -143,7 +145,7 @@ export const OnboardingSection = () => {
             fontSize: '1.5rem',
           }}
         >
-          {`${greeting} ${profileDisplayName() || 'Guest'}!`}
+          {`${greeting}, ${profileDisplayName() || 'Guest'}!`}
         </Typography>
       )}
       {content}

workspaces/homepage/plugins/dynamic-home-page/src/types.ts

@@ -64,3 +64,13 @@ export type QuickAccessLink = {
   isExpanded?: boolean;
   links: (Tool & { iconUrl: string })[];
 };
+
+export type LearningSectionItem = {
+  title: string;
+  description: string;
+  buttonText: string;
+  buttonLink: string;
+  target?: string;
+  ariaLabel?: string;
+  endIcon: React.ComponentType;
+};

workspaces/homepage/plugins/dynamic-home-page/src/utils/constants.ts

@@ -13,7 +13,13 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-export const LEARNING_SECTION_ITEMS = [
+
+import OpenInNewIcon from '@mui/icons-material/OpenInNew';
+import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
+
+import { LearningSectionItem } from '../types';
+
+export const LEARNING_SECTION_ITEMS: LearningSectionItem[] = [
   {
     title: 'Get started',
     description: 'Learn about Red Hat Developer Hub.',
@@ -22,6 +28,7 @@ export const LEARNING_SECTION_ITEMS = [
       'https://docs.redhat.com/en/documentation/red_hat_developer_hub/',
     target: '_blank',
     ariaLabel: 'Read documentation (opens in a new tab)',
+    endIcon: OpenInNewIcon,
   },
   {
     title: 'Explore',
@@ -30,6 +37,7 @@ export const LEARNING_SECTION_ITEMS = [
     buttonLink: '/catalog',
     target: undefined,
     ariaLabel: 'Go to Catalog',
+    endIcon: ArrowForwardIcon,
   },
   {
     title: 'Learn',
@@ -38,6 +46,7 @@ export const LEARNING_SECTION_ITEMS = [
     buttonLink: '/learning-paths',
     target: undefined,
     ariaLabel: 'Go to Learning Paths',
+    endIcon: ArrowForwardIcon,
   },
 ];