Merge branch 'main' into feat/tup-463

TACC · Nov 15, 2023 · 6067b5c · 6067b5c
2 parents 3167014 + 5b0a2b6
commit 6067b5c
Show file tree

Hide file tree

Showing 17 changed files with 68 additions and 38 deletions.
diff --git a/apps/tup-cms/src/taccsite_cms/templates/snippets/css-spacing-fixes.html b/apps/tup-cms/src/taccsite_cms/templates/snippets/css-spacing-fixes.html
@@ -1,10 +1,14 @@
 <style id="css-spacing-fixes">
+/* HELP: Is this ready for tup-cms CSS? */
+/* FAQ: It seems too messy for core-cms */
+
 /* FAQ: Columns that explcitely or automatically span 12, get margin bottom */
 .col-12:not(
   :last-child,
   [class*="banner-cell"],
   #page-scivis-gallery *,
   #page-all-systems *,
+  #page-stampede2 *, /* IMPORTANT: Added on 2023-10-13 */
   :has(h1:only-child) /* /research/tacc-software/, /use-tacc/software-list/ */
 ),
 .col:not(

diff --git a/apps/tup-ui/src/main.global.css b/apps/tup-ui/src/main.global.css
@@ -19,6 +19,13 @@
   --global-space--section-bottom: 30px;
   --global-space--section-left: 20px;
   --global-space--section-right: 30px;
+  /* NOTE: Unexpectedly required to apply the above var changes */
+  /* HELP: Why isn't Core-Styles `--global-space--section` auto-updated? */
+  --global-space--section:
+    var(--global-space--section-top)
+    var(--global-space--section-right)
+    var(--global-space--section-bottom)
+    var(--global-space--section-left);
 }
 
 /* To stretch application height to available space */

diff --git a/apps/tup-ui/src/pages/Dashboard/Dashboard.module.css b/apps/tup-ui/src/pages/Dashboard/Dashboard.module.css
@@ -29,7 +29,7 @@
     grid-template-columns: 0.5fr 0.5fr;
   }
   @media (--x-wide-and-above) {
-    grid-template-columns: 0.65fr 0.35fr;
+    grid-template-columns: 0.6fr 0.4fr;
   }
 }
 .panels > * {
@@ -42,6 +42,7 @@
 
 .section {
   display: grid;
+  grid-template-rows: auto 1fr;
   padding: var(--global-space--section)
 }
 
@@ -50,14 +51,14 @@
   display: grid;
   gap: 25px;
   grid-template-columns: 1fr;
-  grid-template-rows: 1fr 1fr;
+  grid-template-rows: 0.5fr 1fr;
   grid-template-areas:
     "projects"
     "tickets";
 
   @media (--wide-and-below) {
     row-gap: 25px;
-    grid-template-rows: auto auto;
+    grid-template-rows: 300px 300px;
   }
 }
 

diff --git a/apps/tup-ui/src/pages/Projects/Projects.tsx b/apps/tup-ui/src/pages/Projects/Projects.tsx
@@ -10,7 +10,9 @@ import styles from './Projects.module.css';
 
 const NewProject = () => (
   <a href="https://submit-tacc.xras.org/" target="_blank" rel="noreferrer">
-    <Button type="primary">+ New Project</Button>
+    <Button type="primary" size="small">
+      + New Project
+    </Button>
   </a>
 );
 
@@ -20,7 +22,7 @@ const Layout: React.FC = () => {
       <section className={styles['project-section']}>
         <PageLayout
           top={
-            <SectionHeader actions={<NewProject />}>
+            <SectionHeader actions={<NewProject />} isNestedHeader>
               Projects & Allocations
             </SectionHeader>
           }

diff --git a/libs/core-components/src/lib/Button/Button.tsx b/libs/core-components/src/lib/Button/Button.tsx
@@ -28,12 +28,8 @@ type ButtonTypeLinkSize = {
   type?: 'link';
   size?: never;
 };
-type ButtonTypePrimarySize = {
-  type?: 'primary';
-  size?: 'short' | 'medium' | 'long';
-};
 type ButtonTypeOtherSize = {
-  type?: 'secondary' | 'tertiary' | 'active';
+  type?: 'primary' | 'secondary' | 'tertiary' | 'active';
   size?: 'short' | 'medium' | 'long' | 'small';
 };
 
@@ -48,7 +44,7 @@ type ButtonProps = React.PropsWithChildren<{
   attr?: 'button' | 'submit' | 'reset';
   isLoading?: boolean;
 }> &
-  (ButtonTypeLinkSize | ButtonTypePrimarySize | ButtonTypeOtherSize);
+  (ButtonTypeLinkSize | ButtonTypeOtherSize);
 
 const Button: React.FC<ButtonProps> = ({
   children,

diff --git a/libs/core-components/src/lib/SectionHeader/SectionHeader.jsx b/libs/core-components/src/lib/SectionHeader/SectionHeader.jsx
@@ -42,9 +42,11 @@ function SectionHeader({
   isForForm,
   isForTable,
   isForList,
+  isNestedHeader,
 }) {
   let styleName = '';
   const styleNameList = [styles['root']];
+  const HeaderTagName = isNestedHeader ? 'div' : 'header';
   const HeadingTagName = isForForm || isForTable || isForList ? 'h2' : 'h1';
 
   if (isForForm) styleNameList.push(styles['for-form']);
@@ -55,14 +57,14 @@ function SectionHeader({
   styleName = styleNameList.join(' ');
 
   return (
-    <header className={`${className} ${styleName}`}>
+    <HeaderTagName className={`${className} ${styleName}`}>
       {children && (
         <HeadingTagName className={styles['heading']}>
           {children}
         </HeadingTagName>
       )}
       {actions}
-    </header>
+    </HeaderTagName>
   );
 }
 SectionHeader.propTypes = {

diff --git a/libs/tup-components/src/accounts/ManageAccount.module.css b/libs/tup-components/src/accounts/ManageAccount.module.css
@@ -6,13 +6,11 @@
 .account-header {
     font-size: 2rem;
     border-bottom: 1px solid #707070;
-    padding: 10px;
 }
-.account-header > i {
-    font-size: 32px;
-    margin-bottom: -6px;
+.account-header i {
+    vertical-align: middle;
+    margin-top: -0.25em;
     margin-right: 0.5rem;
-
 }
 
 .account-body {

diff --git a/libs/tup-components/src/accounts/ManageAccount.tsx b/libs/tup-components/src/accounts/ManageAccount.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Icon, Button } from '@tacc/core-components';
+import { Icon, Button, SectionHeader } from '@tacc/core-components';
 import { useProfile } from '@tacc/tup-hooks';
 import { AccountMfa } from './ManageAccountMfa';
 import styles from './ManageAccount.module.css';
@@ -94,12 +94,12 @@ const ManageAccount: React.FC = () => {
   return (
     <section>
       <article className={styles['account-layout']}>
-        <header className={styles['account-header']}>
+        <SectionHeader className={styles['account-header']} isNestedHeader>
           <Icon name="user" />
           <span>
             {data?.firstName} {data?.lastName}
           </span>
-        </header>
+        </SectionHeader>
         <div className={styles['account-body']}>
           <section>
             <ManageUser />

diff --git a/libs/tup-components/src/news/UserNews.tsx b/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 (

diff --git a/libs/tup-components/src/projects/ProjectsTable.tsx b/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 />;

diff --git a/libs/tup-components/src/projects/header/ProjectHeader/ProjectHeader.tsx b/libs/tup-components/src/projects/header/ProjectHeader/ProjectHeader.tsx
@@ -86,7 +86,7 @@ export const ProjectHeader: React.FC<{ projectId: number }> = ({
 
   return (
     <div className={styles['project-header']}>
-      <SectionHeader>
+      <SectionHeader isNestedHeader>
         {isActive && <Link to={'/projects?show=active'}>Active Projects </Link>}
         {!isActive && (
           <Link to={'/projects?show=inactive'}>Inactive Projects </Link>

diff --git a/libs/tup-components/src/system-status/details/SystemStatusHeader.tsx b/libs/tup-components/src/system-status/details/SystemStatusHeader.tsx
@@ -17,14 +17,16 @@ export const SystemStatusHeader: React.FC<SystemDetailProps> = ({
 
   if (error)
     return (
-      <SectionHeader>
+      <SectionHeader isNestedHeader>
         <InlineMessage type="warn">
           System Status / Unable to retrieve system name
         </InlineMessage>
       </SectionHeader>
     );
 
   return (
-    <SectionHeader>System Status / {dataBySystem?.display_name}</SectionHeader>
+    <SectionHeader isNestedHeader>
+      System Status / {dataBySystem?.display_name}
+    </SectionHeader>
   );
 };
diff --git a/libs/tup-components/src/tickets/TicketCreateModal/TicketCreateModal.tsx b/libs/tup-components/src/tickets/TicketCreateModal/TicketCreateModal.tsx
@@ -6,7 +6,7 @@ import styles from './TicketCreateModal.module.css';
 
 const TicketCreateModal: React.FC<
   React.PropsWithChildren<{
-    display: 'secondary' | 'link';
+    display: 'secondary' | 'link' | 'primary';
     size?: 'small';
   }>
 > = ({ children, size, display }) => {
@@ -23,8 +23,8 @@ const TicketCreateModal: React.FC<
 
   return (
     <>
-      {display === 'secondary' && (
-        <Button onClick={() => toggle()} type="secondary" size={size}>
+      {display !== 'link' && (
+        <Button onClick={() => toggle()} type={display} size={size}>
           {children}
         </Button>
       )}

diff --git a/libs/tup-components/src/tickets/Tickets.tsx b/libs/tup-components/src/tickets/Tickets.tsx
@@ -12,7 +12,7 @@ const Tickets: React.FC = () => {
       <section className={styles['tickets-section']}>
         <SectionHeader
           actions={
-            <TicketCreateModal display="secondary">
+            <TicketCreateModal display="secondary" size="small">
               + New Ticket
             </TicketCreateModal>
           }

diff --git a/libs/tup-components/src/tickets/TicketsDashboard.module.css b/libs/tup-components/src/tickets/TicketsDashboard.module.css
@@ -0,0 +1,4 @@
+.viewall-action {
+    margin-left: auto;
+    margin-right: 1em;
+}
diff --git a/libs/tup-components/src/tickets/TicketsDashboard.tsx b/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
     >

diff --git a/libs/tup-components/src/tickets/TicketsTable.tsx b/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) {