Add a grid view toggle to the dashboard

Signed-off-by: Brent Salisbury <[email protected]>

Author: nerdalert

src/components/Dashboard/index.tsx

@@ -27,11 +27,13 @@ import { TextContent } from '@patternfly/react-core/dist/esm/components/Text/Tex
 import OutlinedQuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/outlined-question-circle-icon';
 import { Popover } from '@patternfly/react-core/dist/esm/components/Popover';
 import ExternalLinkAltIcon from '@patternfly/react-icons/dist/esm/icons/external-link-alt-icon';
+import { Gallery } from '@patternfly/react-core';
 
 const Index: React.FunctionComponent = () => {
   const { data: session } = useSession();
   const [pullRequests, setPullRequests] = React.useState<PullRequest[]>([]);
   const [error, setError] = React.useState<string | null>(null);
+  const [isGridView, setIsGridView] = React.useState(false);
   const router = useRouter();
 
   const fetchAndSetPullRequests = React.useCallback(async () => {
@@ -74,6 +76,14 @@ const Index: React.FunctionComponent = () => {
     }
   };
 
+  const handleListViewClick = () => {
+    setIsGridView(false); // Set view to list
+  };
+
+  const handleGridViewClick = () => {
+    setIsGridView(true); // Set view to grid
+  };
+
   if (!session) {
     return <div>Loading...</div>;
   }
@@ -108,7 +118,17 @@ const Index: React.FunctionComponent = () => {
         </TextContent>
       </PageSection>
       <PageSection>
-        <div style={{ marginBottom: '20px' }} />
+        {/* Only show toggle buttons if there are pull requests */}
+        {pullRequests.length > 0 && (
+          <div style={{ marginBottom: '20px' }}>
+            <Button variant={isGridView ? 'secondary' : 'primary'} onClick={handleListViewClick} style={{ marginRight: '10px' }}>
+              List View
+            </Button>
+            <Button variant={isGridView ? 'primary' : 'secondary'} onClick={handleGridViewClick}>
+              Grid View
+            </Button>
+          </div>
+        )}
         {error && <div>{error}</div>}
         {pullRequests.length === 0 ? (
           <EmptyState>
@@ -154,6 +174,40 @@ const Index: React.FunctionComponent = () => {
               </EmptyStateActions>
             </EmptyStateFooter>
           </EmptyState>
+        ) : isGridView ? (
+          <Gallery hasGutter>
+            {pullRequests.map((pr) => (
+              <Card key={pr.number}>
+                <CardTitle>{pr.title}</CardTitle>
+                <CardBody>
+                  <Flex justifyContent={{ default: 'justifyContentSpaceBetween' }}>
+                    <FlexItem>State: {pr.state}</FlexItem>
+                    <FlexItem>Created At: {new Date(pr.created_at).toLocaleString()}</FlexItem>
+                    <FlexItem>Updated At: {new Date(pr.updated_at).toLocaleString()}</FlexItem>
+                    <FlexItem>
+                      {pr.labels.map((label) => (
+                        <Label key={label.name} color="blue" style={{ marginRight: '5px' }}>
+                          {label.name}
+                        </Label>
+                      ))}
+                    </FlexItem>
+                    <FlexItem alignSelf={{ default: 'alignSelfFlexEnd' }} flex={{ default: 'flexNone' }}>
+                      <Button variant="secondary" component="a" href={pr.html_url} target="_blank" rel="noopener noreferrer">
+                        View PR
+                      </Button>
+                    </FlexItem>
+                    <FlexItem alignSelf={{ default: 'alignSelfFlexEnd' }} flex={{ default: 'flexNone' }}>
+                      {pr.state === 'open' && (
+                        <Button variant="primary" onClick={() => handleEditClick(pr)}>
+                          Edit
+                        </Button>
+                      )}
+                    </FlexItem>
+                  </Flex>
+                </CardBody>
+              </Card>
+            ))}
+          </Gallery>
         ) : (
           <Stack hasGutter>
             {pullRequests.map((pr) => (