addressed review comments

Author: Eswaraiahsapram

.changeset/ninety-news-boil.md

@@ -1,5 +1,5 @@
 ---
-"@aonic-ui/pipelines": major
+"@aonic-ui/pipelines": minor
 ---
 
 Added tekton and topology types, utils, hooks & components

packages/core/package.json

@@ -37,6 +37,19 @@
     "url": "https://github.com/redhat-developer/aonic-ui/issues"
   },
   "homepage": "https://github.com/redhat-developer/aonic-ui#readme",
+  "dependencies": {
+    "@backstage/catalog-model": "^1.7.3",
+    "@backstage/core-components": "^0.16.3",
+    "@backstage/core-plugin-api": "^1.10.3",
+    "@backstage/plugin-kubernetes-common": "^0.9.2",
+    "@backstage/plugin-kubernetes-react": "^0.5.3",
+    "@material-ui/core": "^4.12.4",
+    "@mui/icons-material": "5.15.17",
+    "@mui/material": "^5.15.17",
+    "classnames": "^2.3.2",
+    "lodash-es": "^4.17.21",
+    "react-use": "^17.5.0"
+  },
   "devDependencies": {
     "@aonic-ui/eslint-config": "*",
     "@aonic-ui/jest-config": "*",

packages/pipelines/src/components/common/CamelCaseWrap.tsx renamed to packages/core/src/components/common/CamelCaseWrap.tsx

@@ -37,27 +37,27 @@ const DASH = '-';
 const useStatusStyles = makeStyles((theme) => ({
   success: {
     '& svg': {
-      fill: theme.palette.status.ok,
+      fill: theme.palette.status?.ok || theme.palette.success?.main || '#4caf50',
     },
   },
   running: {
     '& svg': {
-      fill: theme.palette.status.running,
+      fill: theme.palette.status?.running || theme.palette.info?.main || '#2196f3',
     },
   },
   pending: {
     '& svg': {
-      fill: theme.palette.status.pending,
+      fill: theme.palette.status?.pending || theme.palette.warning?.main || '#ff9800',
     },
   },
   warning: {
     '& svg': {
-      fill: theme.palette.status.warning,
+      fill: theme.palette.status?.warning || theme.palette.warning?.main || '#ff9800',
     },
   },
   error: {
     '& svg': {
-      fill: theme.palette.status.error,
+      fill: theme.palette.status?.error || theme.palette.error?.main || '#f44336',
     },
   },
 }));
@@ -116,10 +116,10 @@ const StatusIcon = ({
 
  * @example
  * ```tsx
- * <StatusDisplay status='Warning' />
+ * <Status status='Warning' />
  * ```
  */
-export const StatusDisplay = ({
+export const Status = ({
   status,
   iconOnly,
   className,

packages/pipelines/src/components/common/Status.tsx renamed to packages/core/src/components/common/Status.tsx

@@ -1,3 +1,3 @@
 export { CamelCaseWrap } from './CamelCaseWrap';
-export { StatusDisplay } from './Status';
+export { Status } from './Status';
 export { StatusIconAndText } from './StatusIconAndText';

packages/pipelines/src/components/common/StatusIconAndText.tsx renamed to packages/core/src/components/common/StatusIconAndText.tsx

@@ -1 +1,2 @@
 export { default as Button } from './Button';
+export { Status, CamelCaseWrap, StatusIconAndText } from './common';

packages/pipelines/src/components/common/index.ts renamed to packages/core/src/components/common/index.ts

@@ -0,0 +1,3 @@
+export * from './useDebounceCallback';
+export * from './useKubernetesObjects';
+export * from './useDeepCompareMemoize';

packages/core/src/components/index.ts

@@ -1,8 +1,8 @@
 import React from 'react';
 
-import { debounce } from 'lodash';
+import { debounce } from 'lodash-es';
 
-import { useDeepCompareMemoize } from '../utils/common-utils';
+import { useDeepCompareMemoize } from './useDeepCompareMemoize';
 
 interface Cancelable {
   cancel(): void;

packages/core/src/hooks/index.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+
+import { isEqual } from 'lodash-es';
+
+export const useDeepCompareMemoize = <T = any>(
+  value: T,
+  stringify?: boolean,
+): T => {
+  const ref = React.useRef<T>();
+
+  if (
+    stringify
+      ? JSON.stringify(value) !== JSON.stringify(ref.current)
+      : !isEqual(value, ref.current)
+  ) {
+    ref.current = value;
+  }
+
+  return ref.current as T;
+};