feat: feature flags + projects message - in App

apps/tup-ui/.env

@@ -0,0 +1 @@
+VITE_FEATURE_PROJECTS_ENABLED=false

apps/tup-ui/src/App.tsx

@@ -23,10 +23,33 @@ import {
   Impersonate,
   Systems,
 } from './pages';
+import { ProjectsMessage } from './messages';
 
 const AppLayout = () => {
   return <PageLayout left={<Sidebar />} right={<Outlet />} />;
 };
+const AppPageWithMessage = ({
+  MessageComponent,
+  PageComponent,
+  showMessage,
+}: {
+  MessageComponent: React.ComponentType;
+  PageComponent: React.ComponentType;
+  showMessage: boolean;
+}) => {
+  return (
+    <>
+      {showMessage && <MessageComponent />}
+      <PageComponent />
+    </>
+  );
+};
+
+console.log(
+  'VITE_FEATURE_PROJECTS_ENABLED:',
+  import.meta.env.VITE_FEATURE_PROJECTS_ENABLED
+);
+
 function App() {
   return (
     <Routes>
@@ -44,8 +67,30 @@ function App() {
             element={<TicketDetail baseRoute="/tickets" />}
           />
         </Route>
-        <Route path="projects" element={<Projects />}></Route>
-        <Route path="projects/active" element={<Projects />}></Route>
+        <Route
+          path="projects"
+          element={
+            <AppPageWithMessage
+              PageComponent={Projects}
+              MessageComponent={ProjectsMessage}
+              showMessage={
+                import.meta.env.VITE_FEATURE_PROJECTS_ENABLED !== 'true'
+              }
+            />
+          }
+        ></Route>
+        <Route
+          path="projects/active"
+          element={
+            <AppPageWithMessage
+              PageComponent={Projects}
+              MessageComponent={ProjectsMessage}
+              showMessage={
+                import.meta.env.VITE_FEATURE_PROJECTS_ENABLED !== 'true'
+              }
+            />
+          }
+        ></Route>
         <Route path="projects/:projectId" element={<ProjectView />}>
           <Route path="" element={<ProjectDetail />}></Route>
           <Route path=":username" element={<ProjectMember />}></Route>

apps/tup-ui/src/messages/Messages.module.css

@@ -0,0 +1,5 @@
+.message {
+    margin-top: var(--global-space--section-top) !important;
+    margin-left: var(--global-space--section-left);
+    margin-right: var(--global-space--section-right);
+}

apps/tup-ui/src/messages/Messages.tsx

@@ -0,0 +1,19 @@
+import { SectionMessage } from '@tacc/core-components';
+import styles from './Messages.module.css';
+
+export const ProjectsMessage = () => {
+  return (
+    <SectionMessage type="error" className={styles['message']}>
+      Project Maintenance is scheduled for <time>Tues Nov 4, 9AM - 1PM CT</time>
+      . You will be unable to manage your project users during this time. See{' '}
+      <a
+        href="https://tacc.utexas.edu/news/user-updates/107601/"
+        rel="noreferrer"
+        target="_blank"
+      >
+        tacc.utexas.edu/news/user-updates/107601
+      </a>
+      .
+    </SectionMessage>
+  );
+};

apps/tup-ui/src/messages/index.ts

@@ -0,0 +1,3 @@
+import { ProjectsMessage } from './Messages';
+
+export { ProjectsMessage };

apps/tup-ui/vite.config.ts

@@ -7,6 +7,7 @@ import path from 'path';
 export default defineConfig({
   root: __dirname,
   cacheDir: '../../node_modules/.vite/tup-ui',
+  // envPrefix: 'VITE_',
 
   server: {
     port: 3000,

libs/tup-components/src/layout/PageLayout/PageLayout.module.css

@@ -25,7 +25,7 @@
   grid-area: _content;
 
   display: grid;
-  grid-template-rows: 100%; /* to not let items overflow this container */
+  grid-template-rows: min-content;
 }
 
 .footer {