fix(refactor): remove direct imports from mui (#855)

eclipse-tractusx · Jun 3, 2024 · 992dd2e · 992dd2e
1 parent 45f5ffd
commit 992dd2e
Show file tree

Hide file tree

Showing 22 changed files with 101 additions and 45 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -8,6 +8,8 @@
   - Fix consistency issue in overlays where form input is used
 - Company Wallet
   - Use appropriate path to display logo on cards
+- Refactor
+  - Remove unnecessary import of Typography, Dialog and Circular Progress from mui and use those from shared-components
 - Connector Management
   - fetch details using api, added permissions and fixed error messages
 - App Release Process

diff --git a/DEPENDENCIES b/DEPENDENCIES
@@ -599,7 +599,7 @@ npm/npmjs/@babel/template/7.24.0, MIT, approved, clearlydefined
 npm/npmjs/@babel/traverse/7.24.1, MIT AND (BSD-2-Clause AND ISC AND MIT) AND BSD-2-Clause AND BSD-3-Clause, approved, #13926
 npm/npmjs/@babel/types/7.24.0, MIT, approved, clearlydefined
 npm/npmjs/@bcoe/v8-coverage/0.2.3, ISC AND MIT, approved, clearlydefined
-npm/npmjs/@catena-x/portal-shared-components/3.0.16, Apache-2.0 AND CC-BY-4.0 AND OFL-1.1, approved, #14247
+npm/npmjs/@catena-x/portal-shared-components/3.0.17, Apache-2.0 AND CC-BY-4.0 AND OFL-1.1, approved, #14247
 npm/npmjs/@cspotcode/source-map-support/0.8.1, MIT, approved, clearlydefined
 npm/npmjs/@date-io/core/3.0.0, MIT, approved, clearlydefined
 npm/npmjs/@date-io/date-fns/3.0.0, MIT, approved, #14023

diff --git a/package.json b/package.json
@@ -27,7 +27,7 @@
     ]
   },
   "dependencies": {
-    "@catena-x/portal-shared-components": "^3.0.16",
+    "@catena-x/portal-shared-components": "^3.0.17",
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.0",
     "@hookform/error-message": "^2.0.1",

diff --git a/src/components/overlays/UpdateCertificate/index.tsx b/src/components/overlays/UpdateCertificate/index.tsx
@@ -32,8 +32,9 @@ import {
   Typography,
   SelectList,
   Tooltips,
+  Dialog,
 } from '@catena-x/portal-shared-components'
-import { Box, Dialog } from '@mui/material'
+import { Box } from '@mui/material'
 import CheckCircleOutlineIcon from '@mui/icons-material/CheckCircleOutline'
 import PendingOutlinedIcon from '@mui/icons-material/PendingOutlined'
 import { OVERLAYS } from 'types/Constants'

diff --git a/src/components/pages/Admin/components/RegistrationRequests/CompanyDetailOverlay/index.tsx b/src/components/pages/Admin/components/RegistrationRequests/CompanyDetailOverlay/index.tsx
@@ -33,8 +33,9 @@ import {
   DropPreviewFile,
   UploadStatus,
   DialogActions,
+  CircleProgress,
 } from '@catena-x/portal-shared-components'
-import { Box, useTheme, CircularProgress } from '@mui/material'
+import { Box, useTheme } from '@mui/material'
 import { useSelector } from 'react-redux'
 import { adminRegistrationSelector } from 'features/admin/registration/slice'
 import {
@@ -320,8 +321,10 @@ const CompanyDetailOverlay = ({
               padding: '30px',
             }}
           >
-            <CircularProgress
+            <CircleProgress
               size={35}
+              variant="indeterminate"
+              colorVariant="primary"
               sx={{
                 color: theme.palette.primary.main,
                 zIndex: 1,

diff --git a/src/components/pages/AppMarketplace/components/AppListSection/index.tsx b/src/components/pages/AppMarketplace/components/AppListSection/index.tsx
@@ -18,8 +18,8 @@
  ********************************************************************************/
 
 import { useTranslation } from 'react-i18next'
-import { Typography } from '@catena-x/portal-shared-components'
-import { useTheme, CircularProgress } from '@mui/material'
+import { CircleProgress, Typography } from '@catena-x/portal-shared-components'
+import { useTheme } from '@mui/material'
 import { AppListGroupView } from '../AppListGroupView'
 import { useDispatch, useSelector } from 'react-redux'
 import { useNavigate } from 'react-router-dom'
@@ -83,7 +83,9 @@ export default function AppListSection() {
 
   const renderProgress = () => (
     <div style={{ textAlign: 'center' }}>
-      <CircularProgress
+      <CircleProgress
+        variant="indeterminate"
+        colorVariant="primary"
         size={50}
         sx={{
           color: theme.palette.primary.main,

diff --git a/src/components/pages/AppMarketplace/components/HeaderSection/index.tsx b/src/components/pages/AppMarketplace/components/HeaderSection/index.tsx
@@ -17,7 +17,7 @@
  * SPDX-License-Identifier: Apache-2.0
  ********************************************************************************/
 
-import { Typography } from '@mui/material'
+import { Typography } from '@catena-x/portal-shared-components'
 import { useTranslation } from 'react-i18next'
 
 export default function HeaderSection() {
@@ -26,8 +26,8 @@ export default function HeaderSection() {
   return (
     <section style={{ paddingBottom: 0, margin: '0 auto' }}>
       <Typography
-        sx={{ fontFamily: 'LibreFranklin-Light', fontSize: '25px' }}
-        variant="h3"
+        sx={{ fontSize: '25px' }}
+        variant="body1"
         className="section-title"
       >
         {t('content.appstore.appOverviewSection.title')}

diff --git a/src/components/pages/AppOverview/index.tsx b/src/components/pages/AppOverview/index.tsx
@@ -30,8 +30,9 @@ import {
   Cards,
   PageSnackbar,
   ErrorBar,
+  CircleProgress,
 } from '@catena-x/portal-shared-components'
-import { useTheme, CircularProgress, Box } from '@mui/material'
+import { useTheme, Box } from '@mui/material'
 import {
   appCardStatus,
   appCardRecentlyApps,
@@ -269,7 +270,9 @@ export default function AppOverview() {
         <div className="app-detail">
           {isFetching ? (
             <div style={{ textAlign: 'center' }}>
-              <CircularProgress
+              <CircleProgress
+                variant="indeterminate"
+                colorVariant="primary"
                 size={50}
                 sx={{
                   color: theme.palette.primary.main,

diff --git a/src/components/pages/DeleteCompany/index.tsx b/src/components/pages/DeleteCompany/index.tsx
@@ -19,12 +19,12 @@
 
 import { useEffect, useState } from 'react'
 import { Trans, useTranslation } from 'react-i18next'
-import { CircularProgress } from '@mui/material'
 import { uniqueId } from 'lodash'
 import CheckCircleOutlineIcon from '@mui/icons-material/CheckCircleOutline'
 import { getAssetBase } from 'services/EnvironmentService'
 import {
   Button,
+  CircleProgress,
   LoadingButton,
   Typography,
 } from '@catena-x/portal-shared-components'
@@ -85,7 +85,11 @@ export default function DeleteCompany() {
     <>
       {isLoading ? (
         <div className="loading">
-          <CircularProgress size={100} />
+          <CircleProgress
+            variant="indeterminate"
+            colorVariant="primary"
+            size={100}
+          />
         </div>
       ) : (
         <div

diff --git a/src/components/pages/IDPManagement/IDPList.tsx b/src/components/pages/IDPManagement/IDPList.tsx
@@ -21,10 +21,11 @@
 import { useState } from 'react'
 import { useDispatch } from 'react-redux'
 import { useTranslation } from 'react-i18next'
-import { CircularProgress, MenuItem } from '@mui/material'
+import { MenuItem } from '@mui/material'
 import ReportProblemIcon from '@mui/icons-material/ReportProblem'
 import './style.scss'
 import {
+  CircleProgress,
   DropdownMenu,
   StatusTag,
   Table,
@@ -173,7 +174,9 @@ export const IDPList = () => {
         >
           {ti('action.delete')}
           {deleteLoading && (
-            <CircularProgress
+            <CircleProgress
+              variant="indeterminate"
+              colorVariant="primary"
               size={15}
               sx={{
                 marginLeft: '5px',
@@ -226,7 +229,9 @@ export const IDPList = () => {
           >
             {idp.enabled ? ti('action.disable') : ti('action.enable')}
             {disableLoading && (
-              <CircularProgress
+              <CircleProgress
+                variant="indeterminate"
+                colorVariant="primary"
                 size={15}
                 sx={{
                   marginLeft: '5px',

diff --git a/src/components/pages/Organization/LoadingError.tsx b/src/components/pages/Organization/LoadingError.tsx
@@ -18,7 +18,8 @@
  * SPDX-License-Identifier: Apache-2.0
  ********************************************************************************/
 
-import { useTheme, CircularProgress } from '@mui/material'
+import { CircleProgress } from '@catena-x/portal-shared-components'
+import { useTheme } from '@mui/material'
 export default function LoadingError({
   isLoading,
   isError,
@@ -33,7 +34,9 @@ export default function LoadingError({
     <>
       {isLoading ? (
         <div className="organization-loader">
-          <CircularProgress
+          <CircleProgress
+            variant="indeterminate"
+            colorVariant="primary"
             size={50}
             sx={{
               color: theme.palette.primary.main,

diff --git a/src/components/pages/SemanticHub/ModelDetailDialog.tsx b/src/components/pages/SemanticHub/ModelDetailDialog.tsx
@@ -28,6 +28,7 @@ import {
   Input,
   Button,
   DialogActions,
+  CircleProgress,
 } from '@catena-x/portal-shared-components'
 import { semanticModelsSelector } from 'features/semanticModels/slice'
 import { useDispatch, useSelector } from 'react-redux'
@@ -38,7 +39,6 @@ import {
   Select,
   Divider,
   Box,
-  CircularProgress,
 } from '@mui/material'
 import { useTranslation } from 'react-i18next'
 import DownloadLink from './DownloadLink'
@@ -141,7 +141,12 @@ const ModelDetailDialog = ({ show, onClose }: ModelDetailDialogProps) => {
 
   const Loading = (
     <Box sx={{ textAlign: 'center' }}>
-      <CircularProgress size={35} sx={{ color: theme.palette.primary.main }} />
+      <CircleProgress
+        variant="indeterminate"
+        colorVariant="primary"
+        size={35}
+        sx={{ color: theme.palette.primary.main }}
+      />
     </Box>
   )
 

diff --git a/src/components/pages/SemanticHub/ModelImportDialog.tsx b/src/components/pages/SemanticHub/ModelImportDialog.tsx
@@ -27,6 +27,7 @@ import {
   Typography,
   Input,
   theme,
+  CircleProgress,
 } from '@catena-x/portal-shared-components'
 import { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -41,7 +42,6 @@ import {
   FormControl,
   Select,
   type SelectChangeEvent,
-  CircularProgress,
 } from '@mui/material'
 import type { AppDispatch } from 'features/store'
 
@@ -126,7 +126,9 @@ const ModelImportDialog = ({ show, onClose }: ModelDetailDialogProps) => {
         {error && <Typography color="error">{error}</Typography>}
         {uploading && (
           <Box sx={{ textAlign: 'center', mt: 2 }}>
-            <CircularProgress
+            <CircleProgress
+              variant="indeterminate"
+              colorVariant="primary"
               size={35}
               sx={{
                 color: theme.palette.primary.main,

diff --git a/src/components/pages/ServiceMarketplace/RecommendedServices.tsx b/src/components/pages/ServiceMarketplace/RecommendedServices.tsx
@@ -18,8 +18,11 @@
  * SPDX-License-Identifier: Apache-2.0
  ********************************************************************************/
 
-import { CardHorizontal } from '@catena-x/portal-shared-components'
-import { Grid, useTheme, CircularProgress } from '@mui/material'
+import {
+  CardHorizontal,
+  CircleProgress,
+} from '@catena-x/portal-shared-components'
+import { Grid, useTheme } from '@mui/material'
 import { useNavigate } from 'react-router-dom'
 import type { ServiceRequest } from 'features/serviceMarketplace/serviceApiSlice'
 import './ServiceMarketplace.scss'
@@ -86,7 +89,9 @@ export default function RecommendedServices({
         </Grid>
       ) : (
         <div className="loading-progress">
-          <CircularProgress
+          <CircleProgress
+            variant="indeterminate"
+            colorVariant="primary"
             size={50}
             sx={{
               color: theme.palette.primary.main,

diff --git a/src/components/pages/ServiceMarketplace/index.tsx b/src/components/pages/ServiceMarketplace/index.tsx
@@ -26,7 +26,7 @@ import {
   type ChangeEvent,
 } from 'react'
 import { useTranslation } from 'react-i18next'
-import { useTheme, CircularProgress } from '@mui/material'
+import { useTheme } from '@mui/material'
 import debounce from 'lodash.debounce'
 import ServicesElements from './ServicesElements'
 import RecommendedServices from './RecommendedServices'
@@ -40,6 +40,7 @@ import {
   Typography,
   ViewSelector,
   SortOption,
+  CircleProgress,
 } from '@catena-x/portal-shared-components'
 import {
   type ServiceRequest,
@@ -194,7 +195,9 @@ export default function ServiceMarketplace() {
             </div>
             {!services ? (
               <div className="loading-progress">
-                <CircularProgress
+                <CircleProgress
+                  variant="indeterminate"
+                  colorVariant="primary"
                   size={50}
                   sx={{
                     color: theme.palette.primary.main,

diff --git a/src/components/pages/ServiceReleaseProcess/components/ServiceListOverview.tsx b/src/components/pages/ServiceReleaseProcess/components/ServiceListOverview.tsx
@@ -30,6 +30,7 @@ import {
   type CardItems,
   PageSnackbar,
   ErrorBar,
+  CircleProgress,
 } from '@catena-x/portal-shared-components'
 import { serviceToCard } from 'features/apps/mapper'
 import { fetchImageWithToken } from 'services/ImageService'
@@ -52,7 +53,7 @@ import {
 import { useDispatch } from 'react-redux'
 import { setServiceReleaseActiveStep } from 'features/serviceManagement/slice'
 import { SuccessErrorType } from 'features/admin/appuserApiSlice'
-import { Box, useTheme, CircularProgress } from '@mui/material'
+import { Box, useTheme } from '@mui/material'
 import { initialState } from 'features/serviceManagement/types'
 
 enum ServiceSubMenuItems {
@@ -229,7 +230,9 @@ export default function ServiceListOverview() {
       <section>
         {isFetching ? (
           <div style={{ textAlign: 'center' }}>
-            <CircularProgress
+            <CircleProgress
+              variant="indeterminate"
+              colorVariant="primary"
               size={50}
               sx={{
                 color: theme.palette.primary.main,

diff --git a/src/components/pages/UsecaseParticipation/index.tsx b/src/components/pages/UsecaseParticipation/index.tsx
@@ -21,10 +21,11 @@ import { useEffect } from 'react'
 import { Link } from 'react-router-dom'
 import { useDispatch } from 'react-redux'
 import { useTranslation, Trans } from 'react-i18next'
-import { CircularProgress, useTheme } from '@mui/material'
+import { useTheme } from '@mui/material'
 import dayjs from 'dayjs'
 import {
   Chip,
+  CircleProgress,
   CustomAccordion,
   PageHeader,
   StatusTag,
@@ -188,7 +189,9 @@ export default function UsecaseParticipation() {
             <ul>
               {isLoading ? (
                 <div className="progress-main">
-                  <CircularProgress
+                  <CircleProgress
+                    variant="indeterminate"
+                    colorVariant="primary"
                     size={35}
                     sx={{
                       color: theme.palette.primary.main,

diff --git a/src/components/shared/templates/AdminBoard/AdminBoardElements.tsx b/src/components/shared/templates/AdminBoard/AdminBoardElements.tsx
@@ -20,11 +20,12 @@
 
 import {
   CardDecision,
+  CircleProgress,
   ErrorBar,
   PageSnackbar,
 } from '@catena-x/portal-shared-components'
 import { useDispatch, useSelector } from 'react-redux'
-import { useTheme, CircularProgress } from '@mui/material'
+import { useTheme } from '@mui/material'
 import { show } from 'features/control/overlay'
 import './AdminBoard.scss'
 import {
@@ -150,7 +151,9 @@ export default function AdminBoardElements({
         />
       ) : (
         <div className="loading-progress">
-          <CircularProgress
+          <CircleProgress
+            variant="indeterminate"
+            colorVariant="primary"
             size={50}
             sx={{
               color: theme.palette.primary.main,