Merge pull request #237 from drodil/mui5

chore: migrate to MUI5

plugins/qeta-react/package.json

@@ -57,9 +57,10 @@
     "@backstage/plugin-permission-react": "backstage:^",
     "@backstage/plugin-signals-react": "backstage:^",
     "@drodil/backstage-plugin-qeta-common": "workspace:^",
-    "@material-ui/core": "^4.12.2",
-    "@material-ui/icons": "^4.11.3",
-    "@material-ui/lab": "4.0.0-alpha.61",
+    "@mui/icons-material": "^5.15.14",
+    "@mui/lab": "^5.0.0-alpha.169",
+    "@mui/material": "^5.16.7",
+    "@mui/styles": "^5.16.7",
     "dataloader": "^2.2.2",
     "dompurify": "^3.1.3",
     "file-type": "16.5.4",

plugins/qeta-react/src/components/AIAnswerCard/AIAnswerCard.tsx

@@ -5,33 +5,30 @@ import {
   Post,
 } from '@drodil/backstage-plugin-qeta-common';
 import React, { useCallback } from 'react';
-import {
-  Card,
-  CardContent,
-  CardHeader,
-  Collapse,
-  createStyles,
-  IconButton,
-  makeStyles,
-  Theme,
-  Tooltip,
-  Typography,
-} from '@material-ui/core';
+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 '@material-ui/icons/Flare';
+import FlareIcon from '@mui/icons-material/Flare';
 import useDebounce from 'react-use/lib/useDebounce';
-import { Skeleton } from '@material-ui/lab';
+import Skeleton from '@mui/material/Skeleton';
 import { RelativeTimeWithTooltip } from '../RelativeTimeWithTooltip';
-import RefreshIcon from '@material-ui/icons/Refresh';
+import RefreshIcon from '@mui/icons-material/Refresh';
 import { configApiRef, useApi } from '@backstage/core-plugin-api';
-import KeyboardArrowDownIcon from '@material-ui/icons/KeyboardArrowDown';
-import KeyboardArrowUpIcon from '@material-ui/icons/KeyboardArrowUp';
+import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
+import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp';
+import makeStyles from '@mui/styles/makeStyles';
+import createStyles from '@mui/styles/createStyles';
 
 export type QetaAIAnswerCardClassKey = 'card';
 
 const useStyles = makeStyles(
-  (theme: Theme) =>
+  theme =>
     createStyles({
       card: {
         marginTop: theme.spacing(3),
@@ -167,6 +164,7 @@ export const AIAnswerCard = (props: AIAnswerCardProps) => {
                     setAnswer(undefined);
                     fetchAnswer({ regenerate: true });
                   }}
+                  size="large"
                 >
                   <RefreshIcon />
                 </IconButton>
@@ -184,6 +182,7 @@ export const AIAnswerCard = (props: AIAnswerCardProps) => {
                   );
                 }}
                 aria-expanded={expanded}
+                size="large"
               >
                 {expanded ? <KeyboardArrowUpIcon /> : <KeyboardArrowDownIcon />}
               </IconButton>
@@ -201,7 +200,7 @@ export const AIAnswerCard = (props: AIAnswerCardProps) => {
       <Collapse in={expanded} timeout={0} unmountOnExit mountOnEnter>
         <CardContent>
           {answer === undefined && (
-            <Skeleton variant="rect" height={200} animation="wave" />
+            <Skeleton variant="rectangular" height={200} animation="wave" />
           )}
           {answer && (
             <MarkdownRenderer

plugins/qeta-react/src/components/AnswerCard/AnswerCard.tsx

@@ -1,19 +1,17 @@
-import {
-  Box,
-  Button,
-  Card,
-  CardContent,
-  Grid,
-  Typography,
-} from '@material-ui/core';
+import Box from '@mui/material/Box';
+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 '@material-ui/icons/Delete';
-import EditIcon from '@material-ui/icons/Edit';
+import DeleteIcon from '@mui/icons-material/Delete';
+import EditIcon from '@mui/icons-material/Edit';
 import {
   AnswerResponse,
   PostResponse,
@@ -61,7 +59,7 @@ export const AnswerCard = (props: {
         <CardContent>
           <Grid
             container
-            spacing={0}
+            spacing={2}
             justifyContent="flex-start"
             style={{ flexWrap: 'nowrap' }}
           >

plugins/qeta-react/src/components/AnswerForm/AnswerForm.tsx

@@ -1,5 +1,6 @@
 import { WarningPanel } from '@backstage/core-components';
-import { Button, Typography } from '@material-ui/core';
+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 {

plugins/qeta-react/src/components/AnswersContainer/AnswerList.tsx

@@ -1,17 +1,16 @@
 import { Progress, WarningPanel } from '@backstage/core-components';
-import {
-  Box,
-  Card,
-  CardContent,
-  Divider,
-  Grid,
-  Typography,
-} from '@material-ui/core';
+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';
 
 export const AnswerList = (props: {
   loading: boolean;
@@ -54,9 +53,7 @@ export const AnswerList = (props: {
     onPageChange(value);
   };
 
-  const handlePageSizeChange = (
-    event: React.ChangeEvent<{ value: unknown }>,
-  ) => {
+  const handlePageSizeChange = (event: SelectChangeEvent<number>) => {
     if (listRef.current) {
       listRef.current.scrollIntoView();
     }

plugins/qeta-react/src/components/AnswersContainer/AnswerListItem.tsx

@@ -1,4 +1,6 @@
-import { Avatar, Grid, Typography } from '@material-ui/core';
+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';

plugins/qeta-react/src/components/AnswersContainer/AnswersContainer.tsx

@@ -1,14 +1,12 @@
-import {
-  Box,
-  Button,
-  Collapse,
-  Grid,
-  TextField,
-  Typography,
-} from '@material-ui/core';
+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 TextField from '@mui/material/TextField';
 import React, { useEffect } from 'react';
 import useDebounce from 'react-use/lib/useDebounce';
-import FilterList from '@material-ui/icons/FilterList';
+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';

plugins/qeta-react/src/components/ArticleContent/ArticleButtons.tsx

@@ -1,21 +1,19 @@
 import { PostResponse } from '@drodil/backstage-plugin-qeta-common';
 import React from 'react';
-import ArrowUpward from '@material-ui/icons/ArrowUpward';
-import {
-  Grid,
-  IconButton,
-  makeStyles,
-  Tooltip,
-  Typography,
-} from '@material-ui/core';
-import ArrowDownward from '@material-ui/icons/ArrowDownward';
+import ArrowUpward from '@mui/icons-material/ArrowUpward';
+import IconButton from '@mui/material/IconButton';
+import Tooltip from '@mui/material/Tooltip';
+import Typography from '@mui/material/Typography';
+import Grid from '@mui/material/Grid';
+import makeStyles from '@mui/styles/makeStyles';
+import ArrowDownward from '@mui/icons-material/ArrowDownward';
 import { FavoriteButton } from '../Buttons/FavoriteButton';
 import { LinkButton } from '../Buttons/LinkButton';
 import { useRouteRef } from '@backstage/core-plugin-api';
 import { editArticleRouteRef } from '../../routes';
-import DeleteIcon from '@material-ui/icons/Delete';
+import DeleteIcon from '@mui/icons-material/Delete';
 import { DeleteModal } from '../DeleteModal';
-import EditIcon from '@material-ui/icons/Edit';
+import EditIcon from '@mui/icons-material/Edit';
 import { useVoting } from '../../hooks/useVoting';
 import { useStyles, useTranslation } from '../../hooks';
 

plugins/qeta-react/src/components/ArticleContent/ArticleContent.tsx

@@ -2,7 +2,10 @@ import {
   AnswerResponse,
   PostResponse,
 } from '@drodil/backstage-plugin-qeta-common';
-import { Avatar, Grid, makeStyles, Typography } from '@material-ui/core';
+import Typography from '@mui/material/Typography';
+import Avatar from '@mui/material/Avatar';
+import Grid from '@mui/material/Grid';
+import makeStyles from '@mui/styles/makeStyles';
 import { MarkdownRenderer } from '../MarkdownRenderer';
 import React from 'react';
 import { RelativeTimeWithTooltip } from '../RelativeTimeWithTooltip';

plugins/qeta-react/src/components/AuthorBox/AuthorBox.tsx

@@ -1,4 +1,8 @@
-import { Avatar, Box, Grid, makeStyles, Typography } from '@material-ui/core';
+import Typography from '@mui/material/Typography';
+import Box from '@mui/material/Box';
+import Avatar from '@mui/material/Avatar';
+import Grid from '@mui/material/Grid';
+import makeStyles from '@mui/styles/makeStyles';
 import React from 'react';
 import {
   AnswerResponse,

plugins/qeta-react/src/components/Buttons/AddToCollectionButton.tsx

@@ -1,16 +1,14 @@
 import { Collection, PostResponse } from '@drodil/backstage-plugin-qeta-common';
 import React from 'react';
-import {
-  Button,
-  Dialog,
-  DialogActions,
-  DialogContent,
-  DialogTitle,
-  Grid,
-} from '@material-ui/core';
-import AddCircle from '@material-ui/icons/AddCircle';
-import RemoveCircle from '@material-ui/icons/RemoveCircle';
-import PlayListAddIcon from '@material-ui/icons/PlaylistAdd';
+import Grid from '@mui/material/Grid';
+import Button from '@mui/material/Button';
+import Dialog from '@mui/material/Dialog';
+import DialogActions from '@mui/material/DialogActions';
+import DialogContent from '@mui/material/DialogContent';
+import DialogTitle from '@mui/material/DialogTitle';
+import AddCircle from '@mui/icons-material/AddCircle';
+import RemoveCircle from '@mui/icons-material/RemoveCircle';
+import PlayListAddIcon from '@mui/icons-material/PlaylistAdd';
 import { useApi } from '@backstage/core-plugin-api';
 import { qetaApiRef } from '../../api';
 import { useQetaApi, useStyles, useTranslation } from '../../hooks';

plugins/qeta-react/src/components/Buttons/AskQuestionButton.tsx

@@ -1,4 +1,4 @@
-import HelpOutline from '@material-ui/icons/HelpOutline';
+import HelpOutline from '@mui/icons-material/HelpOutline';
 import React from 'react';
 import { RequirePermission } from '@backstage/plugin-permission-react';
 import { qetaCreatePostPermission } from '@drodil/backstage-plugin-qeta-common';

plugins/qeta-react/src/components/Buttons/CollectionFollowButton.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
-import { IconButton, Tooltip } from '@material-ui/core';
-import Visibility from '@material-ui/icons/Visibility';
-import VisibilityOff from '@material-ui/icons/VisibilityOff';
+import IconButton from '@mui/material/IconButton';
+import Tooltip from '@mui/material/Tooltip';
+import Visibility from '@mui/icons-material/Visibility';
+import VisibilityOff from '@mui/icons-material/VisibilityOff';
 import { useStyles, useTranslation } from '../../hooks';
 import { Collection } from '@drodil/backstage-plugin-qeta-common';
 import { useCollectionsFollow } from '../../hooks/useCollectionsFollow';

plugins/qeta-react/src/components/Buttons/CreateCollectionButton.tsx

@@ -1,4 +1,4 @@
-import PlayListAddIcon from '@material-ui/icons/PlaylistAdd';
+import PlayListAddIcon from '@mui/icons-material/PlaylistAdd';
 import React from 'react';
 import { RequirePermission } from '@backstage/plugin-permission-react';
 import { qetaCreatePostPermission } from '@drodil/backstage-plugin-qeta-common';

plugins/qeta-react/src/components/Buttons/EntityFollowButton.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
-import { IconButton, Tooltip } from '@material-ui/core';
-import Visibility from '@material-ui/icons/Visibility';
-import VisibilityOff from '@material-ui/icons/VisibilityOff';
+import IconButton from '@mui/material/IconButton';
+import Tooltip from '@mui/material/Tooltip';
+import Visibility from '@mui/icons-material/Visibility';
+import VisibilityOff from '@mui/icons-material/VisibilityOff';
 import { useEntityFollow, useStyles, useTranslation } from '../../hooks';
 
 export const EntityFollowButton = (props: { entityRef: string }) => {

plugins/qeta-react/src/components/Buttons/FavoriteButton.tsx

@@ -1,9 +1,10 @@
 import { PostResponse } from '@drodil/backstage-plugin-qeta-common';
-import { IconButton, Tooltip } from '@material-ui/core';
+import IconButton from '@mui/material/IconButton';
+import Tooltip from '@mui/material/Tooltip';
 import React from 'react';
 import { useApi } from '@backstage/core-plugin-api';
-import StarIcon from '@material-ui/icons/Star';
-import StarOutlineIcon from '@material-ui/icons/StarOutline';
+import StarIcon from '@mui/icons-material/Star';
+import StarOutlineIcon from '@mui/icons-material/StarOutline';
 import { qetaApiRef } from '../../api';
 import { useTranslation } from '../../hooks';
 

plugins/qeta-react/src/components/Buttons/LinkButton.tsx

@@ -1,5 +1,6 @@
-import { IconButton, Tooltip } from '@material-ui/core';
-import Link from '@material-ui/icons/Link';
+import IconButton from '@mui/material/IconButton';
+import Tooltip from '@mui/material/Tooltip';
+import Link from '@mui/icons-material/Link';
 import React from 'react';
 import {
   AnswerResponse,

plugins/qeta-react/src/components/Buttons/TagFollowButton.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
-import { IconButton, Tooltip } from '@material-ui/core';
-import Visibility from '@material-ui/icons/Visibility';
-import VisibilityOff from '@material-ui/icons/VisibilityOff';
+import IconButton from '@mui/material/IconButton';
+import Tooltip from '@mui/material/Tooltip';
+import Visibility from '@mui/icons-material/Visibility';
+import VisibilityOff from '@mui/icons-material/VisibilityOff';
 import { useStyles, useTagsFollow, useTranslation } from '../../hooks';
 
 export const TagFollowButton = (props: { tag: string }) => {

plugins/qeta-react/src/components/Buttons/UserFollowButton.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
-import { IconButton, Tooltip } from '@material-ui/core';
-import Visibility from '@material-ui/icons/Visibility';
-import VisibilityOff from '@material-ui/icons/VisibilityOff';
+import IconButton from '@mui/material/IconButton';
+import Tooltip from '@mui/material/Tooltip';
+import Visibility from '@mui/icons-material/Visibility';
+import VisibilityOff from '@mui/icons-material/VisibilityOff';
 import { useStyles, useTranslation, useUserFollow } from '../../hooks';
 
 export const UserFollowButton = (props: { userRef: string }) => {

plugins/qeta-react/src/components/Buttons/VoteButtons.tsx

@@ -2,18 +2,15 @@ import {
   AnswerResponse,
   PostResponse,
 } from '@drodil/backstage-plugin-qeta-common';
-import {
-  Box,
-  createStyles,
-  IconButton,
-  makeStyles,
-  Theme,
-  Tooltip,
-  Typography,
-} from '@material-ui/core';
-import ArrowDownward from '@material-ui/icons/ArrowDownward';
-import ArrowUpward from '@material-ui/icons/ArrowUpward';
-import Check from '@material-ui/icons/Check';
+import IconButton from '@mui/material/IconButton';
+import Tooltip from '@mui/material/Tooltip';
+import Typography from '@mui/material/Typography';
+import Box from '@mui/material/Box';
+import createStyles from '@mui/styles/createStyles';
+import makeStyles from '@mui/styles/makeStyles';
+import ArrowDownward from '@mui/icons-material/ArrowDownward';
+import ArrowUpward from '@mui/icons-material/ArrowUpward';
+import Check from '@mui/icons-material/Check';
 import React from 'react';
 import { useVoting } from '../../hooks/useVoting';
 
@@ -23,7 +20,7 @@ export type QetaVoteButtonsClassKey =
   | 'voteButtonContainer';
 
 const useStyles = makeStyles(
-  (theme: Theme) =>
+  theme =>
     createStyles({
       qetaCorrectAnswerSelected: {
         color: theme.palette.success.main,