feat: revert back to MUI4

closes #244
drodil · Nov 25, 2024 · 31cf62f · 31cf62f
1 parent 62a4000
commit 31cf62f
Show file tree

Hide file tree

Showing 125 changed files with 1,506 additions and 1,408 deletions.
diff --git a/README.md b/README.md
@@ -41,8 +41,9 @@ using the old backend system, please use version 1.24.5.
 
 **IMPORTANT**: Migrating from 2.x to 3.x has been briefly explained in this [document](./docs/migration.md).
 
-**IMPORTANT**: From 3.10.0 forward, this plugin is using MUIv5. If you are using MUIv4, please see the migration guide
-at https://backstage.io/docs/tutorials/migrate-to-mui5/
+**IMPORTANT**: From 3.10.0 to 3.12.5 this plugin tried to use MUI5. This was reverted back to MUI4 in 3.13.0. If you have
+updated to 3.10.0 or later, please update to 3.13.0 or later to get back to MUI4. See also the
+related [issue](https://github.com/drodil/backstage-plugin-qeta/issues/244).
 
 ## Examples
 

diff --git a/plugins/qeta-react/package.json b/plugins/qeta-react/package.json
@@ -57,11 +57,9 @@
     "@backstage/plugin-permission-react": "backstage:^",
     "@backstage/plugin-signals-react": "backstage:^",
     "@drodil/backstage-plugin-qeta-common": "workspace:^",
-    "@mui/icons-material": "^5.16.7",
-    "@mui/lab": "^5.0.0-alpha.169",
-    "@mui/material": "^5.16.7",
-    "@mui/styles": "^5.16.7",
-    "@mui/system": "^5.16.7",
+    "@material-ui/core": "^4.12.2",
+    "@material-ui/icons": "^4.11.3",
+    "@material-ui/lab": "4.0.0-alpha.61",
     "dataloader": "^2.2.2",
     "dompurify": "^3.1.3",
     "file-type": "16.5.4",

diff --git a/plugins/qeta-react/src/components/AIAnswerCard/AIAnswerCard.tsx b/plugins/qeta-react/src/components/AIAnswerCard/AIAnswerCard.tsx
@@ -5,23 +5,34 @@ import {
   Post,
 } from '@drodil/backstage-plugin-qeta-common';
 import React, { useCallback } from 'react';
-import Card from '@mui/material/Card';
-import CardContent from '@mui/material/CardContent';
-import CardHeader from '@mui/material/CardHeader';
-import Collapse from '@mui/material/Collapse';
-import IconButton from '@mui/material/IconButton';
-import Tooltip from '@mui/material/Tooltip';
-import Typography from '@mui/material/Typography';
 import { MarkdownRenderer } from '../MarkdownRenderer';
 import { useAI, useTranslation } from '../../hooks';
-import FlareIcon from '@mui/icons-material/Flare';
+import FlareIcon from '@material-ui/icons/Flare';
 import useDebounce from 'react-use/lib/useDebounce';
-import Skeleton from '@mui/material/Skeleton';
 import { RelativeTimeWithTooltip } from '../RelativeTimeWithTooltip';
-import RefreshIcon from '@mui/icons-material/Refresh';
+import RefreshIcon from '@material-ui/icons/Refresh';
 import { configApiRef, useApi } from '@backstage/core-plugin-api';
-import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
-import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp';
+import KeyboardArrowDownIcon from '@material-ui/icons/KeyboardArrowDown';
+import KeyboardArrowUpIcon from '@material-ui/icons/KeyboardArrowUp';
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  Collapse,
+  IconButton,
+  makeStyles,
+  Tooltip,
+  Typography,
+} from '@material-ui/core';
+import { Skeleton } from '@material-ui/lab';
+
+const useStyles = makeStyles(theme => ({
+  root: {
+    marginTop: '1em',
+    backgroundColor: theme.palette.background.default,
+    border: `3px solid ${theme.palette.status.ok}`,
+  },
+}));
 
 export type AIAnswerCardProps = {
   question?: Post;
@@ -47,6 +58,7 @@ export const AIAnswerCard = (props: AIAnswerCardProps) => {
   const { t } = useTranslation();
   const config = useApi(configApiRef);
   const botName = config.getOptionalString('qeta.aiBotName') ?? 'AI';
+  const styles = useStyles();
 
   const {
     isAIEnabled,
@@ -126,14 +138,7 @@ export const AIAnswerCard = (props: AIAnswerCardProps) => {
   }
 
   return (
-    <Card
-      sx={theme => ({
-        marginTop: '1em',
-        backgroundColor: theme.palette.background.default,
-        border: `3px solid ${theme.palette.status.ok}`,
-      })}
-      style={style}
-    >
+    <Card style={style} className={styles.root}>
       <CardHeader
         avatar={<FlareIcon />}
         style={!expanded ? { paddingBottom: '1em' } : {}}
@@ -153,7 +158,6 @@ export const AIAnswerCard = (props: AIAnswerCardProps) => {
                     setAnswer(undefined);
                     fetchAnswer({ regenerate: true });
                   }}
-                  size="large"
                 >
                   <RefreshIcon />
                 </IconButton>
@@ -171,7 +175,6 @@ export const AIAnswerCard = (props: AIAnswerCardProps) => {
                   );
                 }}
                 aria-expanded={expanded}
-                size="large"
               >
                 {expanded ? <KeyboardArrowUpIcon /> : <KeyboardArrowDownIcon />}
               </IconButton>
@@ -189,7 +192,7 @@ export const AIAnswerCard = (props: AIAnswerCardProps) => {
       <Collapse in={expanded} timeout={0} unmountOnExit mountOnEnter>
         <CardContent>
           {answer === undefined && (
-            <Skeleton variant="rectangular" height={200} animation="wave" />
+            <Skeleton variant="rect" height={200} animation="wave" />
           )}
           {answer && <MarkdownRenderer content={answer.answer} />}
         </CardContent>

diff --git a/plugins/qeta-react/src/components/AnswerCard/AnswerCard.tsx b/plugins/qeta-react/src/components/AnswerCard/AnswerCard.tsx
@@ -1,25 +1,45 @@
-import Button from '@mui/material/Button';
-import Card from '@mui/material/Card';
-import CardContent from '@mui/material/CardContent';
-import Grid from '@mui/material/Grid';
-import Typography from '@mui/material/Typography';
 import React from 'react';
 import { VoteButtons } from '../Buttons/VoteButtons';
 import { AnswerForm } from '../AnswerForm';
 import { AuthorBox } from '../AuthorBox/AuthorBox';
 import { CommentSection } from '../CommentSection/CommentSection';
 import { LinkButton } from '../Buttons/LinkButton';
-import DeleteIcon from '@mui/icons-material/Delete';
-import EditIcon from '@mui/icons-material/Edit';
+import DeleteIcon from '@material-ui/icons/Delete';
+import EditIcon from '@material-ui/icons/Edit';
 import {
   AnswerResponse,
   PostResponse,
 } from '@drodil/backstage-plugin-qeta-common';
 import { MarkdownRenderer } from '../MarkdownRenderer';
 import { DeleteModal } from '../DeleteModal';
 import { useTranslation } from '../../hooks';
-import { VoteButtonContainer } from '../Styled/VoteButtonContainer';
-import { CardActionContainer } from '../Styled/CardActionContainer';
+import { VoteButtonContainer } from '../Utility/VoteButtonContainer';
+import {
+  Button,
+  Card,
+  CardContent,
+  Grid,
+  makeStyles,
+  Typography,
+} from '@material-ui/core';
+import { ButtonContainer } from '../Buttons';
+
+const useStyles = makeStyles(theme => ({
+  answerCard: {
+    marginTop: '1em',
+  },
+  highlight: {
+    animation: 'highlight 5s',
+  },
+  '@keyframes highlight': {
+    '0%': {
+      boxShadow: `0px 0px 0px 3px ${theme.palette.secondary.light}`,
+    },
+    '100%': {
+      boxShadow: 'none',
+    },
+  },
+}));
 
 export const AnswerCard = (props: {
   answer: AnswerResponse;
@@ -30,6 +50,7 @@ export const AnswerCard = (props: {
   const [editMode, setEditMode] = React.useState(false);
   const [answerEntity, setAnswerEntity] = React.useState(answer);
   const { t } = useTranslation();
+  const styles = useStyles();
 
   const [deleteModalOpen, setDeleteModalOpen] = React.useState(false);
   const handleDeleteModalOpen = () => setDeleteModalOpen(true);
@@ -52,18 +73,9 @@ export const AnswerCard = (props: {
     <>
       <Card
         id={`answer_${answer.id}`}
-        sx={theme => ({
-          marginTop: 3,
-          '@keyframes highlight': {
-            '0%': {
-              boxShadow: `0px 0px 0px 3px ${theme.palette.secondary.light}`,
-            },
-            '100%': {
-              boxShadow: 'none',
-            },
-          },
-          animation: highlightedAnswer ? 'highlight 5s' : 'none',
-        })}
+        className={`qetaAnswerCard ${styles.answerCard} ${
+          highlightedAnswer ? styles.highlight : ''
+        }`}
       >
         <CardContent>
           <Grid
@@ -80,8 +92,7 @@ export const AnswerCard = (props: {
             </Grid>
             <Grid
               item
-              marginLeft={1}
-              sx={{ display: 'inline-block', width: 'calc(100% - 70px)' }}
+              style={{ display: 'inline-block', width: 'calc(100% - 70px)' }}
             >
               {editMode ? (
                 <AnswerForm
@@ -91,7 +102,7 @@ export const AnswerCard = (props: {
                 />
               ) : (
                 <>
-                  <Grid item sx={{ minHeight: '3em', paddingTop: 1 }}>
+                  <Grid item style={{ minHeight: '6em', paddingTop: '0.5em' }}>
                     <Typography variant="body1" gutterBottom>
                       <MarkdownRenderer content={answerEntity.content} />
                     </Typography>
@@ -102,13 +113,12 @@ export const AnswerCard = (props: {
                     spacing={1}
                     justifyContent="space-between"
                     alignItems="flex-end"
-                    sx={{ marginTop: 3 }}
                   >
                     <Grid item style={{ alignSelf: 'flex-end' }}>
                       {(answerEntity.own ||
                         answerEntity.canDelete ||
                         answerEntity.canEdit) && (
-                        <CardActionContainer>
+                        <ButtonContainer>
                           {!answerEntity.correct &&
                             (answerEntity.own || answerEntity.canDelete) && (
                               <>
@@ -118,7 +128,6 @@ export const AnswerCard = (props: {
                                   color="secondary"
                                   onClick={handleDeleteModalOpen}
                                   startIcon={<DeleteIcon />}
-                                  sx={{ marginRight: 1 }}
                                 >
                                   {t('deleteModal.deleteButton')}
                                 </Button>
@@ -141,10 +150,10 @@ export const AnswerCard = (props: {
                               {t('questionPage.editButton')}
                             </Button>
                           )}
-                        </CardActionContainer>
+                        </ButtonContainer>
                       )}
                     </Grid>
-                    <Grid item xs={3} sx={{ padding: 0 }}>
+                    <Grid item xs={3}>
                       <AuthorBox entity={answerEntity} />
                     </Grid>
                   </Grid>

diff --git a/plugins/qeta-react/src/components/AnswerForm/AnswerForm.tsx b/plugins/qeta-react/src/components/AnswerForm/AnswerForm.tsx
@@ -1,6 +1,4 @@
 import { WarningPanel } from '@backstage/core-components';
-import Button from '@mui/material/Button';
-import Typography from '@mui/material/Typography';
 import React, { useCallback, useEffect } from 'react';
 import { configApiRef, useAnalytics, useApi } from '@backstage/core-plugin-api';
 import {
@@ -16,6 +14,7 @@ import { PostAnonymouslyCheckbox } from '../PostAnonymouslyCheckbox/PostAnonymou
 import { confirmNavigationIfEdited } from '../../utils/utils';
 import { qetaApiRef } from '../../api';
 import { useTranslation } from '../../hooks';
+import { Button, Typography } from '@material-ui/core';
 
 type AnswerFormData = {
   postId: number;
@@ -166,12 +165,7 @@ export const AnswerForm = (props: {
             label={t('anonymousCheckbox.answerAnonymously')}
           />
         )}
-        <Button
-          variant="outlined"
-          type="submit"
-          color="primary"
-          sx={{ marginBottom: 2, marginTop: 2 }}
-        >
+        <Button variant="outlined" type="submit" color="primary">
           {id
             ? t('answerForm.submit.existingAnswer')
             : t('answerForm.submit.newAnswer')}

diff --git a/plugins/qeta-react/src/components/AnswersContainer/AnswerList.tsx b/plugins/qeta-react/src/components/AnswersContainer/AnswerList.tsx
@@ -1,16 +1,17 @@
 import { Progress, WarningPanel } from '@backstage/core-components';
-import Card from '@mui/material/Card';
-import CardContent from '@mui/material/CardContent';
-import Typography from '@mui/material/Typography';
-import Divider from '@mui/material/Divider';
-import Box from '@mui/material/Box';
-import Grid from '@mui/material/Grid';
 import React, { useEffect, useRef, useState } from 'react';
 import { AnswersResponse } from '@drodil/backstage-plugin-qeta-common';
 import { AnswerListItem } from './AnswerListItem';
 import { useTranslation } from '../../hooks';
 import { QetaPagination } from '../QetaPagination/QetaPagination';
-import { SelectChangeEvent } from '@mui/material/Select';
+import {
+  Box,
+  Card,
+  CardContent,
+  Divider,
+  Grid,
+  Typography,
+} from '@material-ui/core';
 
 export const AnswerList = (props: {
   loading: boolean;
@@ -53,7 +54,9 @@ export const AnswerList = (props: {
     onPageChange(value);
   };
 
-  const handlePageSizeChange = (event: SelectChangeEvent<number>) => {
+  const handlePageSizeChange = (
+    event: React.ChangeEvent<{ value: unknown }>,
+  ) => {
     if (listRef.current) {
       listRef.current.scrollIntoView();
     }

diff --git a/plugins/qeta-react/src/components/AnswersContainer/AnswerListItem.tsx b/plugins/qeta-react/src/components/AnswersContainer/AnswerListItem.tsx
@@ -1,6 +1,3 @@
-import Typography from '@mui/material/Typography';
-import Avatar from '@mui/material/Avatar';
-import Grid from '@mui/material/Grid';
 import { Link } from '@backstage/core-components';
 import React from 'react';
 import DOMPurify from 'dompurify';
@@ -16,7 +13,8 @@ import { VoteButtons } from '../Buttons/VoteButtons';
 import { questionRouteRef, userRouteRef } from '../../routes';
 import { useTranslation } from '../../hooks';
 import { useEntityAuthor } from '../../hooks/useEntityAuthor';
-import { VoteButtonContainer } from '../Styled/VoteButtonContainer';
+import { VoteButtonContainer } from '../Utility/VoteButtonContainer';
+import { Avatar, Grid, Typography } from '@material-ui/core';
 
 export interface AnswerListItemProps {
   answer: AnswerResponse;

diff --git a/plugins/qeta-react/src/components/AnswersContainer/AnswersContainer.tsx b/plugins/qeta-react/src/components/AnswersContainer/AnswersContainer.tsx
@@ -1,11 +1,5 @@
-import Collapse from '@mui/material/Collapse';
-import Typography from '@mui/material/Typography';
-import Box from '@mui/material/Box';
-import Grid from '@mui/material/Grid';
-import Button from '@mui/material/Button';
 import React, { useEffect } from 'react';
 import useDebounce from 'react-use/lib/useDebounce';
-import FilterList from '@mui/icons-material/FilterList';
 import { useSearchParams } from 'react-router-dom';
 import { EntityRefLink } from '@backstage/plugin-catalog-react';
 import { useAnalytics } from '@backstage/core-plugin-api';
@@ -20,6 +14,8 @@ import {
 import { AnswerList } from './AnswerList';
 import { useQetaApi, useTranslation } from '../../hooks';
 import { SearchBar } from '../SearchBar/SearchBar';
+import { Box, Button, Collapse, Grid, Typography } from '@material-ui/core';
+import FilterList from '@material-ui/icons/FilterList';
 
 export interface AnswersContainerProps {
   tags?: string[];