Merge pull request #557 from psarando/CORE-1936-mui-v5-fixes

CORE-1936 MUI v5 fixes
cyverse-de · Nov 22, 2023 · a09d32d · a09d32d
2 parents 14aa302 + 12ff20f
commit a09d32d
Show file tree

Hide file tree

Showing 52 changed files with 85 additions and 73 deletions.
diff --git a/src/components/analyses/AnalysisCommentDialog.js b/src/components/analyses/AnalysisCommentDialog.js
@@ -105,7 +105,7 @@ function AnalysisCommentDialog(props) {
                                 </Button>
                                 <Button
                                     id={buildID(baseId, UtilIds.DIALOG.CONFIRM)}
-                                    color="primary"
+                                    variant="contained"
                                     type="submit"
                                     onClick={handleSubmit}
                                 >

diff --git a/src/components/analyses/RenameAnalysisDialog.js b/src/components/analyses/RenameAnalysisDialog.js
@@ -122,7 +122,7 @@ function RenameAnalysisDialog(props) {
                                 </Button>
                                 <Button
                                     id={buildID(baseId, UtilIds.DIALOG.CONFIRM)}
-                                    color="primary"
+                                    variant="contained"
                                     type="submit"
                                     onClick={handleSubmit}
                                 >

diff --git a/src/components/analyses/details/InfoPanel.js b/src/components/analyses/details/InfoPanel.js
@@ -109,7 +109,7 @@ function InfoPanel(props) {
         return <GridLoading rows={2} baseId={baseId} />;
     }
 
-    if (!info && !isInfoFetching && !infoFetchError) {
+    if (!(info?.steps || isInfoFetching || infoFetchError)) {
         return null;
     }
 

diff --git a/src/components/apps/AgaveAuthPromptDialog.js b/src/components/apps/AgaveAuthPromptDialog.js
@@ -62,7 +62,7 @@ function AgaveAuthPromptDialog(props) {
                 </Button>
                 <Button
                     onClick={redirectUser}
-                    color="primary"
+                    variant="contained"
                     id={buildID(
                         baseId,
                         ids.AGAVE_AUTH_PROMPT_DIALOG,

diff --git a/src/components/apps/PublishAppDialog.js b/src/components/apps/PublishAppDialog.js
@@ -249,7 +249,7 @@ export default function PublishAppDialog(props) {
                                     <Button
                                         id={buildID(parentId, ids.SUBMIT_BTN)}
                                         type="submit"
-                                        color="primary"
+                                        variant="contained"
                                         onClick={handleSubmit}
                                     >
                                         {i18nCommon("submit")}

diff --git a/src/components/apps/admin/details/AdminAppDetails.js b/src/components/apps/admin/details/AdminAppDetails.js
@@ -209,7 +209,7 @@ function AdminAppDetailsForm(props) {
                         <Button
                             id={buildID(parentId, ids.SAVE_BTN)}
                             type="submit"
-                            color="primary"
+                            variant="contained"
                             onClick={handleSubmit}
                         >
                             {i18nCommon("save")}

diff --git a/src/components/apps/admin/referenceGenomes/Edit.js b/src/components/apps/admin/referenceGenomes/Edit.js
@@ -167,7 +167,7 @@ function Edit(props) {
                             <Button
                                 id={buildID(baseId, ids.OK_BUTTON)}
                                 className={classes.actionButton}
-                                color="primary"
+                                variant="contained"
                                 type="submit"
                             >
                                 {t("ok")}

diff --git a/src/components/dashboard/DashboardSection.js b/src/components/dashboard/DashboardSection.js
@@ -1,17 +1,18 @@
 import React, { useState } from "react";
 import clsx from "clsx";
 
-import { Typography, Collapse, Button, useTheme, Divider } from "@mui/material";
+import { Typography, Collapse, Button, Divider } from "@mui/material";
 
 import getItem from "./dashboardItem";
 
 import useStyles from "./styles";
 import * as fns from "./functions";
 import * as constants from "./constants";
 import ids from "./ids";
-import { useTranslation } from "i18n";
 
 const DashboardSection = ({
+    t,
+    theme,
     name,
     kind,
     items,
@@ -29,9 +30,7 @@ const DashboardSection = ({
     computeLimitExceeded,
 }) => {
     const classes = useStyles();
-    const { t } = useTranslation("dashboard");
     const [expanded, setExpanded] = useState(false);
-    const theme = useTheme();
 
     const isNewsSection = section === constants.SECTION_NEWS;
     const isEventsSection = section === constants.SECTION_EVENTS;
@@ -115,6 +114,7 @@ class SectionBase {
 
     getComponent({
         t,
+        theme,
         cardWidth,
         cardHeight,
         data,
@@ -169,6 +169,8 @@ class SectionBase {
                 setPendingAnalysis={setPendingAnalysis}
                 setTerminateAnalysis={setTerminateAnalysis}
                 computeLimitExceeded={computeLimitExceeded}
+                t={t}
+                theme={theme}
             />
         );
     }

diff --git a/src/components/dashboard/dashboardItem/AnalysisItem.js b/src/components/dashboard/dashboardItem/AnalysisItem.js
@@ -8,7 +8,7 @@ import {
     Cancel,
     Launch,
 } from "@mui/icons-material";
-import { IconButton, useTheme } from "@mui/material";
+import { IconButton } from "@mui/material";
 
 import { formatDate } from "components/utils/DateFormatter";
 
@@ -20,7 +20,6 @@ import { getFolderPage } from "../../data/utils";
 
 import NavConstants from "../../../common/NavigationConstants";
 import { isTerminated } from "components/analyses/utils";
-import { useTranslation } from "i18n";
 import { isInteractive, openInteractiveUrl } from "components/analyses/utils";
 
 class AnalysisItem extends ItemBase {
@@ -36,11 +35,14 @@ class AnalysisItem extends ItemBase {
 
     static create(props) {
         const analysis = props.content;
-        const { setDetailsAnalysis, setPendingAnalysis, setTerminateAnalysis } =
-            props;
+        const {
+            setDetailsAnalysis,
+            setPendingAnalysis,
+            setTerminateAnalysis,
+            t,
+            theme,
+        } = props;
         const item = new AnalysisItem(props);
-        const { t } = useTranslation("dashboard");
-        const theme = useTheme();
         const isTerminatedAnalysis = isTerminated(analysis);
         const isVICE = isInteractive(analysis);
         const interactiveUrls = analysis?.interactive_urls;

diff --git a/src/components/dashboard/dashboardItem/AppItem.js b/src/components/dashboard/dashboardItem/AppItem.js
@@ -12,10 +12,8 @@ import { appFavorite, APP_BY_ID_QUERY_KEY } from "serviceFacades/apps";
 
 import * as constants from "../constants";
 import ItemBase, { ItemAction } from "./ItemBase";
-import { useTranslation } from "i18n";
 import AppFavorite from "components/apps/AppFavorite";
 import { useAppLaunchLink } from "components/apps/utils";
-import { useTheme } from "@mui/material";
 
 class AppItem extends ItemBase {
     constructor(props) {
@@ -30,9 +28,7 @@ class AppItem extends ItemBase {
 
     static create(props) {
         const item = new AppItem(props);
-        const { showErrorAnnouncer, setDetailsApp } = props;
-        const { t } = useTranslation("dashboard");
-        const theme = useTheme();
+        const { showErrorAnnouncer, setDetailsApp, t, theme } = props;
 
         // Extract app details. Note: dashboard-aggregator only queries the DE database.
         const app = props.content;

diff --git a/src/components/dashboard/dashboardItem/EventItem.js b/src/components/dashboard/dashboardItem/EventItem.js
@@ -13,7 +13,6 @@ import * as fns from "../functions";
 import * as constants from "../constants";
 
 import ItemBase, { ItemAction, DashboardFeedItem } from "./ItemBase";
-import { useTranslation } from "i18n";
 
 class EventItem extends ItemBase {
     constructor({ section, content, height, width }) {
@@ -28,7 +27,7 @@ class EventItem extends ItemBase {
 
     static create(props) {
         const item = new EventItem(props);
-        const { t } = useTranslation("dashboard");
+        const { t } = props;
         return item.addActions([
             <ItemAction
                 ariaLabel={t("tweetAria")}

diff --git a/src/components/dashboard/dashboardItem/InstantLaunchItems.js b/src/components/dashboard/dashboardItem/InstantLaunchItems.js
@@ -54,6 +54,10 @@ class InstantLaunchItem extends ItemBase {
                     instantLaunch={instantLaunch}
                     showErrorAnnouncer={showErrorAnnouncer}
                     computeLimitExceeded={computeLimitExceeded}
+                    style={{
+                        margin: theme.spacing(1),
+                    }}
+                    size="small"
                 />
             </ItemAction>,
 

diff --git a/src/components/dashboard/dashboardItem/NewsItem.js b/src/components/dashboard/dashboardItem/NewsItem.js
@@ -12,7 +12,6 @@ import * as fns from "../functions";
 import * as constants from "../constants";
 
 import ItemBase, { ItemAction, DashboardFeedItem } from "./ItemBase";
-import { useTranslation } from "i18n";
 
 class NewsItem extends ItemBase {
     constructor({ section, content, height, width }) {
@@ -27,7 +26,7 @@ class NewsItem extends ItemBase {
 
     static create(props) {
         const item = new NewsItem(props);
-        const { t } = useTranslation("dashboard");
+        const { t } = props;
 
         return item.addActions([
             <ItemAction

diff --git a/src/components/dashboard/dashboardItem/Tour.js b/src/components/dashboard/dashboardItem/Tour.js
@@ -64,7 +64,7 @@ export default function Tour(props) {
                         <Button
                             id={buildID(baseId, ids.TOUR_BTN)}
                             size="small"
-                            color="primary"
+                            variant="contained"
                             onClick={() => setRunTour(true)}
                         >
                             {t("startTour")}

diff --git a/src/components/dashboard/index.js b/src/components/dashboard/index.js
@@ -12,7 +12,7 @@ import clsx from "clsx";
 import { useQueryClient, useQuery, useMutation } from "react-query";
 import { useTranslation } from "i18n";
 
-import { Typography } from "@mui/material";
+import { Typography, useTheme } from "@mui/material";
 
 import { Skeleton } from "@mui/material";
 
@@ -118,6 +118,7 @@ const Dashboard = (props) => {
     const [userProfile] = useUserProfile();
     const [config] = useConfig();
     const queryClient = useQueryClient();
+    const theme = useTheme();
 
     const [resourceUsageSummary, setResourceUsageSummary] = useState(null);
     const [resourceUsageError, setResourceUsageError] = useState(null);
@@ -261,6 +262,7 @@ const Dashboard = (props) => {
               .map((section) =>
                   section.getComponent({
                       t,
+                      theme,
                       data,
                       cardWidth,
                       cardHeight,

diff --git a/src/components/data/CreateFolderDialog.js b/src/components/data/CreateFolderDialog.js
@@ -151,7 +151,7 @@ function CreateFolderDialog(props) {
                                 </Button>
                                 <Button
                                     id={buildID(baseId, ids.CREATE_BTN)}
-                                    color="primary"
+                                    variant="contained"
                                     type="submit"
                                     onClick={handleSubmit}
                                 >

diff --git a/src/components/data/MoveDialog.js b/src/components/data/MoveDialog.js
@@ -88,7 +88,7 @@ function MoveDialog(props) {
                                     </Button>
                                     <Button
                                         id={buildID(baseId, ids.MOVE_BTN)}
-                                        color="primary"
+                                        variant="contained"
                                         type="submit"
                                         onClick={handleSubmit}
                                     >

diff --git a/src/components/data/PathListAutomation.js b/src/components/data/PathListAutomation.js
@@ -459,7 +459,7 @@ export default function PathListAutomation(props) {
                                                 baseId,
                                                 ids.PATH_LIST_AUTO_DONE_BTN
                                             )}
-                                            color="primary"
+                                            variant="contained"
                                             type="submit"
                                             onClick={handleSubmit}
                                         >

diff --git a/src/components/data/RenameDialog.js b/src/components/data/RenameDialog.js
@@ -107,7 +107,7 @@ function RenameDialog(props) {
                                     </Button>
                                     <Button
                                         id={buildID(baseId, ids.RENAME_BTN)}
-                                        color="primary"
+                                        variant="contained"
                                         type="submit"
                                         onClick={handleSubmit}
                                     >

diff --git a/src/components/data/SaveAsDialog.js b/src/components/data/SaveAsDialog.js
@@ -69,7 +69,7 @@ function SaveAsDialog(props) {
                                     </Button>
                                     <Button
                                         id={buildID(baseId, ids.CREATE_BTN)}
-                                        color="primary"
+                                        variant="contained"
                                         type="submit"
                                         onClick={handleSubmit}
                                     >

diff --git a/src/components/data/SelectionDrawer.js b/src/components/data/SelectionDrawer.js
@@ -337,10 +337,12 @@ function SelectionDrawer(props) {
             onClose={onClose}
             open={open}
             anchor="right"
+            elevation={0}
             PaperProps={{
                 variant: "outlined",
                 classes: { root: classes.selectionDrawer },
             }}
+            sx={{ zIndex: "modal" }}
         >
             <div
                 style={{

diff --git a/src/components/data/listing/Listing.js b/src/components/data/listing/Listing.js
@@ -773,7 +773,7 @@ function Listing(props) {
                             {t("cancel")}
                         </Button>
                         <Button
-                            color="primary"
+                            variant="contained"
                             onClick={() => {
                                 setConfirmDOIRequestDialogOpen(false);
                                 requestDOI({

diff --git a/src/components/data/listing/TableView.js b/src/components/data/listing/TableView.js
@@ -36,6 +36,7 @@ import {
     TableBody,
     TableCell,
     TableContainer,
+    useTheme,
 } from "@mui/material";
 
 import makeStyles from "@mui/styles/makeStyles";
@@ -154,11 +155,13 @@ function TableView(props) {
         instantLaunchDefaultsMapping,
         computeLimitExceeded,
     } = props;
+
     const invalidRowClass = invalidRowStyles();
     const { t } = useTranslation("data");
     const dataRecordFields = dataFields(t);
     const tableId = buildID(baseId, ids.LISTING_TABLE);
     const trashPath = useBaseTrashPath();
+    const theme = useTheme();
 
     const [displayColumns, setDisplayColumns] = useState(
         getLocalStorageCols(rowDotMenuVisibility, dataRecordFields) ||
@@ -403,7 +406,10 @@ function TableView(props) {
                                                     resource={resource}
                                                     size="small"
                                                     color="default"
-                                                    themeSpacing={3}
+                                                    style={{
+                                                        marginLeft:
+                                                            theme.spacing(3),
+                                                    }}
                                                     computeLimitExceeded={
                                                         computeLimitExceeded
                                                     }

diff --git a/src/components/data/viewers/FileTypeSelectionDialog.js b/src/components/data/viewers/FileTypeSelectionDialog.js
@@ -50,7 +50,7 @@ export default function FileTypeSelectionDialog(props) {
                     </Button>
                     <Button
                         id={buildID(baseId, ids.CREATE_BTN)}
-                        color="primary"
+                        variant="contained"
                         onClick={() => onFileTypeSelected(type)}
                     >
                         {i18nCommon("create")}

diff --git a/src/components/data/viewers/PathListViewer.js b/src/components/data/viewers/PathListViewer.js
@@ -23,6 +23,7 @@ import Toolbar from "./Toolbar";
 import { getColumns, LINE_NUMBER_ACCESSOR } from "./utils";
 
 import DataSelectionDrawer from "components/data/SelectionDrawer";
+import { useSelectorDefaultFolderPath } from "components/data/utils";
 import PageWrapper from "components/layout/PageWrapper";
 
 import withErrorAnnouncer from "components/error/withErrorAnnouncer";
@@ -67,6 +68,7 @@ function PathListViewer(props) {
         fileName,
         data,
         editable,
+        startingPath,
     } = props;
 
     const { t } = useTranslation("data");
@@ -76,6 +78,8 @@ function PathListViewer(props) {
     const [editorData, setEditorData] = useState([]);
     const [fileSaveStatus, setFileSaveStatus] = useState();
 
+    const defaultStartingPath = useSelectorDefaultFolderPath();
+
     const columns = useMemo(
         () => getColumns(data, false, t("path")),
         [data, t]
@@ -266,6 +270,7 @@ function PathListViewer(props) {
                         }
                     }}
                     multiSelect={true}
+                    startingPath={startingPath || defaultStartingPath}
                 />
             </UploadTrackingProvider>
         </PageWrapper>

diff --git a/src/components/help/Feedback.js b/src/components/help/Feedback.js
@@ -98,7 +98,7 @@ export default function Feedback(props) {
                                     </Button>
                                     <Button
                                         type="submit"
-                                        color="primary"
+                                        variant="contained"
                                         onClick={handleSubmit}
                                     >
                                         {i18nHelp("submit_feedback")}