feat: tup-414 help users "View all …"

apps/tup-ui/src/pages/Dashboard/Dashboard.module.css

@@ -44,8 +44,8 @@
   display: grid;
   gap: 25px;
   grid-template-columns: 1fr;
-  grid-template-rows: 1fr 1fr;
-  grid-template-areas: 
+  grid-template-rows: auto 1fr;
+  grid-template-areas:
     "projects"
     "tickets";
 

libs/tup-components/src/news/UserNews.tsx

@@ -7,6 +7,8 @@ import {
 } from '@tacc/core-components';
 import styles from './UserNews.module.css';
 
+const NEWS_DASHBOARD_DISPLAY_LIMIT = 3;
+
 const formatDate = (datestring: string): string => {
   const date = new Date(datestring);
   return date.toLocaleDateString('en-US', {
@@ -27,13 +29,13 @@ const ViewAllUpdates = () => (
     target="_blank"
     rel="noopener noreferrer"
   >
-    View All Updates
+    View all Updates
   </a>
 );
 
 const UserNews: React.FC = () => {
   const { data, isLoading } = useUserNews();
-  const maxItems = 5;
+  const maxItems = NEWS_DASHBOARD_DISPLAY_LIMIT;
 
   if (isLoading) return <LoadingSpinner />;
   return (

libs/tup-components/src/projects/ProjectsTable.tsx

@@ -4,6 +4,8 @@ import { ProjectsAllocations, useProjects } from '@tacc/tup-hooks';
 import { Link } from 'react-router-dom';
 import { EmptyTablePlaceholder } from '../utils';
 
+const PROJECTS_DASHBOARD_DISPLAY_LIMIT = 7;
+
 const allocationDisplay = (allocations: ProjectsAllocations[]) => {
   return allocations.length
     ? Array.from(
@@ -18,9 +20,11 @@ const allocationDisplay = (allocations: ProjectsAllocations[]) => {
 
 export const ProjectsTable: React.FC = () => {
   const { data, isLoading, error } = useProjects();
-  const projectData = data?.filter((prj) =>
-    prj.allocations?.some((alloc) => alloc.status === 'Active')
-  );
+  const projectData = data
+    ?.filter((prj) =>
+      prj.allocations?.some((alloc) => alloc.status === 'Active')
+    )
+    .slice(0, PROJECTS_DASHBOARD_DISPLAY_LIMIT);
 
   if (isLoading) {
     return <LoadingSpinner />;

libs/tup-components/src/tickets/TicketsDashboard.module.css

@@ -0,0 +1,4 @@
+.viewall-action {
+    margin-left: auto;
+    margin-right: 1em;
+}

libs/tup-components/src/tickets/TicketsDashboard.tsx

@@ -1,16 +1,24 @@
-import { SectionTableWrapper } from '@tacc/core-components';
 import React from 'react';
+import { Link } from 'react-router-dom';
+import { SectionTableWrapper } from '@tacc/core-components';
 import TicketCreateModal from './TicketCreateModal';
 import { TicketsTable } from './TicketsTable';
 
+import styles from './TicketsDashboard.module.css';
+
 const TicketsDashboard: React.FC = () => {
   return (
     <SectionTableWrapper
       header="My Tickets"
       headerActions={
-        <TicketCreateModal display="secondary" size="small">
-          + New Ticket
-        </TicketCreateModal>
+        <>
+          <Link to="/tickets" className={styles['viewall-action']}>
+            View all Tickets
+          </Link>
+          <TicketCreateModal display="secondary" size="small">
+            + New Ticket
+          </TicketCreateModal>
+        </>
       }
       contentShouldScroll
     >

libs/tup-components/src/tickets/TicketsTable.tsx

@@ -6,7 +6,7 @@ import './TicketsTable.global.css';
 import { formatDate } from '../utils/timeFormat';
 import { EmptyTablePlaceholder } from '../utils';
 
-const TICKETS_DASHBOARD_DISPLAY_LIMIT = 12;
+const TICKETS_DASHBOARD_DISPLAY_LIMIT = 7;
 
 export const getStatusText = (status: string) => {
   switch (status) {