Improve full view functionality in ReadmeCard (#298)

* Update full view icon and title in ReadmeCard

* feat: Handle full view though URL params

---------

Co-authored-by: Frida Englund <fridaja@axis.com>

Author: fridajac

.changeset/silly-rooms-jog.md

@@ -0,0 +1,5 @@
+---
+'@axis-backstage/plugin-readme': minor
+---
+
+Add URL state management and update fullscreen icon

plugins/readme/media/readme-card.png

@@ -1,29 +1,28 @@
-import { useState } from 'react';
 import IconButton from '@mui/material/IconButton';
 import Box from '@mui/material/Box';
+import FullscreenIcon from '@mui/icons-material/Fullscreen';
 import { InfoCard, InfoCardVariants } from '@backstage/core-components';
 import { FetchComponent } from '../FetchComponent';
-import OpenInNewIcon from '@mui/icons-material/OpenInNew';
 import { ReadmeDialog } from '../ReadmeDialog/ReadmeDialog';
+import { useFullViewParam } from '../../hooks/useFullViewParam';
 
 /**
  * ReadmeCardProps props.
  *
  * @public
  */
-
 export type ReadmeCardProps = {
   variant?: InfoCardVariants;
   maxHeight?: string | number;
 };
 
 export const ReadmeCard = (props: ReadmeCardProps) => {
   const { variant = 'gridItem', maxHeight: propMaxHeight } = props;
+  const [isFullViewOpen, setIsFullViewOpen] = useFullViewParam();
+
   const maxHeight =
     variant === 'fullHeight' ? 'none' : propMaxHeight ?? '235px';
 
-  const [displayDialog, setDisplayDialog] = useState(false);
-
   return (
     <>
       <InfoCard
@@ -32,13 +31,12 @@ export const ReadmeCard = (props: ReadmeCardProps) => {
         action={
           variant !== 'fullHeight' ? (
             <IconButton
-              onClick={() => setDisplayDialog(true)}
-              aria-label="open dialog"
-              role="button"
-              title="Open in dialog"
+              onClick={() => setIsFullViewOpen(true)}
+              aria-label="Open full view"
+              title="Open full view"
               size="large"
             >
-              <OpenInNewIcon />
+              <FullscreenIcon />
             </IconButton>
           ) : undefined
         }
@@ -51,8 +49,8 @@ export const ReadmeCard = (props: ReadmeCardProps) => {
       </InfoCard>
 
       <ReadmeDialog
-        open={displayDialog}
-        onClose={() => setDisplayDialog(false)}
+        open={isFullViewOpen}
+        onClose={() => setIsFullViewOpen(false)}
       />
     </>
   );

plugins/readme/media/readme.png

@@ -0,0 +1,24 @@
+import { useLocation, useNavigate } from 'react-router-dom';
+import { useMemo } from 'react';
+
+export const useFullViewParam = (): [boolean, (open: boolean) => void] => {
+  const location = useLocation();
+  const navigate = useNavigate();
+
+  const isFullView = useMemo(() => {
+    const params = new URLSearchParams(location.search);
+    return params.get('fullView') === 'true';
+  }, [location.search]);
+
+  const setFullView = (open: boolean) => {
+    const params = new URLSearchParams(location.search);
+    if (open) {
+      params.set('fullView', 'true');
+    } else {
+      params.delete('fullView');
+    }
+    navigate({ search: params.toString() }, { replace: true });
+  };
+
+  return [isFullView, setFullView];
+};