Merge pull request #35 from batzionb/ECOPROJECT-1802

resolve ECOPROJECT-1802: compatibility issues with 4.15

package.json

@@ -24,11 +24,12 @@
     "@babel/preset-react": "^7.22.5",
     "@babel/preset-typescript": "^7.22.5",
     "@cypress/webpack-preprocessor": "^5.12.2",
-    "@openshift-console/dynamic-plugin-sdk": "0.0.12",
-    "@openshift-console/dynamic-plugin-sdk-internal": "0.0.11",
-    "@openshift-console/dynamic-plugin-sdk-webpack": "0.0.8",
-    "@patternfly/react-core": "4.276.6",
-    "@patternfly/react-table": "4.112.39",
+    "@openshift-console/dynamic-plugin-sdk": "0.0.21",
+    "@openshift-console/dynamic-plugin-sdk-internal": "0.0.12",
+    "@openshift-console/dynamic-plugin-sdk-webpack": "0.0.11",
+    "@patternfly/react-core": "4.276.8",
+    "@patternfly/react-icons": "^4.93.6",
+    "@patternfly/react-table": "4.113.0",
     "@patternfly/react-tokens": "4.94.6",
     "@storybook/addon-essentials": "^7.1.0",
     "@storybook/addon-interactions": "^7.1.0",
@@ -54,6 +55,7 @@
     "babel-loader": "^8.0.2",
     "copy-webpack-plugin": "6.4.1",
     "css-loader": "^6.7.1",
+    "cypress": "^10.6.0",
     "eslint": "^8.18.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-cypress": "^2.12.1",
@@ -70,8 +72,8 @@
     "react-dom": "^17.0.1",
     "react-helmet": "^6.1.0",
     "react-i18next": "^11.7.3",
-    "react-router": "5.2.0",
-    "react-router-dom": "5.2.0",
+    "react-router": "5.3.1",
+    "react-router-dom": "5.3.1",
     "sass": "^1.65.1",
     "showdown": "2.1.0",
     "storybook": "^7.1.0",
@@ -103,17 +105,12 @@
   },
   "dependencies": {
     "classnames": "2.2.6",
-    "cypress": "^10.6.0",
     "formik": "2.2.9",
     "fuzzysearch": "^1.0.3",
     "i18next": "^21.8.14",
-    "immutable": "4.0.0",
     "js-yaml": "4.1.0",
-    "json-schema": "^0.4.0",
     "lodash-es": "4.17.21",
-    "react-copy-to-clipboard": "^5.1.0",
     "react-linkify": "^1.0.0-alpha",
-    "react-measure": "^2.5.2",
     "react-tagsinput": "^3.19.0",
     "semver": "^7.3.7",
     "yup": "^0.32.11"

src/components/details/NodeHealthCheckDetailsPage.tsx

@@ -37,12 +37,7 @@ export const useNodeHealthCheckTabs = () => {
   return tabs;
 };
 
-const NodeHealthCheckDetailsPage_ = ({
-  match,
-}: {
-  match: { params: { name: string } };
-}) => {
-  const { name } = match.params;
+const NodeHealthCheckDetailsPage_ = ({ name }: { name: string }) => {
   const navigation = useNodeHealthCheckNavigation();
   const [nodeHealthCheck, loaded, loadError] =
     useK8sWatchResource<NodeHealthCheck>({

src/components/editor/NodeHealthCheckEditPage.tsx

@@ -5,18 +5,24 @@ import { NodeHealthCheck } from "data/types";
 import { useNodeHealthCheckTranslation } from "localization/useNodeHealthCheckTranslation";
 import * as React from "react";
 import { Helmet } from "react-helmet";
-import { RouteComponentProps } from "react-router";
 import NodeHealthCheckForm from "./NodeHealthCheckForm";
+import { useLocation } from "react-router";
+import { withFallback } from "../../copiedFromConsole/error";
 
-export type NodeHealthCheckEditPageProps = RouteComponentProps<{
-  name: string;
-}>;
+const getNHCNameFromUrl = (url: string) => {
+  const pathSegments = url.split("/");
+  const name = pathSegments[pathSegments.length - 2];
+  if (name) {
+    return name;
+  } else {
+    throw new Error(`URL ${url} doesn't contain the NodeHealthCheck name`);
+  }
+};
 
-const NodeHealthCheckEditPage: React.FC<NodeHealthCheckEditPageProps> = ({
-  match,
-}) => {
+const NodeHealthCheckEditPage_ = () => {
+  const location = useLocation();
+  const name = getNHCNameFromUrl(location.pathname);
   const { t } = useNodeHealthCheckTranslation();
-  const { name } = match.params;
   const [nodeHealthCheck, loaded, loadError] =
     useK8sWatchResource<NodeHealthCheck>({
       groupVersionKind: nodeHealthCheckKind,
@@ -41,5 +47,6 @@ const NodeHealthCheckEditPage: React.FC<NodeHealthCheckEditPageProps> = ({
     </StatusBox>
   );
 };
+const NodeHealthCheckEditPage = withFallback(NodeHealthCheckEditPage_);
 
 export default NodeHealthCheckEditPage;

src/components/editor/NodeHealthCheckSyncedEditor.tsx

@@ -71,7 +71,13 @@ export const NodeHealthCheckSyncedEditor: React.FC<
   const yamlEditor = <YamlEditorField fieldName="yamlData" />;
 
   const formEditor = (
-    <FormBody className="co-m-pane__form">
+    <FormBody
+      style={{
+        paddingLeft: "var(--pf-c-form--GridGap)",
+        paddingTop: "var(--pf-c-form--GridGap)",
+      }}
+      className="co-m-pane__form"
+    >
       <FormSection>
         {values.formParsingError ? (
           <Alert

src/copiedFromConsole/button-bar.jsx

@@ -1,7 +1,6 @@
 import * as _ from "lodash-es";
 import * as React from "react";
 import * as classNames from "classnames";
-import * as PropTypes from "prop-types";
 import { Alert, AlertGroup } from "@patternfly/react-core";
 import { useNodeHealthCheckTranslation } from "localization/useNodeHealthCheckTranslation";
 import { LoadingInline } from "./utils/status-box";
@@ -66,12 +65,3 @@ export const ButtonBar = ({
     </div>
   );
 };
-
-ButtonBar.propTypes = {
-  children: PropTypes.node.isRequired,
-  successMessage: PropTypes.string,
-  errorMessage: PropTypes.node,
-  infoMessage: PropTypes.string,
-  inProgress: PropTypes.bool,
-  className: PropTypes.string,
-};

src/copiedFromConsole/error/error-boundary.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
-import ErrorBoundaryFallbackPage from "./fallbacks/ErrorBoundaryFallbackPage";
 import { ErrorBoundaryFallbackProps } from "./types";
+import { ErrorBoundaryFallbackPage } from "@openshift-console/dynamic-plugin-sdk";
 
 type ErrorBoundaryProps = {
   FallbackComponent?: React.ComponentType<ErrorBoundaryFallbackProps>;

src/copiedFromConsole/error/fallbacks/ErrorBoundaryPage.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 import ErrorBoundary from "../error-boundary";
-import ErrorBoundaryFallbackPage from "./ErrorBoundaryFallbackPage";
+import { ErrorBoundaryFallbackPage } from "@openshift-console/dynamic-plugin-sdk";
 
 /**
  * Mount an error boundary that will render a full page error stack trace.

src/copiedFromConsole/error/index.ts

@@ -7,4 +7,3 @@ export { default as ErrorBoundaryPage } from "./fallbacks/ErrorBoundaryPage";
 
 // Custom fallback options
 export { default as withFallback } from "./fallbacks/withFallback";
-export { default as ErrorBoundaryFallbackPage } from "./fallbacks/ErrorBoundaryFallbackPage";

src/copiedFromConsole/form-utils/FormBody.tsx

@@ -19,11 +19,7 @@ const FormBody: React.FC<FormBodyProps & React.HTMLProps<HTMLDivElement>> = ({
 }) => (
   <div
     {...props}
-    className={classNames(
-      "pf-c-form",
-      { "co-m-pane__body": !disablePaneBody },
-      className
-    )}
+    className={classNames("pf-c-form", className)}
     style={
       flexLayout
         ? {

src/copiedFromConsole/form-utils/FormFooter.tsx

@@ -10,7 +10,6 @@ import * as cx from "classnames";
 import { useNodeHealthCheckTranslation } from "localization/useNodeHealthCheckTranslation";
 import { FormFooterProps } from "./form-utils-types";
 
-import "./FormFooter.scss";
 import { ButtonBar } from "../button-bar";
 import { Shadows, useScrollShadows } from "../hooks/useScrollShadows";
 import { useScrollContainer } from "../hooks/useScrollContainer";

src/copiedFromConsole/k8s/types.ts

@@ -1,5 +1,4 @@
 import { K8sResourceCommon } from "@openshift-console/dynamic-plugin-sdk";
-import { JSONSchema7 } from "json-schema";
 
 export enum K8sResourceConditionStatus {
   True = "True",
@@ -14,34 +13,6 @@ export type K8sResourceCondition = {
   message?: string;
 };
 
-export type CRDVersion = {
-  name: string;
-  served: boolean;
-  storage: boolean;
-  schema: {
-    // NOTE: Actually a subset of JSONSchema, but using this type for convenience
-    openAPIV3Schema: JSONSchema7;
-  };
-};
-
-export type CustomResourceDefinition = {
-  spec: {
-    group: string;
-    versions: CRDVersion[];
-    names: {
-      kind: string;
-      singular: string;
-      plural: string;
-      listKind: string;
-      shortNames?: string[];
-    };
-    scope: "Cluster" | "Namespaced";
-  };
-  status?: {
-    conditions?: K8sResourceCondition[];
-  };
-} & K8sResourceCommon;
-
 export type Descriptor<T = unknown> = {
   path: string;
   displayName: string;