diff --git a/plugins/qeta-react/package.json b/plugins/qeta-react/package.json index caaba283..3a9066b1 100644 --- a/plugins/qeta-react/package.json +++ b/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", diff --git a/plugins/qeta-react/src/components/AIAnswerCard/AIAnswerCard.tsx b/plugins/qeta-react/src/components/AIAnswerCard/AIAnswerCard.tsx index 240cda8d..a4a15468 100644 --- a/plugins/qeta-react/src/components/AIAnswerCard/AIAnswerCard.tsx +++ b/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" > @@ -184,6 +182,7 @@ export const AIAnswerCard = (props: AIAnswerCardProps) => { ); }} aria-expanded={expanded} + size="large" > {expanded ? : } @@ -201,7 +200,7 @@ export const AIAnswerCard = (props: AIAnswerCardProps) => { {answer === undefined && ( - + )} {answer && ( diff --git a/plugins/qeta-react/src/components/AnswerForm/AnswerForm.tsx b/plugins/qeta-react/src/components/AnswerForm/AnswerForm.tsx index 89ea5322..7708146b 100644 --- a/plugins/qeta-react/src/components/AnswerForm/AnswerForm.tsx +++ b/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 { diff --git a/plugins/qeta-react/src/components/AnswersContainer/AnswerList.tsx b/plugins/qeta-react/src/components/AnswersContainer/AnswerList.tsx index 098fac0e..3aba5f0e 100644 --- a/plugins/qeta-react/src/components/AnswersContainer/AnswerList.tsx +++ b/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) => { 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 index 7e8365b5..b4da2860 100644 --- a/plugins/qeta-react/src/components/AnswersContainer/AnswerListItem.tsx +++ b/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'; diff --git a/plugins/qeta-react/src/components/AnswersContainer/AnswersContainer.tsx b/plugins/qeta-react/src/components/AnswersContainer/AnswersContainer.tsx index 23c1e589..9ab71120 100644 --- a/plugins/qeta-react/src/components/AnswersContainer/AnswersContainer.tsx +++ b/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'; diff --git a/plugins/qeta-react/src/components/ArticleContent/ArticleButtons.tsx b/plugins/qeta-react/src/components/ArticleContent/ArticleButtons.tsx index 730ef706..744ec959 100644 --- a/plugins/qeta-react/src/components/ArticleContent/ArticleButtons.tsx +++ b/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'; diff --git a/plugins/qeta-react/src/components/ArticleContent/ArticleContent.tsx b/plugins/qeta-react/src/components/ArticleContent/ArticleContent.tsx index 14a8b440..5babe1af 100644 --- a/plugins/qeta-react/src/components/ArticleContent/ArticleContent.tsx +++ b/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'; diff --git a/plugins/qeta-react/src/components/AuthorBox/AuthorBox.tsx b/plugins/qeta-react/src/components/AuthorBox/AuthorBox.tsx index c12de7b6..41c08a2c 100644 --- a/plugins/qeta-react/src/components/AuthorBox/AuthorBox.tsx +++ b/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, diff --git a/plugins/qeta-react/src/components/Buttons/AddToCollectionButton.tsx b/plugins/qeta-react/src/components/Buttons/AddToCollectionButton.tsx index 02d1b247..1dee18f9 100644 --- a/plugins/qeta-react/src/components/Buttons/AddToCollectionButton.tsx +++ b/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'; diff --git a/plugins/qeta-react/src/components/Buttons/AskQuestionButton.tsx b/plugins/qeta-react/src/components/Buttons/AskQuestionButton.tsx index e43748bc..672e38be 100644 --- a/plugins/qeta-react/src/components/Buttons/AskQuestionButton.tsx +++ b/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'; diff --git a/plugins/qeta-react/src/components/Buttons/CollectionFollowButton.tsx b/plugins/qeta-react/src/components/Buttons/CollectionFollowButton.tsx index a60b48cd..58aef083 100644 --- a/plugins/qeta-react/src/components/Buttons/CollectionFollowButton.tsx +++ b/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'; diff --git a/plugins/qeta-react/src/components/Buttons/CreateCollectionButton.tsx b/plugins/qeta-react/src/components/Buttons/CreateCollectionButton.tsx index e68580bb..073ba480 100644 --- a/plugins/qeta-react/src/components/Buttons/CreateCollectionButton.tsx +++ b/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'; diff --git a/plugins/qeta-react/src/components/Buttons/EntityFollowButton.tsx b/plugins/qeta-react/src/components/Buttons/EntityFollowButton.tsx index 2914727e..0dfd014d 100644 --- a/plugins/qeta-react/src/components/Buttons/EntityFollowButton.tsx +++ b/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 }) => { diff --git a/plugins/qeta-react/src/components/Buttons/FavoriteButton.tsx b/plugins/qeta-react/src/components/Buttons/FavoriteButton.tsx index 5324b6cf..7818dbd0 100644 --- a/plugins/qeta-react/src/components/Buttons/FavoriteButton.tsx +++ b/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'; diff --git a/plugins/qeta-react/src/components/Buttons/LinkButton.tsx b/plugins/qeta-react/src/components/Buttons/LinkButton.tsx index 5bd9e5f7..9a450e79 100644 --- a/plugins/qeta-react/src/components/Buttons/LinkButton.tsx +++ b/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, diff --git a/plugins/qeta-react/src/components/Buttons/TagFollowButton.tsx b/plugins/qeta-react/src/components/Buttons/TagFollowButton.tsx index bd6845bd..07d66360 100644 --- a/plugins/qeta-react/src/components/Buttons/TagFollowButton.tsx +++ b/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 }) => { diff --git a/plugins/qeta-react/src/components/Buttons/UserFollowButton.tsx b/plugins/qeta-react/src/components/Buttons/UserFollowButton.tsx index 98188a14..84515d6b 100644 --- a/plugins/qeta-react/src/components/Buttons/UserFollowButton.tsx +++ b/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 }) => { diff --git a/plugins/qeta-react/src/components/Buttons/VoteButtons.tsx b/plugins/qeta-react/src/components/Buttons/VoteButtons.tsx index d7ba0dd7..8718eec1 100644 --- a/plugins/qeta-react/src/components/Buttons/VoteButtons.tsx +++ b/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, diff --git a/plugins/qeta-react/src/components/Buttons/WriteArticleButton.tsx b/plugins/qeta-react/src/components/Buttons/WriteArticleButton.tsx index 97b66e66..60d20065 100644 --- a/plugins/qeta-react/src/components/Buttons/WriteArticleButton.tsx +++ b/plugins/qeta-react/src/components/Buttons/WriteArticleButton.tsx @@ -1,4 +1,4 @@ -import CreateIcon from '@material-ui/icons/Create'; +import CreateIcon from '@mui/icons-material/Create'; import React from 'react'; import { RequirePermission } from '@backstage/plugin-permission-react'; import { qetaCreatePostPermission } from '@drodil/backstage-plugin-qeta-common'; diff --git a/plugins/qeta-react/src/components/CollectionCard/CollectionCard.tsx b/plugins/qeta-react/src/components/CollectionCard/CollectionCard.tsx index 219e0d63..e184f904 100644 --- a/plugins/qeta-react/src/components/CollectionCard/CollectionCard.tsx +++ b/plugins/qeta-react/src/components/CollectionCard/CollectionCard.tsx @@ -1,12 +1,15 @@ import { Collection } from '@drodil/backstage-plugin-qeta-common'; import { InfoCard } from '@backstage/core-components'; -import { Button, CardContent, CardMedia, Grid } from '@material-ui/core'; +import CardContent from '@mui/material/CardContent'; +import Grid from '@mui/material/Grid'; +import Button from '@mui/material/Button'; +import CardMedia from '@mui/material/CardMedia'; import { MarkdownRenderer } from '../MarkdownRenderer'; import React from 'react'; import { TagsAndEntities } from '../TagsAndEntities/TagsAndEntities'; -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 { useRouteRef } from '@backstage/core-plugin-api'; import { collectionEditRouteRef } from '../../routes'; import { useStyles, useTranslation } from '../../hooks'; diff --git a/plugins/qeta-react/src/components/CollectionForm/CollectionForm.tsx b/plugins/qeta-react/src/components/CollectionForm/CollectionForm.tsx index ad16522a..e7b2cc79 100644 --- a/plugins/qeta-react/src/components/CollectionForm/CollectionForm.tsx +++ b/plugins/qeta-react/src/components/CollectionForm/CollectionForm.tsx @@ -4,16 +4,14 @@ import { useApi, useRouteRef, } from '@backstage/core-plugin-api'; -import { - Button, - FormControl, - FormHelperText, - Grid, - MenuItem, - Select, - TextField, -} from '@material-ui/core'; -import { Alert } from '@material-ui/lab'; +import Grid from '@mui/material/Grid'; +import Button from '@mui/material/Button'; +import TextField from '@mui/material/TextField'; +import Alert from '@mui/material/Alert'; +import FormControl from '@mui/material/FormControl'; +import FormHelperText from '@mui/material/FormHelperText'; +import Select from '@mui/material/Select'; +import MenuItem from '@mui/material/MenuItem'; import React, { useCallback, useEffect } from 'react'; import { Controller, useForm } from 'react-hook-form'; import { useNavigate } from 'react-router-dom'; diff --git a/plugins/qeta-react/src/components/CollectionsGrid/CollectionsGrid.tsx b/plugins/qeta-react/src/components/CollectionsGrid/CollectionsGrid.tsx index c80ad8fb..807e2fe1 100644 --- a/plugins/qeta-react/src/components/CollectionsGrid/CollectionsGrid.tsx +++ b/plugins/qeta-react/src/components/CollectionsGrid/CollectionsGrid.tsx @@ -1,19 +1,17 @@ import React, { useEffect } from 'react'; -import { - Box, - Button, - Collapse, - Grid, - IconButton, - TextField, - Typography, -} from '@material-ui/core'; +import Collapse from '@mui/material/Collapse'; +import IconButton from '@mui/material/IconButton'; +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 { CollectionsGridContent } from './CollectionsGridContent'; import { useQetaApi, useTranslation } from '../../hooks'; import useDebounce from 'react-use/lib/useDebounce'; import { QetaPagination } from '../QetaPagination/QetaPagination'; import { CollectionFilters, FilterPanel } from '../FilterPanel/FilterPanel'; -import FilterList from '@material-ui/icons/FilterList'; +import FilterList from '@mui/icons-material/FilterList'; import { getFiltersWithDateRange } from '../../utils'; export type CollectionsGridProps = { @@ -111,7 +109,7 @@ export const CollectionsGrid = (props: CollectionsGridProps) => { placeholder={t('collectionsPage.search.placeholder')} size="small" /> - + diff --git a/plugins/qeta-react/src/components/CollectionsGrid/CollectionsGridContent.tsx b/plugins/qeta-react/src/components/CollectionsGrid/CollectionsGridContent.tsx index ee0a6842..53ee77c8 100644 --- a/plugins/qeta-react/src/components/CollectionsGrid/CollectionsGridContent.tsx +++ b/plugins/qeta-react/src/components/CollectionsGrid/CollectionsGridContent.tsx @@ -1,7 +1,7 @@ import { CollectionsResponse } from '@drodil/backstage-plugin-qeta-common'; import React, { useEffect, useState } from 'react'; import { WarningPanel } from '@backstage/core-components'; -import { Grid } from '@material-ui/core'; +import Grid from '@mui/material/Grid'; import { CollectionsGridItem } from './CollectionsGridItem'; import { useTranslation } from '../../hooks'; import { LoadingGrid } from '../LoadingGrid/LoadingGrid'; diff --git a/plugins/qeta-react/src/components/CollectionsGrid/CollectionsGridItem.tsx b/plugins/qeta-react/src/components/CollectionsGrid/CollectionsGridItem.tsx index fa9e7bea..99f17d07 100644 --- a/plugins/qeta-react/src/components/CollectionsGrid/CollectionsGridItem.tsx +++ b/plugins/qeta-react/src/components/CollectionsGrid/CollectionsGridItem.tsx @@ -6,16 +6,14 @@ import { import React from 'react'; import { useRouteRef } from '@backstage/core-plugin-api'; import { collectionRouteRef } from '../../routes'; -import { - Button, - Card, - CardActionArea, - CardContent, - CardMedia, - Grid, - Tooltip, - Typography, -} from '@material-ui/core'; +import Card from '@mui/material/Card'; +import CardContent from '@mui/material/CardContent'; +import CardActionArea from '@mui/material/CardActionArea'; +import Tooltip from '@mui/material/Tooltip'; +import Typography from '@mui/material/Typography'; +import Grid from '@mui/material/Grid'; +import Button from '@mui/material/Button'; +import CardMedia from '@mui/material/CardMedia'; import DOMPurify from 'dompurify'; import { useNavigate } from 'react-router-dom'; import { TagsAndEntities } from '../TagsAndEntities/TagsAndEntities'; diff --git a/plugins/qeta-react/src/components/CollectionsGrid/NoCollectionsCard.tsx b/plugins/qeta-react/src/components/CollectionsGrid/NoCollectionsCard.tsx index c677096a..63413618 100644 --- a/plugins/qeta-react/src/components/CollectionsGrid/NoCollectionsCard.tsx +++ b/plugins/qeta-react/src/components/CollectionsGrid/NoCollectionsCard.tsx @@ -1,4 +1,7 @@ -import { Card, CardContent, 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 Grid from '@mui/material/Grid'; import React from 'react'; import { useTranslation } from '../../hooks'; diff --git a/plugins/qeta-react/src/components/CommentSection/CommentList.tsx b/plugins/qeta-react/src/components/CommentSection/CommentList.tsx index d3fa3f98..f50472bf 100644 --- a/plugins/qeta-react/src/components/CommentSection/CommentList.tsx +++ b/plugins/qeta-react/src/components/CommentSection/CommentList.tsx @@ -2,7 +2,10 @@ import { AnswerResponse, PostResponse, } from '@drodil/backstage-plugin-qeta-common'; -import { Box, Divider, makeStyles, Typography } from '@material-ui/core'; +import Typography from '@mui/material/Typography'; +import Divider from '@mui/material/Divider'; +import Box from '@mui/material/Box'; +import makeStyles from '@mui/styles/makeStyles'; import React from 'react'; import { Link } from '@backstage/core-components'; import { useApi } from '@backstage/core-plugin-api'; diff --git a/plugins/qeta-react/src/components/CommentSection/CommentSection.tsx b/plugins/qeta-react/src/components/CommentSection/CommentSection.tsx index c991ca7d..1c2b8f3c 100644 --- a/plugins/qeta-react/src/components/CommentSection/CommentSection.tsx +++ b/plugins/qeta-react/src/components/CommentSection/CommentSection.tsx @@ -1,6 +1,8 @@ /* eslint-disable jsx-a11y/no-autofocus */ import React, { useEffect, useState } from 'react'; -import { Box, Button, Grid } from '@material-ui/core'; +import Box from '@mui/material/Box'; +import Grid from '@mui/material/Grid'; +import Button from '@mui/material/Button'; import { AnswerResponse, PostResponse, @@ -14,7 +16,7 @@ import { confirmNavigationIfEdited } from '../../utils/utils'; import { RequirePermission } from '@backstage/plugin-permission-react'; import { MarkdownEditor } from '../MarkdownEditor/MarkdownEditor'; import { useTranslation } from '../../hooks'; -import AddCommentIcon from '@material-ui/icons/AddComment'; +import AddCommentIcon from '@mui/icons-material/AddComment'; export const CommentSection = (props: { onCommentPost: (question: PostResponse, answer?: AnswerResponse) => void; diff --git a/plugins/qeta-react/src/components/DeleteModal/DeleteModal.tsx b/plugins/qeta-react/src/components/DeleteModal/DeleteModal.tsx index 385447a7..391a5a68 100644 --- a/plugins/qeta-react/src/components/DeleteModal/DeleteModal.tsx +++ b/plugins/qeta-react/src/components/DeleteModal/DeleteModal.tsx @@ -3,9 +3,13 @@ import { CollectionResponse, PostResponse, } from '@drodil/backstage-plugin-qeta-common'; -import { Backdrop, Box, Button, Modal, Typography } from '@material-ui/core'; -import { Alert } from '@material-ui/lab'; -import Delete from '@material-ui/icons/Delete'; +import Typography from '@mui/material/Typography'; +import Box from '@mui/material/Box'; +import Button from '@mui/material/Button'; +import Alert from '@mui/material/Alert'; +import Delete from '@mui/icons-material/Delete'; +import Modal from '@mui/material/Modal'; +import Backdrop from '@mui/material/Backdrop'; import React from 'react'; import { useApi } from '@backstage/core-plugin-api'; import { useNavigate } from 'react-router-dom'; @@ -84,10 +88,7 @@ export const DeleteModal = (props: { aria-labelledby="modal-modal-title" aria-describedby="modal-modal-description" closeAfterTransition - BackdropComponent={Backdrop} - BackdropProps={{ - timeout: 500, - }} + slots={{ backdrop: Backdrop }} > {error && ( diff --git a/plugins/qeta-react/src/components/EntitiesGrid/EntitiesGrid.tsx b/plugins/qeta-react/src/components/EntitiesGrid/EntitiesGrid.tsx index d1cace42..28629400 100644 --- a/plugins/qeta-react/src/components/EntitiesGrid/EntitiesGrid.tsx +++ b/plugins/qeta-react/src/components/EntitiesGrid/EntitiesGrid.tsx @@ -1,4 +1,6 @@ -import { Grid, IconButton, TextField } from '@material-ui/core'; +import IconButton from '@mui/material/IconButton'; +import Grid from '@mui/material/Grid'; +import TextField from '@mui/material/TextField'; import React, { useEffect } from 'react'; import { useQetaApi, useTranslation } from '../../hooks'; import useDebounce from 'react-use/lib/useDebounce'; @@ -71,7 +73,7 @@ export const EntitiesGrid = () => { placeholder={t('entitiesPage.search.placeholder')} size="small" /> - + void; + onChange: (value: string | string[]) => void; } type DateRangeValidation = { @@ -27,16 +23,12 @@ export const DateRangeFilter = (props: DateRangeFilterProps) => { value, ); const { t } = useTranslation(); - const [fromDate, setFromDate] = useState(''); - const [toDate, setToDate] = useState(''); + const localDate = formatDate(new Date()); + const [fromDate, setFromDate] = useState(localDate); + const [toDate, setToDate] = useState(localDate); const [validation, setValidation] = useState({ isValid: true, }); - const isSmallScreen = useMediaQuery(theme => - theme.breakpoints.down('sm'), - ); - - const localDate = formatDate(new Date()); useEffect(() => { setDateRangeOption(value || ''); @@ -47,55 +39,55 @@ export const DateRangeFilter = (props: DateRangeFilterProps) => { } }, [value]); - useEffect(() => { - if (dateRangeOption && dateRangeOption !== 'custom') { - setFromDate(''); - setToDate(''); - onChange( - 'dateRange', - !dateRangeOption || dateRangeOption === 'select' ? '' : dateRangeOption, - ); + const handleCustom = (from?: string, to?: string) => { + const startDate = new Date(from ?? fromDate); + const endDate = new Date(to ?? toDate); + if (startDate <= endDate) { + setValidation({ isValid: true }); + onChange(`${formatDate(startDate)}--${formatDate(endDate)}`); + } else { + setValidation({ + isValid: false, + message: t('datePicker.invalidRange'), + }); } - }, [dateRangeOption, onChange]); - - useEffect(() => { - if (fromDate && toDate) { - const startDate = new Date(fromDate); - const endDate = new Date(toDate); - if (startDate <= endDate) { - setValidation({ isValid: true }); - onChange('dateRange', `${fromDate}--${toDate}`); - } else { - setValidation({ - isValid: false, - message: t('datePicker.invalidRange'), - }); - } - } - }, [t, fromDate, toDate, onChange]); + }; return ( - - { - setDateRangeOption(_e.target.value); - }} - variant="outlined" - defaultValue="None" - > - {t('datePicker.range.default')} - {t('datePicker.range.last7days')} - {t('datePicker.range.last30days')} - {t('datePicker.range.custom')} - + + {validation.message && ( + + + {validation.message} + + + )} + + { + if (e.target.value !== 'custom') { + onChange(e.target.value === 'select' ? '' : e.target.value); + } + setDateRangeOption(e.target.value); + }} + variant="outlined" + defaultValue="select" + > + {t('datePicker.range.default')} + {t('datePicker.range.last7days')} + + {t('datePicker.range.last30days')} + + {t('datePicker.range.custom')} + + {dateRangeOption === 'custom' && ( - - + <> + { className={styles.dateFilter} InputLabelProps={{ shrink: true }} error={!validation.isValid} - onChange={_e => setFromDate(_e.target.value)} + onChange={e => { + handleCustom(e.target.value); + }} inputProps={{ max: toDate || localDate, }} /> + + { className={styles.dateFilter} InputLabelProps={{ shrink: true }} error={!validation.isValid} - onChange={_e => setToDate(_e.target.value)} + onChange={e => { + handleCustom(undefined, e.target.value); + }} inputProps={{ min: fromDate, max: localDate, }} /> - - {validation.message && ( - - {validation.message} - - )} - + + )} - + ); }; diff --git a/plugins/qeta-react/src/components/FilterPanel/FilterPanel.tsx b/plugins/qeta-react/src/components/FilterPanel/FilterPanel.tsx index 74fd398c..7f8d8802 100644 --- a/plugins/qeta-react/src/components/FilterPanel/FilterPanel.tsx +++ b/plugins/qeta-react/src/components/FilterPanel/FilterPanel.tsx @@ -1,18 +1,16 @@ import React from 'react'; -import { - Box, - Checkbox, - Divider, - FormControl, - FormControlLabel, - FormGroup, - FormLabel, - Grid, - IconButton, - Radio, - RadioGroup, - Tooltip, -} from '@material-ui/core'; +import IconButton from '@mui/material/IconButton'; +import Tooltip from '@mui/material/Tooltip'; +import Divider from '@mui/material/Divider'; +import Box from '@mui/material/Box'; +import Grid from '@mui/material/Grid'; +import FormControl from '@mui/material/FormControl'; +import FormControlLabel from '@mui/material/FormControlLabel'; +import Radio from '@mui/material/Radio'; +import RadioGroup from '@mui/material/RadioGroup'; +import FormGroup from '@mui/material/FormGroup'; +import FormLabel from '@mui/material/FormLabel'; +import Checkbox from '@mui/material/Checkbox'; import { Entity, stringifyEntityRef } from '@backstage/catalog-model'; import { DateRangeFilter } from './DateRangeFilter'; import { PostType } from '@drodil/backstage-plugin-qeta-common'; @@ -24,8 +22,8 @@ import { useStarredEntities, } from '@backstage/plugin-catalog-react'; import { identityApiRef, useApi } from '@backstage/core-plugin-api'; -import FiberManualRecordIcon from '@material-ui/icons/FiberManualRecord'; -import AdjustIcon from '@material-ui/icons/Adjust'; +import FiberManualRecordIcon from '@mui/icons-material/FiberManualRecord'; +import AdjustIcon from '@mui/icons-material/Adjust'; const radioSelect = (value: string, label: string) => { return ( @@ -335,7 +333,7 @@ export const FilterPanel = (props: FilterPanelProps) => { onChange({ key: 'dateRange', value: e })} + onChange={val => onChange({ key: 'dateRange', value: val })} /> {showEntityFilter && ( @@ -377,6 +375,7 @@ export const FilterPanel = (props: FilterPanelProps) => { onChange({ key: 'entitiesRelation', value: 'or' }); } }} + size="large" > {filters.entitiesRelation === 'or' ? ( @@ -421,6 +420,7 @@ export const FilterPanel = (props: FilterPanelProps) => { onChange({ key: 'tagsRelation', value: 'or' }); } }} + size="large" > {filters.tagsRelation === 'or' ? ( diff --git a/plugins/qeta-react/src/components/FollowedLists/FollowedCollectionsList.tsx b/plugins/qeta-react/src/components/FollowedLists/FollowedCollectionsList.tsx index bbc0f7eb..72ee9c2f 100644 --- a/plugins/qeta-react/src/components/FollowedLists/FollowedCollectionsList.tsx +++ b/plugins/qeta-react/src/components/FollowedLists/FollowedCollectionsList.tsx @@ -1,4 +1,8 @@ -import { Box, Divider, List, ListItem, ListSubheader } from '@material-ui/core'; +import Divider from '@mui/material/Divider'; +import Box from '@mui/material/Box'; +import ListItem from '@mui/material/ListItem'; +import List from '@mui/material/List'; +import ListSubheader from '@mui/material/ListSubheader'; import React from 'react'; import { useStyles, useTranslation } from '../../hooks'; import { useCollectionsFollow } from '../../hooks/useCollectionsFollow'; diff --git a/plugins/qeta-react/src/components/FollowedLists/FollowedEntitiesList.tsx b/plugins/qeta-react/src/components/FollowedLists/FollowedEntitiesList.tsx index 92f1bfb3..a32ec056 100644 --- a/plugins/qeta-react/src/components/FollowedLists/FollowedEntitiesList.tsx +++ b/plugins/qeta-react/src/components/FollowedLists/FollowedEntitiesList.tsx @@ -1,4 +1,8 @@ -import { Box, Divider, List, ListItem, ListSubheader } from '@material-ui/core'; +import Divider from '@mui/material/Divider'; +import Box from '@mui/material/Box'; +import ListItem from '@mui/material/ListItem'; +import List from '@mui/material/List'; +import ListSubheader from '@mui/material/ListSubheader'; import React from 'react'; import { EntityChip } from '../TagsAndEntities/EntityChip'; import { useEntityFollow, useStyles, useTranslation } from '../../hooks'; diff --git a/plugins/qeta-react/src/components/FollowedLists/FollowedTagsList.tsx b/plugins/qeta-react/src/components/FollowedLists/FollowedTagsList.tsx index 76d44214..ec1325d9 100644 --- a/plugins/qeta-react/src/components/FollowedLists/FollowedTagsList.tsx +++ b/plugins/qeta-react/src/components/FollowedLists/FollowedTagsList.tsx @@ -1,4 +1,8 @@ -import { Box, Divider, List, ListItem, ListSubheader } from '@material-ui/core'; +import Divider from '@mui/material/Divider'; +import Box from '@mui/material/Box'; +import ListItem from '@mui/material/ListItem'; +import List from '@mui/material/List'; +import ListSubheader from '@mui/material/ListSubheader'; import React from 'react'; import { TagChip } from '../TagsAndEntities/TagChip'; import { useStyles, useTagsFollow, useTranslation } from '../../hooks'; diff --git a/plugins/qeta-react/src/components/HeaderImageInput/HeaderImageInput.tsx b/plugins/qeta-react/src/components/HeaderImageInput/HeaderImageInput.tsx index 763bfcf5..62297476 100644 --- a/plugins/qeta-react/src/components/HeaderImageInput/HeaderImageInput.tsx +++ b/plugins/qeta-react/src/components/HeaderImageInput/HeaderImageInput.tsx @@ -1,4 +1,7 @@ -import { Button, Grid, TextField, Typography } from '@material-ui/core'; +import Typography from '@mui/material/Typography'; +import Grid from '@mui/material/Grid'; +import Button from '@mui/material/Button'; +import TextField from '@mui/material/TextField'; import { imageUpload } from '../../utils/utils'; import React from 'react'; import { configApiRef, errorApiRef, useApi } from '@backstage/core-plugin-api'; diff --git a/plugins/qeta-react/src/components/HomePageCards/ImpactCard.tsx b/plugins/qeta-react/src/components/HomePageCards/ImpactCard.tsx index b6eb5c83..4ece9451 100644 --- a/plugins/qeta-react/src/components/HomePageCards/ImpactCard.tsx +++ b/plugins/qeta-react/src/components/HomePageCards/ImpactCard.tsx @@ -1,5 +1,8 @@ import React from 'react'; -import { Box, Card, CardContent, Typography } from '@material-ui/core'; +import Card from '@mui/material/Card'; +import CardContent from '@mui/material/CardContent'; +import Typography from '@mui/material/Typography'; +import Box from '@mui/material/Box'; import numeral from 'numeral'; import { useQetaApi, useTranslation } from '../../hooks'; diff --git a/plugins/qeta-react/src/components/HomePageCards/PostsCard.tsx b/plugins/qeta-react/src/components/HomePageCards/PostsCard.tsx index 78af810c..1a6d20c7 100644 --- a/plugins/qeta-react/src/components/HomePageCards/PostsCard.tsx +++ b/plugins/qeta-react/src/components/HomePageCards/PostsCard.tsx @@ -1,4 +1,7 @@ -import { Card, CardHeader, Divider, Grid } from '@material-ui/core'; +import Card from '@mui/material/Card'; +import CardHeader from '@mui/material/CardHeader'; +import Divider from '@mui/material/Divider'; +import Grid from '@mui/material/Grid'; import React from 'react'; import { PostsQuery, PostType } from '@drodil/backstage-plugin-qeta-common'; import { PostListItem } from '../PostsContainer'; diff --git a/plugins/qeta-react/src/components/LeftMenu/LeftMenu.tsx b/plugins/qeta-react/src/components/LeftMenu/LeftMenu.tsx index ad32d193..bd0cfaa5 100644 --- a/plugins/qeta-react/src/components/LeftMenu/LeftMenu.tsx +++ b/plugins/qeta-react/src/components/LeftMenu/LeftMenu.tsx @@ -1,25 +1,23 @@ -import { - Box, - ListItem, - ListItemIcon, - makeStyles, - MenuItem, - MenuList, - SvgIcon, - Typography, -} from '@material-ui/core'; -import AccountBox from '@material-ui/icons/AccountBox'; -import LoyaltyOutlined from '@material-ui/icons/LoyaltyOutlined'; -import StarIcon from '@material-ui/icons/Star'; +import Typography from '@mui/material/Typography'; +import Box from '@mui/material/Box'; +import MenuItem from '@mui/material/MenuItem'; +import ListItem from '@mui/material/ListItem'; +import SvgIcon from '@mui/material/SvgIcon'; +import MenuList from '@mui/material/MenuList'; +import ListItemIcon from '@mui/material/ListItemIcon'; +import makeStyles from '@mui/styles/makeStyles'; +import AccountBox from '@mui/icons-material/AccountBox'; +import LoyaltyOutlined from '@mui/icons-material/LoyaltyOutlined'; +import StarIcon from '@mui/icons-material/Star'; import React, { ReactNode } from 'react'; import { useApp, useRouteRef } from '@backstage/core-plugin-api'; -import HelpOutlined from '@material-ui/icons/HelpOutlined'; +import HelpOutlined from '@mui/icons-material/HelpOutlined'; import { useNavigate } from 'react-router-dom'; -import Home from '@material-ui/icons/Home'; +import Home from '@mui/icons-material/Home'; import { useLocation } from 'react-use'; -import CollectionsBookmarkIcon from '@material-ui/icons/CollectionsBookmark'; -import PlaylistPlay from '@material-ui/icons/PlaylistPlay'; -import SettingsIcon from '@material-ui/icons/Settings'; +import CollectionsBookmarkIcon from '@mui/icons-material/CollectionsBookmark'; +import PlaylistPlay from '@mui/icons-material/PlaylistPlay'; +import SettingsIcon from '@mui/icons-material/Settings'; import { GroupIcon } from '@backstage/core-components'; import { articlesRouteRef, @@ -51,6 +49,7 @@ export const useStyles = makeStyles( leftMenu: { top: '0', width: '165px', + paddingTop: '2rem', }, inPopup: { marginRight: 0, @@ -87,7 +86,9 @@ export const useStyles = makeStyles( export const LeftMenu = (props: { onKeyDown?: (event: React.KeyboardEvent) => void; autoFocusItem?: boolean; - onClick?: (event: React.MouseEvent) => void; + onClick?: ( + event: MouseEvent | TouchEvent | React.MouseEvent, + ) => void; inPopup?: boolean; }) => { const rootRoute = useRouteRef(qetaRouteRef); diff --git a/plugins/qeta-react/src/components/LeftMenu/LeftMenuButton.tsx b/plugins/qeta-react/src/components/LeftMenu/LeftMenuButton.tsx index 7b420fcf..ea9f3be4 100644 --- a/plugins/qeta-react/src/components/LeftMenu/LeftMenuButton.tsx +++ b/plugins/qeta-react/src/components/LeftMenu/LeftMenuButton.tsx @@ -1,13 +1,11 @@ -import { - Button, - ClickAwayListener, - Grow, - Paper, - Popper, -} from '@material-ui/core'; +import Button from '@mui/material/Button'; +import Popper from '@mui/material/Popper'; +import Paper from '@mui/material/Paper'; +import Grow from '@mui/material/Grow'; +import ClickAwayListener from '@mui/material/ClickAwayListener'; import React from 'react'; import { LeftMenu } from './LeftMenu'; -import MenuIcon from '@material-ui/icons/Menu'; +import MenuIcon from '@mui/icons-material/Menu'; export const LeftMenuButton = () => { const [open, setOpen] = React.useState(false); @@ -17,7 +15,9 @@ export const LeftMenuButton = () => { setOpen(prevOpen => !prevOpen); }; - const handleClose = (event: React.MouseEvent) => { + const handleClose = ( + event: MouseEvent | TouchEvent | React.MouseEvent, + ) => { if ( anchorRef.current && anchorRef.current.contains(event.target as HTMLElement) diff --git a/plugins/qeta-react/src/components/LoadingGrid/LoadingGrid.tsx b/plugins/qeta-react/src/components/LoadingGrid/LoadingGrid.tsx index b824cc5f..4070a8ff 100644 --- a/plugins/qeta-react/src/components/LoadingGrid/LoadingGrid.tsx +++ b/plugins/qeta-react/src/components/LoadingGrid/LoadingGrid.tsx @@ -1,4 +1,5 @@ -import { CircularProgress, Grid } from '@material-ui/core'; +import Grid from '@mui/material/Grid'; +import CircularProgress from '@mui/material/CircularProgress'; import React from 'react'; export const LoadingGrid = () => { diff --git a/plugins/qeta-react/src/components/MarkdownEditor/MarkdownEditor.tsx b/plugins/qeta-react/src/components/MarkdownEditor/MarkdownEditor.tsx index f55fcbe5..0e2f536a 100644 --- a/plugins/qeta-react/src/components/MarkdownEditor/MarkdownEditor.tsx +++ b/plugins/qeta-react/src/components/MarkdownEditor/MarkdownEditor.tsx @@ -10,7 +10,7 @@ import { errorApiRef, useApi } from '@backstage/core-plugin-api'; import { qetaApiRef } from '../../api'; import { MarkdownRenderer } from '../MarkdownRenderer'; import { imageUpload } from '../../utils/utils'; -import { makeStyles } from '@material-ui/core'; +import makeStyles from '@mui/styles/makeStyles'; import { catalogApiRef } from '@backstage/plugin-catalog-react'; import { stringifyEntityRef, UserEntity } from '@backstage/catalog-model'; diff --git a/plugins/qeta-react/src/components/MarkdownRenderer/MarkdownRenderer.tsx b/plugins/qeta-react/src/components/MarkdownRenderer/MarkdownRenderer.tsx index 6f811b88..3b944fd3 100644 --- a/plugins/qeta-react/src/components/MarkdownRenderer/MarkdownRenderer.tsx +++ b/plugins/qeta-react/src/components/MarkdownRenderer/MarkdownRenderer.tsx @@ -5,7 +5,7 @@ import { a11yDark, a11yLight, } from 'react-syntax-highlighter/dist/esm/styles/hljs'; -import { makeStyles } from '@material-ui/core'; +import makeStyles from '@mui/styles/makeStyles'; import { findUserMentions } from '@drodil/backstage-plugin-qeta-common'; import gfm from 'remark-gfm'; import { EntityRefLink } from '@backstage/plugin-catalog-react'; diff --git a/plugins/qeta-react/src/components/PostAnonymouslyCheckbox/PostAnonymouslyCheckbox.tsx b/plugins/qeta-react/src/components/PostAnonymouslyCheckbox/PostAnonymouslyCheckbox.tsx index 7b7595c3..7ddf6cd5 100644 --- a/plugins/qeta-react/src/components/PostAnonymouslyCheckbox/PostAnonymouslyCheckbox.tsx +++ b/plugins/qeta-react/src/components/PostAnonymouslyCheckbox/PostAnonymouslyCheckbox.tsx @@ -1,5 +1,8 @@ import { Control, Controller } from 'react-hook-form'; -import { Box, Checkbox, FormControlLabel, Tooltip } from '@material-ui/core'; +import Tooltip from '@mui/material/Tooltip'; +import Box from '@mui/material/Box'; +import Checkbox from '@mui/material/Checkbox'; +import FormControlLabel from '@mui/material/FormControlLabel'; import React from 'react'; import { useTranslation } from '../../hooks'; diff --git a/plugins/qeta-react/src/components/PostForm/EntitiesInput.tsx b/plugins/qeta-react/src/components/PostForm/EntitiesInput.tsx index 3bff7962..e7d54b8a 100644 --- a/plugins/qeta-react/src/components/PostForm/EntitiesInput.tsx +++ b/plugins/qeta-react/src/components/PostForm/EntitiesInput.tsx @@ -1,7 +1,8 @@ -import { Autocomplete } from '@material-ui/lab'; import { getEntityTitle } from '../../utils/utils'; import { Entity, stringifyEntityRef } from '@backstage/catalog-model'; -import { TextField, Tooltip } from '@material-ui/core'; +import Tooltip from '@mui/material/Tooltip'; +import TextField from '@mui/material/TextField'; +import Autocomplete from '@mui/material/Autocomplete'; import React, { useEffect, useMemo } from 'react'; import { configApiRef, useApi } from '@backstage/core-plugin-api'; import { catalogApiRef } from '@backstage/plugin-catalog-react'; @@ -113,7 +114,7 @@ export const EntitiesInput = (props: { options={availableEntities} getOptionLabel={getEntityTitle} style={style} - getOptionSelected={(o, v) => + isOptionEqualToValue={(o, v) => stringifyEntityRef(o) === stringifyEntityRef(v) } onChange={(_e, newValue) => { @@ -121,13 +122,13 @@ export const EntitiesInput = (props: { onChange(newValue); } }} - renderOption={option => { + renderOption={(optionProps, option) => { return ( - <> +
  • {getEntityTitle(option)} - +
    • ); }} renderInput={params => ( diff --git a/plugins/qeta-react/src/components/PostForm/PostForm.tsx b/plugins/qeta-react/src/components/PostForm/PostForm.tsx index 307612ac..233f8468 100644 --- a/plugins/qeta-react/src/components/PostForm/PostForm.tsx +++ b/plugins/qeta-react/src/components/PostForm/PostForm.tsx @@ -4,8 +4,9 @@ import { useApi, useRouteRef, } from '@backstage/core-plugin-api'; -import { Button, TextField } from '@material-ui/core'; -import { Alert } from '@material-ui/lab'; +import Button from '@mui/material/Button'; +import TextField from '@mui/material/TextField'; +import Alert from '@mui/material/Alert'; import React, { useCallback, useEffect } from 'react'; import { Controller, useForm } from 'react-hook-form'; import { useNavigate, useSearchParams } from 'react-router-dom'; diff --git a/plugins/qeta-react/src/components/PostForm/TagInput.tsx b/plugins/qeta-react/src/components/PostForm/TagInput.tsx index 08c72d18..3c32ee10 100644 --- a/plugins/qeta-react/src/components/PostForm/TagInput.tsx +++ b/plugins/qeta-react/src/components/PostForm/TagInput.tsx @@ -1,5 +1,6 @@ -import { Autocomplete } from '@material-ui/lab'; -import { TextField, Tooltip } from '@material-ui/core'; +import Tooltip from '@mui/material/Tooltip'; +import TextField from '@mui/material/TextField'; +import Autocomplete from '@mui/material/Autocomplete'; import React, { useEffect, useMemo } from 'react'; import { qetaApiRef } from '../../api'; import { configApiRef, useApi } from '@backstage/core-plugin-api'; @@ -81,17 +82,17 @@ export const TagInput = (props: { options={availableTags ?? []} freeSolo={allowCreation} style={style} - renderOption={option => { + renderOption={(optionProps, option) => { if (tagDescriptions[option]) { return ( - <> +
  • {option} - +
    • ); } - return option; + return
  • {option}
    • ; }} onChange={(_e, newValue) => { const tags = filterTags(newValue); diff --git a/plugins/qeta-react/src/components/PostHighlightList/PostHighlightList.tsx b/plugins/qeta-react/src/components/PostHighlightList/PostHighlightList.tsx index 0b760971..a49f10d2 100644 --- a/plugins/qeta-react/src/components/PostHighlightList/PostHighlightList.tsx +++ b/plugins/qeta-react/src/components/PostHighlightList/PostHighlightList.tsx @@ -1,13 +1,11 @@ -import { - Box, - Divider, - List, - ListItem, - ListItemText, - ListSubheader, -} from '@material-ui/core'; +import Divider from '@mui/material/Divider'; +import Box from '@mui/material/Box'; +import ListItem from '@mui/material/ListItem'; +import List from '@mui/material/List'; +import ListSubheader from '@mui/material/ListSubheader'; +import ListItemText from '@mui/material/ListItemText'; import React from 'react'; -import { Skeleton } from '@material-ui/lab'; +import Skeleton from '@mui/material/Skeleton'; import { useRouteRef } from '@backstage/core-plugin-api'; import { articleRouteRef, questionRouteRef } from '../../routes'; import { PostsQuery, PostType } from '@drodil/backstage-plugin-qeta-common'; @@ -53,9 +51,14 @@ export const PostHighlightList = (props: { subheader={ {props.title} {props.icon} @@ -64,7 +67,7 @@ export const PostHighlightList = (props: { > {loading && ( - + )} {error && ( diff --git a/plugins/qeta-react/src/components/PostsContainer/NoPostsCard.tsx b/plugins/qeta-react/src/components/PostsContainer/NoPostsCard.tsx index 3887e52d..820e77a4 100644 --- a/plugins/qeta-react/src/components/PostsContainer/NoPostsCard.tsx +++ b/plugins/qeta-react/src/components/PostsContainer/NoPostsCard.tsx @@ -1,11 +1,14 @@ -import { Card, CardContent, 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 Grid from '@mui/material/Grid'; import { LinkButton } from '@backstage/core-components'; -import HelpOutline from '@material-ui/icons/HelpOutline'; +import HelpOutline from '@mui/icons-material/HelpOutline'; import React from 'react'; import { useRouteRef } from '@backstage/core-plugin-api'; import { askRouteRef, writeRouteRef } from '../../routes'; import { PostType } from '@drodil/backstage-plugin-qeta-common'; -import CreateIcon from '@material-ui/icons/Create'; +import CreateIcon from '@mui/icons-material/Create'; import { useTranslation } from '../../hooks'; import { useEntityQueryParameter } from '../../hooks/useEntityQueryParameter'; diff --git a/plugins/qeta-react/src/components/PostsContainer/PostList.tsx b/plugins/qeta-react/src/components/PostsContainer/PostList.tsx index c9ea90d8..ecaa442b 100644 --- a/plugins/qeta-react/src/components/PostsContainer/PostList.tsx +++ b/plugins/qeta-react/src/components/PostsContainer/PostList.tsx @@ -1,5 +1,8 @@ import { WarningPanel } from '@backstage/core-components'; -import { Box, Card, Divider, Grid } from '@material-ui/core'; +import Card from '@mui/material/Card'; +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 { PostListItem } from './PostListItem'; import { PostsResponse, PostType } from '@drodil/backstage-plugin-qeta-common'; @@ -7,6 +10,7 @@ import { NoPostsCard } from './NoPostsCard'; import { useTranslation } from '../../hooks'; import { QetaPagination } from '../QetaPagination/QetaPagination'; import { LoadingGrid } from '../LoadingGrid/LoadingGrid'; +import { SelectChangeEvent } from '@mui/material/Select'; export const PostList = (props: { loading: boolean; @@ -56,9 +60,7 @@ export const PostList = (props: { onPageChange(value); }; - const handlePageSizeChange = ( - event: React.ChangeEvent<{ value: unknown }>, - ) => { + const handlePageSizeChange = (event: SelectChangeEvent) => { if (listRef.current) { listRef.current.scrollIntoView(); } @@ -107,11 +109,16 @@ export const PostList = (props: { - {response.posts.map(post => { + {response.posts.map((post, i) => { return ( - + - + {i !== response.total - 1 && } ); })} diff --git a/plugins/qeta-react/src/components/PostsContainer/PostListItem.tsx b/plugins/qeta-react/src/components/PostsContainer/PostListItem.tsx index f22b3b9e..cf1351ce 100644 --- a/plugins/qeta-react/src/components/PostsContainer/PostListItem.tsx +++ b/plugins/qeta-react/src/components/PostsContainer/PostListItem.tsx @@ -1,4 +1,7 @@ -import { Avatar, Chip, Grid, Typography, useTheme } from '@material-ui/core'; +import Typography from '@mui/material/Typography'; +import Avatar from '@mui/material/Avatar'; +import Grid from '@mui/material/Grid'; +import Chip from '@mui/material/Chip'; import { Link } from '@backstage/core-components'; import React, { useEffect, useState } from 'react'; import DOMPurify from 'dompurify'; @@ -17,10 +20,11 @@ import { useSignal } from '@backstage/plugin-signals-react'; import { VoteButtons } from '../Buttons/VoteButtons'; import { FavoriteButton } from '../Buttons/FavoriteButton'; import { capitalize } from 'lodash'; -import CollectionsBookmarkIcon from '@material-ui/icons/CollectionsBookmark'; -import HelpOutlined from '@material-ui/icons/HelpOutlined'; +import CollectionsBookmarkIcon from '@mui/icons-material/CollectionsBookmark'; +import HelpOutlined from '@mui/icons-material/HelpOutlined'; import { useStyles, useTranslation } from '../../hooks'; import { useEntityAuthor } from '../../hooks/useEntityAuthor'; +import useTheme from '@mui/styles/useTheme'; export interface PostListItemProps { post: PostResponse; @@ -63,22 +67,26 @@ export const PostListItem = (props: PostListItemProps) => { return ( - +
    - - + + {type === undefined && ( { })} /> - - + + {post.title} diff --git a/plugins/qeta-react/src/components/PostsContainer/PostsContainer.tsx b/plugins/qeta-react/src/components/PostsContainer/PostsContainer.tsx index 327e9dee..5e5b2b37 100644 --- a/plugins/qeta-react/src/components/PostsContainer/PostsContainer.tsx +++ b/plugins/qeta-react/src/components/PostsContainer/PostsContainer.tsx @@ -1,15 +1,13 @@ -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 from 'react'; import { FilterPanel, PostFilters } from '../FilterPanel/FilterPanel'; import { PostList } from './PostList'; -import FilterList from '@material-ui/icons/FilterList'; +import FilterList from '@mui/icons-material/FilterList'; import { AskQuestionButton } from '../Buttons/AskQuestionButton'; import { EntityRefLink } from '@backstage/plugin-catalog-react'; import { TagFollowButton } from '../Buttons/TagFollowButton'; diff --git a/plugins/qeta-react/src/components/PostsGrid/PostsGrid.tsx b/plugins/qeta-react/src/components/PostsGrid/PostsGrid.tsx index 6de13da9..627c62eb 100644 --- a/plugins/qeta-react/src/components/PostsGrid/PostsGrid.tsx +++ b/plugins/qeta-react/src/components/PostsGrid/PostsGrid.tsx @@ -6,15 +6,13 @@ import { TagFollowButton, WriteArticleButton, } from '../Buttons'; -import { - Box, - Button, - Collapse, - Grid, - TextField, - Typography, -} from '@material-ui/core'; -import FilterList from '@material-ui/icons/FilterList'; +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 FilterList from '@mui/icons-material/FilterList'; import { FilterPanel, PostFilters } from '../FilterPanel/FilterPanel'; import { PostsGridContent } from './PostsGridContent'; import { capitalize } from 'lodash'; diff --git a/plugins/qeta-react/src/components/PostsGrid/PostsGridContent.tsx b/plugins/qeta-react/src/components/PostsGrid/PostsGridContent.tsx index 0eee959a..b027b1e7 100644 --- a/plugins/qeta-react/src/components/PostsGrid/PostsGridContent.tsx +++ b/plugins/qeta-react/src/components/PostsGrid/PostsGridContent.tsx @@ -2,11 +2,13 @@ import { PostsResponse, PostType } from '@drodil/backstage-plugin-qeta-common'; import React, { useEffect, useRef, useState } from 'react'; import { WarningPanel } from '@backstage/core-components'; import { NoPostsCard } from '../PostsContainer/NoPostsCard'; -import { Box, Grid } from '@material-ui/core'; +import Box from '@mui/material/Box'; +import Grid from '@mui/material/Grid'; import { PostsGridItem } from './PostsGridItem'; import { useTranslation } from '../../hooks'; import { QetaPagination } from '../QetaPagination/QetaPagination'; import { LoadingGrid } from '../LoadingGrid/LoadingGrid'; +import { SelectChangeEvent } from '@mui/material/Select'; export const PostsGridContent = (props: { loading: boolean; @@ -61,9 +63,7 @@ export const PostsGridContent = (props: { onPageChange(value); }; - const handlePageSizeChange = ( - event: React.ChangeEvent<{ value: unknown }>, - ) => { + const handlePageSizeChange = (event: SelectChangeEvent) => { if (gridRef.current) { gridRef.current.scrollIntoView(); } diff --git a/plugins/qeta-react/src/components/PostsGrid/PostsGridItem.tsx b/plugins/qeta-react/src/components/PostsGrid/PostsGridItem.tsx index 12acd7b7..4c95db06 100644 --- a/plugins/qeta-react/src/components/PostsGrid/PostsGridItem.tsx +++ b/plugins/qeta-react/src/components/PostsGrid/PostsGridItem.tsx @@ -9,17 +9,15 @@ import React, { useEffect, useState } from 'react'; import { useSignal } from '@backstage/plugin-signals-react'; import { useApi, useRouteRef } from '@backstage/core-plugin-api'; import { articleRouteRef, questionRouteRef, userRouteRef } from '../../routes'; -import { - Avatar, - Box, - Card, - CardActionArea, - CardContent, - CardMedia, - IconButton, - Tooltip, - Typography, -} from '@material-ui/core'; +import Card from '@mui/material/Card'; +import CardContent from '@mui/material/CardContent'; +import CardActionArea from '@mui/material/CardActionArea'; +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 Avatar from '@mui/material/Avatar'; +import CardMedia from '@mui/material/CardMedia'; import DOMPurify from 'dompurify'; import { useNavigate } from 'react-router-dom'; import { TagsAndEntities } from '../TagsAndEntities/TagsAndEntities'; @@ -28,10 +26,10 @@ import { RelativeTimeWithTooltip } from '../RelativeTimeWithTooltip'; import { useStyles, useTranslation } from '../../hooks'; import { useEntityAuthor } from '../../hooks/useEntityAuthor'; import { qetaApiRef } from '../../api'; -import VerticalAlignTopIcon from '@material-ui/icons/VerticalAlignTop'; -import VerticalAlignBottomIcon from '@material-ui/icons/VerticalAlignBottom'; -import KeyboardArrowUpIcon from '@material-ui/icons/KeyboardArrowUp'; -import KeyboardArrowDownIcon from '@material-ui/icons/KeyboardArrowDown'; +import VerticalAlignTopIcon from '@mui/icons-material/VerticalAlignTop'; +import VerticalAlignBottomIcon from '@mui/icons-material/VerticalAlignBottom'; +import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp'; +import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown'; export interface PostsGridItemProps { post: PostResponse; diff --git a/plugins/qeta-react/src/components/QetaPagination/QetaPagination.tsx b/plugins/qeta-react/src/components/QetaPagination/QetaPagination.tsx index 0fc0fa06..8a79dfb3 100644 --- a/plugins/qeta-react/src/components/QetaPagination/QetaPagination.tsx +++ b/plugins/qeta-react/src/components/QetaPagination/QetaPagination.tsx @@ -1,18 +1,16 @@ -import { - FormControl, - Grid, - MenuItem, - Select, - Tooltip, -} from '@material-ui/core'; +import Tooltip from '@mui/material/Tooltip'; +import Grid from '@mui/material/Grid'; +import FormControl from '@mui/material/FormControl'; +import Select, { SelectChangeEvent } from '@mui/material/Select'; +import MenuItem from '@mui/material/MenuItem'; import React from 'react'; import { useStyles, useTranslation } from '../../hooks'; -import { Pagination as MuiPagination } from '@material-ui/lab'; +import Pagination from '@mui/material/Pagination'; export const QetaPagination = (props: { pageSize: number; handlePageChange: (_event: React.ChangeEvent, value: number) => void; - handlePageSizeChange: (event: React.ChangeEvent<{ value: unknown }>) => void; + handlePageSizeChange: (event: SelectChangeEvent) => void; page: number; tooltip?: string; pageCount: number; @@ -45,7 +43,7 @@ export const QetaPagination = (props: { - { diff --git a/plugins/qeta-react/src/components/QuestionsTable/QuestionTableRow.tsx b/plugins/qeta-react/src/components/QuestionsTable/QuestionTableRow.tsx index a02fadbc..4bddc2d0 100644 --- a/plugins/qeta-react/src/components/QuestionsTable/QuestionTableRow.tsx +++ b/plugins/qeta-react/src/components/QuestionsTable/QuestionTableRow.tsx @@ -1,5 +1,6 @@ import { Post } from '@drodil/backstage-plugin-qeta-common'; -import { TableCell, TableRow } from '@material-ui/core'; +import TableCell from '@mui/material/TableCell'; +import TableRow from '@mui/material/TableRow'; import { Link } from '@backstage/core-components'; import { RelativeTimeWithTooltip } from '../RelativeTimeWithTooltip/RelativeTimeWithTooltip'; import React from 'react'; diff --git a/plugins/qeta-react/src/components/QuestionsTable/QuestionsTable.tsx b/plugins/qeta-react/src/components/QuestionsTable/QuestionsTable.tsx index 8f91b833..9cc768d7 100644 --- a/plugins/qeta-react/src/components/QuestionsTable/QuestionsTable.tsx +++ b/plugins/qeta-react/src/components/QuestionsTable/QuestionsTable.tsx @@ -1,19 +1,17 @@ import React from 'react'; import { LinkButton, Progress, WarningPanel } from '@backstage/core-components'; -import { - Button, - ButtonGroup, - Grid, - Table, - TableBody, - TableCell, - TableContainer, - TableHead, - TablePagination, - TableRow, - Typography, -} from '@material-ui/core'; -import RefreshIcon from '@material-ui/icons/Refresh'; +import Typography from '@mui/material/Typography'; +import Grid from '@mui/material/Grid'; +import Button from '@mui/material/Button'; +import RefreshIcon from '@mui/icons-material/Refresh'; +import ButtonGroup from '@mui/material/ButtonGroup'; +import TableContainer from '@mui/material/TableContainer'; +import Table from '@mui/material/Table'; +import TableHead from '@mui/material/TableHead'; +import TableRow from '@mui/material/TableRow'; +import TableCell from '@mui/material/TableCell'; +import TablePagination from '@mui/material/TablePagination'; +import TableBody from '@mui/material/TableBody'; import { QuestionTableRow } from './QuestionTableRow'; import { useQetaApi, useTranslation } from '../../hooks'; diff --git a/plugins/qeta-react/src/components/RelativeTimeWithTooltip/RelativeTimeWithTooltip.tsx b/plugins/qeta-react/src/components/RelativeTimeWithTooltip/RelativeTimeWithTooltip.tsx index 5e55d6ea..9e5c79e1 100644 --- a/plugins/qeta-react/src/components/RelativeTimeWithTooltip/RelativeTimeWithTooltip.tsx +++ b/plugins/qeta-react/src/components/RelativeTimeWithTooltip/RelativeTimeWithTooltip.tsx @@ -1,4 +1,4 @@ -import { Tooltip } from '@material-ui/core'; +import Tooltip from '@mui/material/Tooltip'; import React, { useEffect } from 'react'; // @ts-ignore import RelativeTime from 'react-relative-time'; @@ -21,7 +21,9 @@ export const RelativeTimeWithTooltip = (props: { value: Date | string }) => { return ( - +
    + +
    ); }; diff --git a/plugins/qeta-react/src/components/SelectTemplateList/SelectTemplateList.tsx b/plugins/qeta-react/src/components/SelectTemplateList/SelectTemplateList.tsx index 023ba0b4..d635ff93 100644 --- a/plugins/qeta-react/src/components/SelectTemplateList/SelectTemplateList.tsx +++ b/plugins/qeta-react/src/components/SelectTemplateList/SelectTemplateList.tsx @@ -3,16 +3,14 @@ import { TemplatesResponse, } from '@drodil/backstage-plugin-qeta-common'; import React from 'react'; -import { - Button, - Card, - CardContent, - CardHeader, - List, - ListItem, - ListItemSecondaryAction, - ListItemText, -} from '@material-ui/core'; +import Card from '@mui/material/Card'; +import CardContent from '@mui/material/CardContent'; +import CardHeader from '@mui/material/CardHeader'; +import Button from '@mui/material/Button'; +import ListItem from '@mui/material/ListItem'; +import List from '@mui/material/List'; +import ListItemSecondaryAction from '@mui/material/ListItemSecondaryAction'; +import ListItemText from '@mui/material/ListItemText'; import { useTranslation } from '../../hooks'; export const SelectTemplateList = (props: { diff --git a/plugins/qeta-react/src/components/StatsChart/StatsChart.tsx b/plugins/qeta-react/src/components/StatsChart/StatsChart.tsx index bd43e9d9..e0a5c12d 100644 --- a/plugins/qeta-react/src/components/StatsChart/StatsChart.tsx +++ b/plugins/qeta-react/src/components/StatsChart/StatsChart.tsx @@ -8,20 +8,17 @@ import { Line, LineChart, ResponsiveContainer, - Tooltip, + Tooltip as ChartTooltip, XAxis, YAxis, } from 'recharts'; -import { - ButtonGroup, - createStyles, - IconButton, - makeStyles, - Theme, - Typography, -} from '@material-ui/core'; -import ShowChartIcon from '@material-ui/icons/ShowChart'; -import BarChartIcon from '@material-ui/icons/BarChart'; +import IconButton from '@mui/material/IconButton'; +import ButtonGroup from '@mui/material/ButtonGroup'; +import Typography from '@mui/material/Typography'; +import createStyles from '@mui/styles/createStyles'; +import makeStyles from '@mui/styles/makeStyles'; +import ShowChartIcon from '@mui/icons-material/ShowChart'; +import BarChartIcon from '@mui/icons-material/BarChart'; import { useIsDarkTheme } from '../../hooks/useIsDarkTheme'; import { useTranslation } from '../../hooks'; import { isGlobalStat, isUserStat } from './util'; @@ -34,7 +31,7 @@ export type QetaStatsChartClassKey = | 'barChart'; const useStyles = makeStyles( - (theme: Theme) => + theme => createStyles({ tooltipLabel: { color: theme.palette.text.primary, @@ -192,7 +189,7 @@ const StatsBarChart = (props: { data: Stat[] }) => { height={300} className={localStyles.barChart} > - { height={300} className={localStyles.lineChart} > - { onClick={() => { setChart('line'); }} + size="large" > @@ -327,6 +325,7 @@ export const StatsChart = (props: { data: Stat[] }) => { onClick={() => { setChart('bar'); }} + size="large" > diff --git a/plugins/qeta-react/src/components/SummaryStatsGrid/SummaryStatsGrid.tsx b/plugins/qeta-react/src/components/SummaryStatsGrid/SummaryStatsGrid.tsx index 8e1027bd..00752833 100644 --- a/plugins/qeta-react/src/components/SummaryStatsGrid/SummaryStatsGrid.tsx +++ b/plugins/qeta-react/src/components/SummaryStatsGrid/SummaryStatsGrid.tsx @@ -1,4 +1,7 @@ -import { Card, CardContent, 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 Grid from '@mui/material/Grid'; import { GlobalStat, StatisticsResponse, diff --git a/plugins/qeta-react/src/components/TagsAndEntities/CollectionChip.tsx b/plugins/qeta-react/src/components/TagsAndEntities/CollectionChip.tsx index 6fb39f92..090a4edb 100644 --- a/plugins/qeta-react/src/components/TagsAndEntities/CollectionChip.tsx +++ b/plugins/qeta-react/src/components/TagsAndEntities/CollectionChip.tsx @@ -1,4 +1,8 @@ -import { Button, Chip, Grid, Tooltip, Typography } from '@material-ui/core'; +import Tooltip from '@mui/material/Tooltip'; +import Typography from '@mui/material/Typography'; +import Grid from '@mui/material/Grid'; +import Button from '@mui/material/Button'; +import Chip from '@mui/material/Chip'; import React, { useEffect } from 'react'; import { useApi, useRouteRef } from '@backstage/core-plugin-api'; import { collectionRouteRef } from '../../routes'; @@ -90,7 +94,6 @@ export const CollectionChip = (props: { collection: Collection }) => { } - interactive enterDelay={400} > { const entityRef = typeof entity === 'string' ? entity : stringifyEntityRef(entity); return ( - } - arrow - interactive - enterDelay={400} - > + } arrow enterDelay={400}> { const navigate = useNavigate(); const { tag } = props; return ( - } - interactive - enterDelay={400} - > + } enterDelay={400}> {error && ( diff --git a/plugins/qeta-react/src/components/TagsGrid/NoTagsCard.tsx b/plugins/qeta-react/src/components/TagsGrid/NoTagsCard.tsx index 304a36e4..2ea7db9d 100644 --- a/plugins/qeta-react/src/components/TagsGrid/NoTagsCard.tsx +++ b/plugins/qeta-react/src/components/TagsGrid/NoTagsCard.tsx @@ -1,4 +1,7 @@ -import { Card, CardContent, 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 Grid from '@mui/material/Grid'; import React from 'react'; import { useTranslation } from '../../hooks'; diff --git a/plugins/qeta-react/src/components/TagsGrid/TagGridItem.tsx b/plugins/qeta-react/src/components/TagsGrid/TagGridItem.tsx index 2e5055a7..b9721114 100644 --- a/plugins/qeta-react/src/components/TagsGrid/TagGridItem.tsx +++ b/plugins/qeta-react/src/components/TagsGrid/TagGridItem.tsx @@ -3,17 +3,15 @@ import { TagResponse, truncate, } from '@drodil/backstage-plugin-qeta-common'; -import { - Button, - Card, - CardActionArea, - CardActions, - CardContent, - CardHeader, - Grid, - Tooltip, - Typography, -} from '@material-ui/core'; +import Card from '@mui/material/Card'; +import CardContent from '@mui/material/CardContent'; +import CardActionArea from '@mui/material/CardActionArea'; +import CardHeader from '@mui/material/CardHeader'; +import Tooltip from '@mui/material/Tooltip'; +import Typography from '@mui/material/Typography'; +import Grid from '@mui/material/Grid'; +import Button from '@mui/material/Button'; +import CardActions from '@mui/material/CardActions'; import React from 'react'; import { useRouteRef } from '@backstage/core-plugin-api'; import { tagRouteRef } from '../../routes'; diff --git a/plugins/qeta-react/src/components/TagsGrid/TagsGrid.tsx b/plugins/qeta-react/src/components/TagsGrid/TagsGrid.tsx index 48686222..005a0f9c 100644 --- a/plugins/qeta-react/src/components/TagsGrid/TagsGrid.tsx +++ b/plugins/qeta-react/src/components/TagsGrid/TagsGrid.tsx @@ -1,4 +1,6 @@ -import { Grid, IconButton, TextField } from '@material-ui/core'; +import IconButton from '@mui/material/IconButton'; +import Grid from '@mui/material/Grid'; +import TextField from '@mui/material/TextField'; import React, { useEffect } from 'react'; import { useQetaApi, useTranslation } from '../../hooks'; import { QetaPagination } from '../QetaPagination/QetaPagination'; @@ -78,7 +80,7 @@ export const TagsGrid = () => { placeholder={t('tagPage.search.placeholder')} size="small" /> - +     { onClick={() => { navigate(`#template:${template.id}`); }} + size="large" > - onDelete(template.id)}> + onDelete(template.id)} size="large"> diff --git a/plugins/qeta-react/src/components/TopRankingUsersCard/TopRankingUsersCard.tsx b/plugins/qeta-react/src/components/TopRankingUsersCard/TopRankingUsersCard.tsx index 21e2d28a..e3cb809c 100644 --- a/plugins/qeta-react/src/components/TopRankingUsersCard/TopRankingUsersCard.tsx +++ b/plugins/qeta-react/src/components/TopRankingUsersCard/TopRankingUsersCard.tsx @@ -5,14 +5,12 @@ import { TabbedCard, WarningPanel, } from '@backstage/core-components'; -import { - Avatar, - List, - ListItem, - ListItemAvatar, - ListItemText, - Typography, -} from '@material-ui/core'; +import Typography from '@mui/material/Typography'; +import Avatar from '@mui/material/Avatar'; +import ListItem from '@mui/material/ListItem'; +import List from '@mui/material/List'; +import ListItemAvatar from '@mui/material/ListItemAvatar'; +import ListItemText from '@mui/material/ListItemText'; import { StatisticResponse } from '@drodil/backstage-plugin-qeta-common'; import { TrophyIcon } from './TrophyIcon'; import { useStyles } from './styles'; diff --git a/plugins/qeta-react/src/components/TopRankingUsersCard/TrophyIcon.tsx b/plugins/qeta-react/src/components/TopRankingUsersCard/TrophyIcon.tsx index e88cfa02..e2bb652b 100644 --- a/plugins/qeta-react/src/components/TopRankingUsersCard/TrophyIcon.tsx +++ b/plugins/qeta-react/src/components/TopRankingUsersCard/TrophyIcon.tsx @@ -1,5 +1,5 @@ -import { SvgIcon, SvgIconProps } from '@material-ui/core'; - +import type { SvgIconProps } from '@mui/material/SvgIcon'; +import SvgIcon from '@mui/material/SvgIcon'; import React from 'react'; export const TrophyIcon = (props: SvgIconProps) => ( diff --git a/plugins/qeta-react/src/components/TopRankingUsersCard/styles.ts b/plugins/qeta-react/src/components/TopRankingUsersCard/styles.ts index 51aa1f4b..27eae3d9 100644 --- a/plugins/qeta-react/src/components/TopRankingUsersCard/styles.ts +++ b/plugins/qeta-react/src/components/TopRankingUsersCard/styles.ts @@ -1,4 +1,4 @@ -import { makeStyles } from '@material-ui/core'; +import makeStyles from '@mui/styles/makeStyles'; export const useStyles = makeStyles(theme => { return { diff --git a/plugins/qeta-react/src/components/UsersGrid/NoUsersCard.tsx b/plugins/qeta-react/src/components/UsersGrid/NoUsersCard.tsx index becc1358..80c13a7b 100644 --- a/plugins/qeta-react/src/components/UsersGrid/NoUsersCard.tsx +++ b/plugins/qeta-react/src/components/UsersGrid/NoUsersCard.tsx @@ -1,4 +1,7 @@ -import { Card, CardContent, 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 Grid from '@mui/material/Grid'; import React from 'react'; import { useTranslation } from '../../hooks'; diff --git a/plugins/qeta-react/src/components/UsersGrid/UsersGrid.tsx b/plugins/qeta-react/src/components/UsersGrid/UsersGrid.tsx index 67b3a168..4804e589 100644 --- a/plugins/qeta-react/src/components/UsersGrid/UsersGrid.tsx +++ b/plugins/qeta-react/src/components/UsersGrid/UsersGrid.tsx @@ -1,4 +1,6 @@ -import { Grid, IconButton, TextField } from '@material-ui/core'; +import IconButton from '@mui/material/IconButton'; +import Grid from '@mui/material/Grid'; +import TextField from '@mui/material/TextField'; import React, { useEffect } from 'react'; import { useQetaApi, useTranslation } from '../../hooks'; import { QetaPagination } from '../QetaPagination/QetaPagination'; @@ -66,7 +68,7 @@ export const UsersGrid = () => { placeholder={t('usersPage.search.placeholder')} size="small" /> - +     {response && response?.total > 0 && ( diff --git a/plugins/qeta-react/src/components/UsersGrid/UsersGridContent.tsx b/plugins/qeta-react/src/components/UsersGrid/UsersGridContent.tsx index e1a826db..e6ff24d3 100644 --- a/plugins/qeta-react/src/components/UsersGrid/UsersGridContent.tsx +++ b/plugins/qeta-react/src/components/UsersGrid/UsersGridContent.tsx @@ -1,4 +1,5 @@ -import { Grid, Typography } from '@material-ui/core'; +import Typography from '@mui/material/Typography'; +import Grid from '@mui/material/Grid'; import React, { useEffect, useState } from 'react'; import { UsersResponse } from '@drodil/backstage-plugin-qeta-common'; import { WarningPanel } from '@backstage/core-components'; diff --git a/plugins/qeta-react/src/components/UsersGrid/UsersGridItem.tsx b/plugins/qeta-react/src/components/UsersGrid/UsersGridItem.tsx index da22c331..e5d1f936 100644 --- a/plugins/qeta-react/src/components/UsersGrid/UsersGridItem.tsx +++ b/plugins/qeta-react/src/components/UsersGrid/UsersGridItem.tsx @@ -1,16 +1,14 @@ import { UserResponse } from '@drodil/backstage-plugin-qeta-common'; -import { - Avatar, - Button, - Card, - CardActionArea, - CardActions, - CardContent, - CardHeader, - Grid, - Tooltip, - Typography, -} from '@material-ui/core'; +import Card from '@mui/material/Card'; +import CardContent from '@mui/material/CardContent'; +import CardActionArea from '@mui/material/CardActionArea'; +import CardHeader from '@mui/material/CardHeader'; +import Tooltip from '@mui/material/Tooltip'; +import Typography from '@mui/material/Typography'; +import Avatar from '@mui/material/Avatar'; +import Grid from '@mui/material/Grid'; +import Button from '@mui/material/Button'; +import CardActions from '@mui/material/CardActions'; import React from 'react'; import { useRouteRef } from '@backstage/core-plugin-api'; import { useNavigate } from 'react-router-dom'; diff --git a/plugins/qeta-react/src/hooks/useFormStyles.ts b/plugins/qeta-react/src/hooks/useFormStyles.ts index 96f6d6b5..a0ce40c3 100644 --- a/plugins/qeta-react/src/hooks/useFormStyles.ts +++ b/plugins/qeta-react/src/hooks/useFormStyles.ts @@ -1,4 +1,4 @@ -import { makeStyles } from '@material-ui/core'; +import makeStyles from '@mui/styles/makeStyles'; export type QetaFormClassKey = 'headerImage' | 'postButton' | 'postForm'; diff --git a/plugins/qeta-react/src/hooks/useStyles.ts b/plugins/qeta-react/src/hooks/useStyles.ts index aa85673a..26ac95ad 100644 --- a/plugins/qeta-react/src/hooks/useStyles.ts +++ b/plugins/qeta-react/src/hooks/useStyles.ts @@ -1,4 +1,4 @@ -import { makeStyles } from '@material-ui/core'; +import makeStyles from '@mui/styles/makeStyles'; export const useStyles = makeStyles( theme => { @@ -14,7 +14,6 @@ export const useStyles = makeStyles( questionCardVote: { textAlign: 'center', width: '32px', - marginRight: '20px', marginLeft: '5px', display: 'inline-block', verticalAlign: 'top', @@ -25,7 +24,7 @@ export const useStyles = makeStyles( }, questionListItem: { padding: '0.7rem', - paddingBottom: '1.4rem', + paddingBottom: '1.0rem', }, questionListItemStats: { width: '70px', @@ -88,10 +87,10 @@ export const useStyles = makeStyles( marginTop: theme.spacing(3), }, marginRight: { - marginRight: theme.spacing(1), + marginRight: theme.spacing(2), }, marginLeft: { - marginLeft: theme.spacing(1), + marginLeft: theme.spacing(2), }, questionCardActions: { marginTop: theme.spacing(2), diff --git a/plugins/qeta-react/src/overridableComponents.ts b/plugins/qeta-react/src/overridableComponents.ts index afeec6a5..13b66e21 100644 --- a/plugins/qeta-react/src/overridableComponents.ts +++ b/plugins/qeta-react/src/overridableComponents.ts @@ -1,5 +1,3 @@ -import { Overrides } from '@material-ui/core/styles/overrides'; -import { StyleRules } from '@material-ui/core/styles/withStyles'; import { QetaMarkdownContentClassKey } from './components/MarkdownRenderer/MarkdownRenderer'; import { QetaArticleContentClassKey } from './components/ArticleContent/ArticleContent'; import { QetaVoteButtonsClassKey } from './components/Buttons/VoteButtons'; @@ -10,6 +8,9 @@ import { QetaMarkdownEditorClassKey } from './components/MarkdownEditor/Markdown import { QetaAuthorBoxClassKey } from './components/AuthorBox/AuthorBox'; import { QetaFormClassKey } from './hooks/useFormStyles'; import { QetaAIAnswerCardClassKey } from './components/AIAnswerCard/AIAnswerCard'; +import { ComponentsOverrides } from '@mui/material/styles'; +// eslint-disable-next-line no-restricted-imports +import { OverridesStyleRules } from '@mui/material/styles/overrides'; type QetaComponentsNameToClassKey = { QetaLeftMenu: QetaLeftMenuClassKey; @@ -24,8 +25,8 @@ type QetaComponentsNameToClassKey = { QetaAIAnswerCard: QetaAIAnswerCardClassKey; }; -export type QetaOverrides = Overrides & { +export type QetaOverrides = ComponentsOverrides & { [Name in keyof QetaComponentsNameToClassKey]?: Partial< - StyleRules + OverridesStyleRules >; }; diff --git a/plugins/qeta/dev/ComponentPage.tsx b/plugins/qeta/dev/ComponentPage.tsx index 0b48ffaf..db75be28 100644 --- a/plugins/qeta/dev/ComponentPage.tsx +++ b/plugins/qeta/dev/ComponentPage.tsx @@ -1,5 +1,5 @@ import { Content, Page } from '@backstage/core-components'; -import { Container } from '@material-ui/core'; +import Container from '@mui/material/Container'; import { PostsContainer } from '@drodil/backstage-plugin-qeta-react'; import React from 'react'; diff --git a/plugins/qeta/dev/TablePage.tsx b/plugins/qeta/dev/TablePage.tsx index d343a7b0..474ad7f4 100644 --- a/plugins/qeta/dev/TablePage.tsx +++ b/plugins/qeta/dev/TablePage.tsx @@ -1,7 +1,8 @@ import React from 'react'; import { Content, Page } from '@backstage/core-components'; import { QuestionsTable } from '@drodil/backstage-plugin-qeta-react'; -import { Card, CardContent } from '@material-ui/core'; +import Card from '@mui/material/Card'; +import CardContent from '@mui/material/CardContent'; export const TablePage = () => { return ( diff --git a/plugins/qeta/dev/TagPage.tsx b/plugins/qeta/dev/TagPage.tsx index d57524c0..b4fe3ab1 100644 --- a/plugins/qeta/dev/TagPage.tsx +++ b/plugins/qeta/dev/TagPage.tsx @@ -1,5 +1,5 @@ import { Content, Page } from '@backstage/core-components'; -import { Container } from '@material-ui/core'; +import Container from '@mui/material/Container'; import { PostsContainer } from '@drodil/backstage-plugin-qeta-react'; import React from 'react'; diff --git a/plugins/qeta/dev/index.tsx b/plugins/qeta/dev/index.tsx index 33338c1c..21685590 100644 --- a/plugins/qeta/dev/index.tsx +++ b/plugins/qeta/dev/index.tsx @@ -17,9 +17,9 @@ import { } from '@backstage/plugin-notifications'; import { catalogPlugin } from '@backstage/plugin-catalog'; import { signalsPlugin } from '@backstage/plugin-signals'; -import Alert from '@material-ui/lab/Alert'; -import AlertTitle from '@material-ui/lab/AlertTitle'; -import Box from '@material-ui/core/Box'; +import Alert from '@mui/material/Alert'; +import AlertTitle from '@mui/material/AlertTitle'; +import Box from '@mui/material/Box'; const IntroElement = () => ( diff --git a/plugins/qeta/package.json b/plugins/qeta/package.json index 9e31b7bd..cb68a0d4 100644 --- a/plugins/qeta/package.json +++ b/plugins/qeta/package.json @@ -56,9 +56,10 @@ "@backstage/plugin-signals-react": "backstage:^", "@drodil/backstage-plugin-qeta-common": "workspace:^", "@drodil/backstage-plugin-qeta-react": "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", "react-use": "^17.4.0" }, "peerDependencies": { diff --git a/plugins/qeta/src/components/ArticlePage/ArticlePage.tsx b/plugins/qeta/src/components/ArticlePage/ArticlePage.tsx index a7952fdc..bc76c51c 100644 --- a/plugins/qeta/src/components/ArticlePage/ArticlePage.tsx +++ b/plugins/qeta/src/components/ArticlePage/ArticlePage.tsx @@ -1,7 +1,7 @@ import { useParams } from 'react-router-dom'; import React, { useEffect, useState } from 'react'; import { useSignal } from '@backstage/plugin-signals-react'; -import { Skeleton } from '@material-ui/lab'; +import Skeleton from '@mui/material/Skeleton'; import { ContentHeader, WarningPanel } from '@backstage/core-components'; import { Article, QetaSignal } from '@drodil/backstage-plugin-qeta-common'; import { @@ -12,7 +12,7 @@ import { useTranslation, WriteArticleButton, } from '@drodil/backstage-plugin-qeta-react'; -import { Container } from '@material-ui/core'; +import Container from '@mui/material/Container'; export const ArticlePage = () => { const { id } = useParams(); @@ -41,7 +41,7 @@ export const ArticlePage = () => { }, [lastSignal]); if (loading) { - return ; + return ; } if (error || post === undefined) { diff --git a/plugins/qeta/src/components/ArticlesPage/ArticlesPage.tsx b/plugins/qeta/src/components/ArticlesPage/ArticlesPage.tsx index 4db62bb1..664973d4 100644 --- a/plugins/qeta/src/components/ArticlesPage/ArticlesPage.tsx +++ b/plugins/qeta/src/components/ArticlesPage/ArticlesPage.tsx @@ -10,8 +10,8 @@ import { WriteArticleButton, } from '@drodil/backstage-plugin-qeta-react'; import { filterTags } from '@drodil/backstage-plugin-qeta-common'; -import { Grid } from '@material-ui/core'; -import Whatshot from '@material-ui/icons/Whatshot'; +import Grid from '@mui/material/Grid'; +import Whatshot from '@mui/icons-material/Whatshot'; export const ArticlesPage = () => { const [searchParams] = useSearchParams(); @@ -28,13 +28,13 @@ export const ArticlesPage = () => { return ( - + - + { const { id } = useParams(); @@ -23,7 +24,7 @@ export const CollectionPage = () => { } = useQetaApi(api => api.getCollection(id), [id]); if (loading) { - return ; + return ; } if (error || collection === undefined) { diff --git a/plugins/qeta/src/components/CollectionsPage/CollectionsPage.tsx b/plugins/qeta/src/components/CollectionsPage/CollectionsPage.tsx index 5103ffeb..845df748 100644 --- a/plugins/qeta/src/components/CollectionsPage/CollectionsPage.tsx +++ b/plugins/qeta/src/components/CollectionsPage/CollectionsPage.tsx @@ -7,7 +7,7 @@ import { useCollectionsFollow, useTranslation, } from '@drodil/backstage-plugin-qeta-react'; -import { Grid } from '@material-ui/core'; +import Grid from '@mui/material/Grid'; export const CollectionsPage = () => { const { t } = useTranslation(); diff --git a/plugins/qeta/src/components/EntityPage/EntityPage.tsx b/plugins/qeta/src/components/EntityPage/EntityPage.tsx index 74ad3393..82feea2b 100644 --- a/plugins/qeta/src/components/EntityPage/EntityPage.tsx +++ b/plugins/qeta/src/components/EntityPage/EntityPage.tsx @@ -12,8 +12,11 @@ import { useTranslation, WriteArticleButton, } from '@drodil/backstage-plugin-qeta-react'; -import { Card, CardContent, Grid, Typography } from '@material-ui/core'; -import Whatshot from '@material-ui/icons/Whatshot'; +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 Whatshot from '@mui/icons-material/Whatshot'; import { useApi } from '@backstage/core-plugin-api'; import { EntityResponse } from '@drodil/backstage-plugin-qeta-common'; import { EntityRefLink } from '@backstage/plugin-catalog-react'; @@ -47,7 +50,7 @@ export const EntityPage = () => { return ( - + @@ -75,7 +78,7 @@ export const EntityPage = () => { )} {entityRef ? : } - + {resp && ( <> diff --git a/plugins/qeta/src/components/FavoritePage/FavoritePage.tsx b/plugins/qeta/src/components/FavoritePage/FavoritePage.tsx index 10a06d16..6c9333e4 100644 --- a/plugins/qeta/src/components/FavoritePage/FavoritePage.tsx +++ b/plugins/qeta/src/components/FavoritePage/FavoritePage.tsx @@ -7,21 +7,21 @@ import { useTranslation, WriteArticleButton, } from '@drodil/backstage-plugin-qeta-react'; -import { Grid } from '@material-ui/core'; -import Whatshot from '@material-ui/icons/Whatshot'; +import Grid from '@mui/material/Grid'; +import Whatshot from '@mui/icons-material/Whatshot'; export const FavoritePage = () => { const { t } = useTranslation(); return ( - + - + { const { t } = useTranslation(); @@ -22,7 +22,7 @@ export const HomePage = () => { return ( - + @@ -47,7 +47,7 @@ export const HomePage = () => { - + diff --git a/plugins/qeta/src/components/ModeratorPage/ModeratorPage.tsx b/plugins/qeta/src/components/ModeratorPage/ModeratorPage.tsx index 259f43e3..17d50217 100644 --- a/plugins/qeta/src/components/ModeratorPage/ModeratorPage.tsx +++ b/plugins/qeta/src/components/ModeratorPage/ModeratorPage.tsx @@ -4,9 +4,11 @@ import { useIsModerator, useTranslation, } from '@drodil/backstage-plugin-qeta-react'; -import { Box, Tab } from '@material-ui/core'; +import Box from '@mui/material/Box'; +import Tab from '@mui/material/Tab'; import { ContentHeader } from '@backstage/core-components'; -import { Alert, TabContext, TabList, TabPanel } from '@material-ui/lab'; +import Alert from '@mui/material/Alert'; +import { TabContext, TabList, TabPanel } from '@mui/lab'; export const ModeratorPage = () => { const { isModerator } = useIsModerator(); diff --git a/plugins/qeta/src/components/QetaPage/QetaPage.tsx b/plugins/qeta/src/components/QetaPage/QetaPage.tsx index 94694e38..c1c0e653 100644 --- a/plugins/qeta/src/components/QetaPage/QetaPage.tsx +++ b/plugins/qeta/src/components/QetaPage/QetaPage.tsx @@ -1,5 +1,7 @@ import React, { ReactNode } from 'react'; -import { Box, Container, Grid } from '@material-ui/core'; +import Box from '@mui/material/Box'; +import Container from '@mui/material/Container'; +import Grid from '@mui/material/Grid'; import { Content, Header, Page } from '@backstage/core-components'; import { Route, Routes } from 'react-router-dom'; import { AskPage } from '../AskPage'; diff --git a/plugins/qeta/src/components/QuestionPage/QuestionPage.tsx b/plugins/qeta/src/components/QuestionPage/QuestionPage.tsx index 277505ad..0b48e176 100644 --- a/plugins/qeta/src/components/QuestionPage/QuestionPage.tsx +++ b/plugins/qeta/src/components/QuestionPage/QuestionPage.tsx @@ -1,12 +1,10 @@ -import React, { useEffect, useState } from 'react'; -import { - Box, - Divider, - FormControl, - Grid, - Select, - Typography, -} from '@material-ui/core'; +import React, { useCallback, useEffect, useMemo, useState } from 'react'; +import Box from '@mui/material/Box'; +import Divider from '@mui/material/Divider'; +import FormControl from '@mui/material/FormControl'; +import Grid from '@mui/material/Grid'; +import Skeleton from '@mui/material/Skeleton'; +import Typography from '@mui/material/Typography'; import { ContentHeader, WarningPanel } from '@backstage/core-components'; import { useParams } from 'react-router-dom'; import { @@ -28,8 +26,9 @@ import { PostResponse, QetaSignal, } from '@drodil/backstage-plugin-qeta-common'; -import { Skeleton } from '@material-ui/lab'; import { useSignal } from '@backstage/plugin-signals-react'; +import MenuItem from '@mui/material/MenuItem'; +import TextField from '@mui/material/TextField'; export const QuestionPage = () => { const { id } = useParams(); @@ -63,6 +62,51 @@ export const QuestionPage = () => { } }, [lastSignal]); + const sortAnswers = useCallback( + (a: Answer, b: Answer) => { + if (answerSort === 'default') { + return 1; + } + + const parts = answerSort.split('_'); + const field = parts[0]; + const order = parts[1]; + + let ret = -1; + switch (field) { + case 'created': + ret = a.created > b.created ? -1 : 1; + break; + case 'score': + ret = a.score > b.score ? -1 : 1; + break; + case 'author': + ret = a.author > b.author ? -1 : 1; + break; + case 'comments': + ret = (a.comments?.length ?? 0) > (b.comments?.length ?? 0) ? -1 : 1; + break; + case 'updated': + ret = (a.updated ?? a.created) > (b.updated ?? b.created) ? -1 : 1; + break; + default: + return 1; + } + + if (order === 'desc') { + ret *= -1; + } + return ret; + }, + [answerSort], + ); + + const allAnswers = (question?.answers ?? []).concat(newAnswers); + const sortedAnswers = useMemo( + () => allAnswers.sort(sortAnswers), + [allAnswers, sortAnswers], + ); + const onAnswerPost = (answer: AnswerResponse) => { setNewAnswers(newAnswers.concat([answer])); }; @@ -91,7 +135,7 @@ export const QuestionPage = () => { }; if (loading) { - return ; + return ; } if (error || question === undefined) { @@ -108,43 +152,6 @@ export const QuestionPage = () => { ); } - const sortAnswers = (a: Answer, b: Answer) => { - if (answerSort === 'default') { - return 1; - } - - const parts = answerSort.split('_'); - const field = parts[0]; - const order = parts[1]; - - let ret = -1; - switch (field) { - case 'created': - ret = a.created > b.created ? -1 : 1; - break; - case 'score': - ret = a.score > b.score ? -1 : 1; - break; - case 'author': - ret = a.author > b.author ? -1 : 1; - break; - case 'comments': - ret = (a.comments?.length ?? 0) > (b.comments?.length ?? 0) ? -1 : 1; - break; - case 'updated': - ret = (a.updated ?? a.created) > (b.updated ?? b.created) ? -1 : 1; - break; - default: - return 1; - } - - if (order === 'desc') { - ret *= -1; - } - return ret; - }; - - const allAnswers = (question.answers ?? []).concat(newAnswers); return ( <> { {allAnswers.length > 1 && ( - + + )} - {allAnswers.sort(sortAnswers).map(a => { + {sortedAnswers.map(a => { return ( diff --git a/plugins/qeta/src/components/QuestionsPage/QuestionsPage.tsx b/plugins/qeta/src/components/QuestionsPage/QuestionsPage.tsx index 339b8723..6e974e4b 100644 --- a/plugins/qeta/src/components/QuestionsPage/QuestionsPage.tsx +++ b/plugins/qeta/src/components/QuestionsPage/QuestionsPage.tsx @@ -10,8 +10,8 @@ import { } from '@drodil/backstage-plugin-qeta-react'; import { ContentHeader } from '@backstage/core-components'; import { filterTags } from '@drodil/backstage-plugin-qeta-common'; -import { Grid } from '@material-ui/core'; -import Whatshot from '@material-ui/icons/Whatshot'; +import Grid from '@mui/material/Grid'; +import Whatshot from '@mui/icons-material/Whatshot'; export const QuestionsPage = () => { const [searchParams] = useSearchParams(); @@ -28,13 +28,13 @@ export const QuestionsPage = () => { return ( - + - + { const { diff --git a/plugins/qeta/src/components/Statistics/StatisticsPage.tsx b/plugins/qeta/src/components/Statistics/StatisticsPage.tsx index 8cde9acd..f37d34ea 100644 --- a/plugins/qeta/src/components/Statistics/StatisticsPage.tsx +++ b/plugins/qeta/src/components/Statistics/StatisticsPage.tsx @@ -6,7 +6,7 @@ import { WriteArticleButton, } from '@drodil/backstage-plugin-qeta-react'; import { GlobalStatsContent } from './GlobalStatsContent'; -import { Grid } from '@material-ui/core'; +import Grid from '@mui/material/Grid'; export const StatisticsPage = () => { return ( diff --git a/plugins/qeta/src/components/TagPage/TagPage.tsx b/plugins/qeta/src/components/TagPage/TagPage.tsx index 81651341..bbacf51d 100644 --- a/plugins/qeta/src/components/TagPage/TagPage.tsx +++ b/plugins/qeta/src/components/TagPage/TagPage.tsx @@ -13,8 +13,11 @@ import { useTranslation, WriteArticleButton, } from '@drodil/backstage-plugin-qeta-react'; -import { Card, CardContent, Grid, Typography } from '@material-ui/core'; -import Whatshot from '@material-ui/icons/Whatshot'; +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 Whatshot from '@mui/icons-material/Whatshot'; import { useApi } from '@backstage/core-plugin-api'; import { TagResponse } from '@drodil/backstage-plugin-qeta-common'; @@ -40,7 +43,7 @@ export const TagPage = () => { return ( - + {tag && } @@ -65,7 +68,7 @@ export const TagPage = () => { )} {tag ? : } - + {resp && ( <> diff --git a/plugins/qeta/src/components/UserPage/UserPage.tsx b/plugins/qeta/src/components/UserPage/UserPage.tsx index a79a2247..4655b71c 100644 --- a/plugins/qeta/src/components/UserPage/UserPage.tsx +++ b/plugins/qeta/src/components/UserPage/UserPage.tsx @@ -12,9 +12,11 @@ import { useTranslation, WriteArticleButton, } from '@drodil/backstage-plugin-qeta-react'; -import { Box, Tab, Typography } from '@material-ui/core'; +import Box from '@mui/material/Box'; +import Tab from '@mui/material/Tab'; +import Typography from '@mui/material/Typography'; import { useEntityPresentation } from '@backstage/plugin-catalog-react'; -import { TabContext, TabList, TabPanel } from '@material-ui/lab'; +import { TabContext, TabList, TabPanel } from '@mui/lab'; import { UserStatsContent } from './UserStatsContent'; export const UserPage = () => { diff --git a/plugins/qeta/src/components/UserPage/UserStatsContent.tsx b/plugins/qeta/src/components/UserPage/UserStatsContent.tsx index dfe295d7..40b5e0e8 100644 --- a/plugins/qeta/src/components/UserPage/UserStatsContent.tsx +++ b/plugins/qeta/src/components/UserPage/UserStatsContent.tsx @@ -4,7 +4,9 @@ import { useQetaApi, } from '@drodil/backstage-plugin-qeta-react'; import React from 'react'; -import { Card, CardContent, Grid } from '@material-ui/core'; +import Card from '@mui/material/Card'; +import CardContent from '@mui/material/CardContent'; +import Grid from '@mui/material/Grid'; export const UserStatsContent = (props: { userRef: string }) => { const { diff --git a/plugins/qeta/src/components/WritePage/WritePage.tsx b/plugins/qeta/src/components/WritePage/WritePage.tsx index f5ec2c27..3e4ba1da 100644 --- a/plugins/qeta/src/components/WritePage/WritePage.tsx +++ b/plugins/qeta/src/components/WritePage/WritePage.tsx @@ -4,7 +4,7 @@ import { filterTags } from '@drodil/backstage-plugin-qeta-common'; import { PostForm, useTranslation } from '@drodil/backstage-plugin-qeta-react'; import { useEntityPresentation } from '@backstage/plugin-catalog-react'; import { ContentHeader, InfoCard } from '@backstage/core-components'; -import { Grid } from '@material-ui/core'; +import Grid from '@mui/material/Grid'; export const WritePage = () => { const { id } = useParams(); diff --git a/yarn.lock b/yarn.lock index fc631cbd..7f91a5d2 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4918,9 +4918,10 @@ __metadata: "@backstage/plugin-signals-react": "backstage:^" "@backstage/test-utils": "backstage:^" "@drodil/backstage-plugin-qeta-common": "workspace:^" - "@material-ui/core": "npm:^4.12.2" - "@material-ui/icons": "npm:^4.11.3" - "@material-ui/lab": "npm:4.0.0-alpha.61" + "@mui/icons-material": "npm:^5.15.14" + "@mui/lab": "npm:^5.0.0-alpha.169" + "@mui/material": "npm:^5.16.7" + "@mui/styles": "npm:^5.16.7" "@testing-library/dom": "npm:^10.4.0" "@testing-library/jest-dom": "npm:^5.10.1" "@testing-library/react": "npm:^16.0.1" @@ -4966,9 +4967,10 @@ __metadata: "@backstage/plugin-signals-react": "backstage:^" "@drodil/backstage-plugin-qeta-common": "workspace:^" "@drodil/backstage-plugin-qeta-react": "workspace:^" - "@material-ui/core": "npm:^4.12.2" - "@material-ui/icons": "npm:^4.11.3" - "@material-ui/lab": "npm:4.0.0-alpha.61" + "@mui/icons-material": "npm:^5.15.14" + "@mui/lab": "npm:^5.0.0-alpha.169" + "@mui/material": "npm:^5.16.7" + "@mui/styles": "npm:^5.16.7" "@testing-library/jest-dom": "npm:^6.1.3" cross-fetch: "npm:^3.1.5" react-use: "npm:^17.4.0" @@ -5049,7 +5051,7 @@ __metadata: languageName: node linkType: hard -"@emotion/hash@npm:^0.9.2": +"@emotion/hash@npm:^0.9.1, @emotion/hash@npm:^0.9.2": version: 0.9.2 resolution: "@emotion/hash@npm:0.9.2" checksum: 10c0/0dc254561a3cc0a06a10bbce7f6a997883fd240c8c1928b93713f803a2e9153a257a488537012efe89dbe1246f2abfe2add62cdb3471a13d67137fcb808e81c2 @@ -5541,6 +5543,44 @@ __metadata: languageName: node linkType: hard +"@floating-ui/core@npm:^1.6.0": + version: 1.6.8 + resolution: "@floating-ui/core@npm:1.6.8" + dependencies: + "@floating-ui/utils": "npm:^0.2.8" + checksum: 10c0/d6985462aeccae7b55a2d3f40571551c8c42bf820ae0a477fc40ef462e33edc4f3f5b7f11b100de77c9b58ecb581670c5c3f46d0af82b5e30aa185c735257eb9 + languageName: node + linkType: hard + +"@floating-ui/dom@npm:^1.0.0": + version: 1.6.12 + resolution: "@floating-ui/dom@npm:1.6.12" + dependencies: + "@floating-ui/core": "npm:^1.6.0" + "@floating-ui/utils": "npm:^0.2.8" + checksum: 10c0/c67b39862175b175c6ac299ea970f17a22c7482cfdf3b1bc79313407bf0880188b022b878953fa69d3ce166ff2bd9ae57c86043e5dd800c262b470d877591b7d + languageName: node + linkType: hard + +"@floating-ui/react-dom@npm:^2.0.8": + version: 2.1.2 + resolution: "@floating-ui/react-dom@npm:2.1.2" + dependencies: + "@floating-ui/dom": "npm:^1.0.0" + peerDependencies: + react: ">=16.8.0" + react-dom: ">=16.8.0" + checksum: 10c0/e855131c74e68cab505f7f44f92cd4e2efab1c125796db3116c54c0859323adae4bf697bf292ee83ac77b9335a41ad67852193d7aeace90aa2e1c4a640cafa60 + languageName: node + linkType: hard + +"@floating-ui/utils@npm:^0.2.8": + version: 0.2.8 + resolution: "@floating-ui/utils@npm:0.2.8" + checksum: 10c0/a8cee5f17406c900e1c3ef63e3ca89b35e7a2ed645418459a73627b93b7377477fc888081011c6cd177cac45ec2b92a6cab018c14ea140519465498dddd2d3f9 + languageName: node + linkType: hard + "@google-cloud/firestore@npm:^7.0.0": version: 7.10.0 resolution: "@google-cloud/firestore@npm:7.10.0" @@ -6272,7 +6312,7 @@ __metadata: languageName: node linkType: hard -"@material-ui/icons@npm:^4.11.3, @material-ui/icons@npm:^4.9.1": +"@material-ui/icons@npm:^4.9.1": version: 4.11.3 resolution: "@material-ui/icons@npm:4.11.3" dependencies: @@ -6605,6 +6645,28 @@ __metadata: languageName: node linkType: hard +"@mui/base@npm:5.0.0-beta.40": + version: 5.0.0-beta.40 + resolution: "@mui/base@npm:5.0.0-beta.40" + dependencies: + "@babel/runtime": "npm:^7.23.9" + "@floating-ui/react-dom": "npm:^2.0.8" + "@mui/types": "npm:^7.2.14" + "@mui/utils": "npm:^5.15.14" + "@popperjs/core": "npm:^2.11.8" + clsx: "npm:^2.1.0" + prop-types: "npm:^15.8.1" + peerDependencies: + "@types/react": ^17.0.0 || ^18.0.0 + react: ^17.0.0 || ^18.0.0 + react-dom: ^17.0.0 || ^18.0.0 + peerDependenciesMeta: + "@types/react": + optional: true + checksum: 10c0/631b4ee389e23d82c16c5845c2849af43000f52f1def639b9bb5bf39fd09f4eab93787d32950b715a7de7b689faab53bb7c9a78f6fd12b663876cf8128d45de1 + languageName: node + linkType: hard + "@mui/core-downloads-tracker@npm:^5.16.7": version: 5.16.7 resolution: "@mui/core-downloads-tracker@npm:5.16.7" @@ -6612,7 +6674,52 @@ __metadata: languageName: node linkType: hard -"@mui/material@npm:^5.12.2": +"@mui/icons-material@npm:^5.15.14": + version: 5.16.7 + resolution: "@mui/icons-material@npm:5.16.7" + dependencies: + "@babel/runtime": "npm:^7.23.9" + peerDependencies: + "@mui/material": ^5.0.0 + "@types/react": ^17.0.0 || ^18.0.0 + react: ^17.0.0 || ^18.0.0 + peerDependenciesMeta: + "@types/react": + optional: true + checksum: 10c0/49bab1754334798acaf93187d27200cf90d7c50b6a019531594aeac9e5ced9168281fec70bb040792dc86c8bc0d3bf9a876f22cfbf86ad07941ca6bc6c564921 + languageName: node + linkType: hard + +"@mui/lab@npm:^5.0.0-alpha.169": + version: 5.0.0-alpha.173 + resolution: "@mui/lab@npm:5.0.0-alpha.173" + dependencies: + "@babel/runtime": "npm:^7.23.9" + "@mui/base": "npm:5.0.0-beta.40" + "@mui/system": "npm:^5.16.5" + "@mui/types": "npm:^7.2.15" + "@mui/utils": "npm:^5.16.5" + clsx: "npm:^2.1.0" + prop-types: "npm:^15.8.1" + peerDependencies: + "@emotion/react": ^11.5.0 + "@emotion/styled": ^11.3.0 + "@mui/material": ">=5.15.0" + "@types/react": ^17.0.0 || ^18.0.0 + react: ^17.0.0 || ^18.0.0 + react-dom: ^17.0.0 || ^18.0.0 + peerDependenciesMeta: + "@emotion/react": + optional: true + "@emotion/styled": + optional: true + "@types/react": + optional: true + checksum: 10c0/2ecd7da650bb5dab84035360621c2657dcd82f397e01044259b4373d54e1ecd12a8c2bc31163d0ce28f62276df208b50a6739ce8537552ec45e1005d24ba8080 + languageName: node + linkType: hard + +"@mui/material@npm:^5.12.2, @mui/material@npm:^5.16.7": version: 5.16.7 resolution: "@mui/material@npm:5.16.7" dependencies: @@ -6683,7 +6790,38 @@ __metadata: languageName: node linkType: hard -"@mui/system@npm:^5.16.7": +"@mui/styles@npm:^5.16.7": + version: 5.16.7 + resolution: "@mui/styles@npm:5.16.7" + dependencies: + "@babel/runtime": "npm:^7.23.9" + "@emotion/hash": "npm:^0.9.1" + "@mui/private-theming": "npm:^5.16.6" + "@mui/types": "npm:^7.2.15" + "@mui/utils": "npm:^5.16.6" + clsx: "npm:^2.1.0" + csstype: "npm:^3.1.3" + hoist-non-react-statics: "npm:^3.3.2" + jss: "npm:^10.10.0" + jss-plugin-camel-case: "npm:^10.10.0" + jss-plugin-default-unit: "npm:^10.10.0" + jss-plugin-global: "npm:^10.10.0" + jss-plugin-nested: "npm:^10.10.0" + jss-plugin-props-sort: "npm:^10.10.0" + jss-plugin-rule-value-function: "npm:^10.10.0" + jss-plugin-vendor-prefixer: "npm:^10.10.0" + prop-types: "npm:^15.8.1" + peerDependencies: + "@types/react": ^17.0.0 || ^18.0.0 + react: ^17.0.0 + peerDependenciesMeta: + "@types/react": + optional: true + checksum: 10c0/545e96ce5955c1cfee8ba3642e121acd3fcb9af0cd515c2748729d8d36758f26eb44c36d8ab95fe9fb040d29d40fc234c6f402c60f7fbd65d902e85e5154929f + languageName: node + linkType: hard + +"@mui/system@npm:^5.16.5, @mui/system@npm:^5.16.7": version: 5.16.7 resolution: "@mui/system@npm:5.16.7" dependencies: @@ -6711,6 +6849,18 @@ __metadata: languageName: node linkType: hard +"@mui/types@npm:^7.2.14": + version: 7.2.19 + resolution: "@mui/types@npm:7.2.19" + peerDependencies: + "@types/react": ^17.0.0 || ^18.0.0 || ^19.0.0 + peerDependenciesMeta: + "@types/react": + optional: true + checksum: 10c0/9c390d7eddc7e7c396852202fdca021aee275391bc7f48d0b6458748bf75eebb34c73109958692655ba5e72946cf47db2c0c7d2e1c26be568599ed65c931d080 + languageName: node + linkType: hard + "@mui/types@npm:^7.2.15": version: 7.2.16 resolution: "@mui/types@npm:7.2.16" @@ -6723,7 +6873,7 @@ __metadata: languageName: node linkType: hard -"@mui/utils@npm:^5.14.15, @mui/utils@npm:^5.16.6": +"@mui/utils@npm:^5.14.15, @mui/utils@npm:^5.15.14, @mui/utils@npm:^5.16.5, @mui/utils@npm:^5.16.6": version: 5.16.6 resolution: "@mui/utils@npm:5.16.6" dependencies: @@ -19036,7 +19186,7 @@ __metadata: languageName: node linkType: hard -"jss-plugin-camel-case@npm:^10.5.1": +"jss-plugin-camel-case@npm:^10.10.0, jss-plugin-camel-case@npm:^10.5.1": version: 10.10.0 resolution: "jss-plugin-camel-case@npm:10.10.0" dependencies: @@ -19047,7 +19197,7 @@ __metadata: languageName: node linkType: hard -"jss-plugin-default-unit@npm:^10.5.1": +"jss-plugin-default-unit@npm:^10.10.0, jss-plugin-default-unit@npm:^10.5.1": version: 10.10.0 resolution: "jss-plugin-default-unit@npm:10.10.0" dependencies: @@ -19057,7 +19207,7 @@ __metadata: languageName: node linkType: hard -"jss-plugin-global@npm:^10.5.1": +"jss-plugin-global@npm:^10.10.0, jss-plugin-global@npm:^10.5.1": version: 10.10.0 resolution: "jss-plugin-global@npm:10.10.0" dependencies: @@ -19067,7 +19217,7 @@ __metadata: languageName: node linkType: hard -"jss-plugin-nested@npm:^10.5.1": +"jss-plugin-nested@npm:^10.10.0, jss-plugin-nested@npm:^10.5.1": version: 10.10.0 resolution: "jss-plugin-nested@npm:10.10.0" dependencies: @@ -19078,7 +19228,7 @@ __metadata: languageName: node linkType: hard -"jss-plugin-props-sort@npm:^10.5.1": +"jss-plugin-props-sort@npm:^10.10.0, jss-plugin-props-sort@npm:^10.5.1": version: 10.10.0 resolution: "jss-plugin-props-sort@npm:10.10.0" dependencies: @@ -19088,7 +19238,7 @@ __metadata: languageName: node linkType: hard -"jss-plugin-rule-value-function@npm:^10.5.1": +"jss-plugin-rule-value-function@npm:^10.10.0, jss-plugin-rule-value-function@npm:^10.5.1": version: 10.10.0 resolution: "jss-plugin-rule-value-function@npm:10.10.0" dependencies: @@ -19099,7 +19249,7 @@ __metadata: languageName: node linkType: hard -"jss-plugin-vendor-prefixer@npm:^10.5.1": +"jss-plugin-vendor-prefixer@npm:^10.10.0, jss-plugin-vendor-prefixer@npm:^10.5.1": version: 10.10.0 resolution: "jss-plugin-vendor-prefixer@npm:10.10.0" dependencies: @@ -19110,7 +19260,7 @@ __metadata: languageName: node linkType: hard -"jss@npm:10.10.0, jss@npm:^10.5.1": +"jss@npm:10.10.0, jss@npm:^10.10.0, jss@npm:^10.5.1": version: 10.10.0 resolution: "jss@npm:10.10.0" dependencies: