CORE-2025 Add Data Limits dashboard announcement

public/static/locales/en/dashboard.json

@@ -21,6 +21,7 @@
     "dataConsumptionError": "Unable to get data storage info.",
     "dataConsumptionTimestamp": "{{distance}} ago.",
     "dataOverageNote": "Need more resources? There's a <dataStoreFormLink>form</dataStoreFormLink> for that!",
+    "dataStorageLimits": "Data Storage Limits",
     "detailsAction": "Show Details",
     "dismiss": "Dismiss",
     "editedBy": "Edited by",
@@ -54,6 +55,7 @@
     "popularFeaturedApps": "Featured Apps",
     "publicApps": "Public Apps",
     "publishedBy": "Published by",
+    "quotaEnforceAnnouncement": "CyVerse will begin enforcing data storage limits on March 1, 2025. Please see the <infoLink>announcement</infoLink> for more details.",
     "quotaLimit": "{{limit}} (Limit)",
     "recentAnalyses": "Recent Analyses",
     "recentlyAddedApps": "Recently Added Apps",

src/components/dashboard/constants.js

@@ -46,3 +46,4 @@ export const XS_NUM_COLUMNS = 1;
 export const XS_PIXELS = 0;
 
 export const FEATURE_MATRIX_URL = "https://cyverse.org/subscribe";
+export const QUOTA_ENFORCE_URL = "https://cyverse.org/quota-enforce";

src/components/dashboard/dashboardItem/Announcement.js

@@ -0,0 +1,64 @@
+/**
+ * A dashboard item for displaying important announcements.
+ *
+ * @author psarando
+ */
+import React from "react";
+
+import { useTranslation, Trans } from "i18n";
+
+import { QUOTA_ENFORCE_URL } from "../constants";
+import ExternalLink from "components/utils/ExternalLink";
+
+import {
+    Card,
+    CardHeader,
+    CardContent,
+    Typography,
+    useTheme,
+} from "@mui/material";
+
+import AnnounceIcon from "@mui/icons-material/Warning";
+
+export default function Announcement() {
+    const theme = useTheme();
+    const { t } = useTranslation("dashboard");
+
+    return (
+        <Card
+            style={{
+                marginTop: theme.spacing(2),
+                marginBottom: theme.spacing(2),
+            }}
+        >
+            <CardHeader
+                avatar={
+                    <AnnounceIcon
+                        style={{ color: theme.palette.gold }}
+                        fontSize="large"
+                    />
+                }
+                title={
+                    <Typography variant="subtitle2">
+                        {t("dataStorageLimits")}
+                    </Typography>
+                }
+                style={{
+                    backgroundColor: theme.palette.secondary.main,
+                    color: theme.palette.secondary.contrastText,
+                }}
+            />
+            <CardContent>
+                <Typography variant="body2" gutterBottom>
+                    <Trans
+                        t={t}
+                        i18nKey="quotaEnforceAnnouncement"
+                        components={{
+                            infoLink: <ExternalLink href={QUOTA_ENFORCE_URL} />,
+                        }}
+                    />
+                </Typography>
+            </CardContent>
+        </Card>
+    );
+}

src/components/dashboard/index.js

@@ -49,6 +49,7 @@ import { useSavePreferences } from "serviceFacades/users";
 
 import withErrorAnnouncer from "components/error/withErrorAnnouncer";
 import { useUserProfile } from "contexts/userProfile";
+import Announcement from "./dashboardItem/Announcement";
 import Banner from "./dashboardItem/Banner";
 import Tour from "./dashboardItem/Tour";
 import TerminateAnalysisDialog from "components/analyses/TerminateAnalysisDialog";
@@ -311,6 +312,7 @@ const Dashboard = (props) => {
                             mutatePreferences({ preferences: updatedPref });
                         }}
                     />,
+                    <Announcement key="Announcement" />,
                     <ResourceUsageItem
                         key="ResourceUsage"
                         resourceUsageSummary={resourceUsageSummary}