chore(topology): add already used Material UI v4 and mobx-react dependency to resolve linter issues (#8359)

Signed-off-by: Christoph Jerolimov <jerolimov+git@redhat.com>

Author: christoph-jerolimov

workspaces/topology/.changeset/eleven-ghosts-play.md

@@ -0,0 +1,5 @@
+---
+'@backstage-community/plugin-topology': patch
+---
+
+Add (already used) Material UI v4 and mobx-react dependency to resolve linter issues.

workspaces/topology/plugins/topology/knip-report.md

@@ -4,14 +4,6 @@
 
 | Name         | Location          | Severity |
 | :----------- | :---------------- | :------- |
-| style-inject | package.json:73:6 | error    |
-| victory      | package.json:74:6 | error    |
-
-## Unlisted dependencies (3)
-
-| Name              | Location                                    | Severity |
-| :---------------- | :------------------------------------------ | :------- |
-| @material-ui/core | src/components/common/StatusIconAndText.tsx | error    |
-| mobx-react        | src/components/Graph/EdgeConnect.tsx        | error    |
-| @material-ui/core | src/components/common/Status.tsx            | error    |
+| style-inject | package.json:75:6 | error    |
+| victory      | package.json:76:6 | error    |
 

workspaces/topology/plugins/topology/package.json

@@ -56,6 +56,7 @@
     "@backstage/plugin-permission-react": "^0.4.41",
     "@backstage/theme": "^0.7.2",
     "@kubernetes/client-node": "1.4.0",
+    "@material-ui/core": "^4.12.4",
     "@mui/icons-material": "5.18.0",
     "@mui/lab": "5.0.0-alpha.177",
     "@mui/material": "^5.15.17",
@@ -69,6 +70,7 @@
     "git-url-parse": "^13.1.0",
     "js-yaml": "^4.1.0",
     "lodash": "^4.17.21",
+    "mobx-react": "^7.6.0",
     "react-use": "^17.4.0",
     "style-inject": "^0.3.0",
     "victory": "^37.3.6"

workspaces/topology/plugins/topology/src/components/Graph/decorators/Decorator.tsx

@@ -13,7 +13,6 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import * as React from 'react';
 import { Link } from 'react-router-dom';
 
 import { Decorator as PfDecorator } from '@patternfly/react-topology';

workspaces/topology/plugins/topology/src/components/Topology/TopologySideBar/PodLogs/PodLogsDialog.tsx

@@ -13,9 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { useState } from 'react';
-
-import * as React from 'react';
+import { useContext, useEffect, useState } from 'react';
 
 import { ErrorBoundary } from '@backstage/core-components';
 import { RequirePermission } from '@backstage/plugin-permission-react';
@@ -50,7 +48,7 @@ type ViewLogsProps = {
 };
 
 const ViewLogs = ({ podData, onClose }: ViewLogsProps) => {
-  const { clusters, selectedCluster } = React.useContext(K8sResourcesContext);
+  const { clusters, selectedCluster } = useContext(K8sResourcesContext);
   const [logText, setLogText] = useState<string>('');
 
   const curCluster =
@@ -63,8 +61,8 @@ const ViewLogs = ({ podData, onClose }: ViewLogsProps) => {
     (containersList?.length && (containersList?.[0].name ?? '')) || '';
 
   const [containerSelected, setContainerSelected] =
-    React.useState<string>(curContainer);
-  const [podScope, setPodScope] = React.useState<ContainerScope>({
+    useState<string>(curContainer);
+  const [podScope, setPodScope] = useState<ContainerScope>({
     containerName: curContainer,
     podName,
     podNamespace: podNamespace,
@@ -75,7 +73,7 @@ const ViewLogs = ({ podData, onClose }: ViewLogsProps) => {
     setContainerSelected(event.target.value);
   };
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (containerSelected) {
       setPodScope(ps => ({
         ...ps,
@@ -146,7 +144,7 @@ const ViewLogs = ({ podData, onClose }: ViewLogsProps) => {
 
 export const PodLogsDialog = ({ podData }: PodLogsDialogProps) => {
   const { t } = useTranslation();
-  const { clusters, selectedCluster } = React.useContext(K8sResourcesContext);
+  const { clusters, selectedCluster } = useContext(K8sResourcesContext);
   const [open, setOpen] = useState<boolean>(false);
 
   const curCluster =

workspaces/topology/plugins/topology/src/components/common/Status.tsx

@@ -24,7 +24,7 @@ import {
   StatusWarning,
 } from '@backstage/core-components';
 
-import { createStyles, makeStyles, Theme } from '@material-ui/core';
+import { createStyles, makeStyles, Theme } from '@material-ui/core/styles';
 import OffIcon from '@mui/icons-material/DoNotDisturbOnOutlined';
 import UnknownIcon from '@mui/icons-material/HelpOutline';
 import AngleDoubleRightIcon from '@mui/icons-material/KeyboardDoubleArrowRight';

workspaces/topology/yarn.lock

@@ -1414,6 +1414,7 @@ __metadata:
     "@backstage/test-utils": "npm:^1.7.16"
     "@backstage/theme": "npm:^0.7.2"
     "@kubernetes/client-node": "npm:1.4.0"
+    "@material-ui/core": "npm:^4.12.4"
     "@mui/icons-material": "npm:5.18.0"
     "@mui/lab": "npm:5.0.0-alpha.177"
     "@mui/material": "npm:^5.15.17"
@@ -1435,6 +1436,7 @@ __metadata:
     glob: "npm:^13.0.0"
     js-yaml: "npm:^4.1.0"
     lodash: "npm:^4.17.21"
+    mobx-react: "npm:^7.6.0"
     react: "npm:^18.3.1"
     react-dom: "npm:^18.3.1"
     react-router-dom: "npm:^6.26.2"