Merge pull request #3573 from dlabrecq/xstate

Remove the xState package
project-koku · Dec 12, 2023 · e8b7600 · e8b7600
2 parents e985b09 + be71b2b
commit e8b7600
Show file tree

Hide file tree

Showing 10 changed files with 97 additions and 388 deletions.
diff --git a/.../components/hoc/withStateMachine.test.tsx → .../components/hoc/withStateMachine.test.tsx b/.../components/hoc/withStateMachine.test.tsx → .../components/hoc/withStateMachine.test.tsx
diff --git a/...odels/components/hoc/withStateMachine.tsx → ...odels/components/hoc/withStateMachine.tsx b/...odels/components/hoc/withStateMachine.tsx → ...odels/components/hoc/withStateMachine.tsx
diff --git a/...ponents/logic/selectStateMachine.test.tsx → ...ponents/logic/selectStateMachine.test.tsx b/...ponents/logic/selectStateMachine.test.tsx → ...ponents/logic/selectStateMachine.test.tsx
diff --git a/...ls/components/logic/selectStateMachine.ts → ...ls/components/logic/selectStateMachine.ts b/...ls/components/logic/selectStateMachine.ts → ...ls/components/logic/selectStateMachine.ts
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -72,13 +72,12 @@
     "react-dom": "^18.2.0",
     "react-intl": "^6.5.5",
     "react-redux": "^8.1.3",
-    "react-router-dom": "^6.20.0",
+    "react-router-dom": "^6.20.1",
     "redux": "^4.2.1",
     "redux-thunk": "^2.4.2",
     "typesafe-actions": "^5.1.0",
     "unleash-proxy-client": "^3.2.0",
     "victory-core": "^36.7.0",
-    "xstate": "^4.38.3",
     "yaml": "^2.3.4"
   },
   "devDependencies": {
@@ -92,11 +91,11 @@
     "@testing-library/user-event": "^14.5.1",
     "@types/jest": "^29.5.11",
     "@types/qs": "^6.9.10",
-    "@types/react": "^18.2.39",
+    "@types/react": "^18.2.43",
     "@types/react-dom": "^18.2.17",
-    "@types/react-redux": "^7.1.31",
+    "@types/react-redux": "^7.1.32",
     "@types/react-router-dom": "^5.3.3",
-    "@typescript-eslint/eslint-plugin": "^6.13.2",
+    "@typescript-eslint/eslint-plugin": "^6.14.0",
     "@typescript-eslint/parser": "^6.14.0",
     "@xstate/test": "^0.5.1",
     "aphrodite": "^2.4.0",
@@ -124,7 +123,8 @@
     "typescript": "^5.3.3",
     "webpack-bundle-analyzer": "^4.10.1"
   },
-  "overrides": {},
+  "overrides": {
+  },
   "insights": {
     "appname": "cost-management"
   }

diff --git a/src/app.tsx b/src/app.tsx
@@ -5,7 +5,6 @@ import NotificationsPortal from '@redhat-cloud-services/frontend-components-noti
 import { notificationsReducer } from '@redhat-cloud-services/frontend-components-notifications/redux';
 import { getRegistry } from '@redhat-cloud-services/frontend-components-utilities/Registry';
 import React, { useEffect, useLayoutEffect } from 'react';
-import type { Reducer } from 'redux';
 import { invalidateSession } from 'utils/localStorage';
 
 import pkg from '../package.json';
@@ -17,7 +16,7 @@ const App = () => {
 
   useEffect(() => {
     const registry = getRegistry();
-    registry.register({ notifications: notificationsReducer as Reducer });
+    registry.register({ notifications: notificationsReducer as any });
 
     // You can use directly the name of your app
     updateDocumentTitle(pkg.insights.appname);

diff --git a/...outes/settings/costModels/components/logic/__snapshots__/selectStateMachine.test.tsx.snap b/...outes/settings/costModels/components/logic/__snapshots__/selectStateMachine.test.tsx.snap
diff --git a/src/routes/settings/costModels/components/toolbar/checkboxSelector.tsx b/src/routes/settings/costModels/components/toolbar/checkboxSelector.tsx
@@ -1,7 +1,6 @@
 import { Select, SelectOption, SelectVariant } from '@patternfly/react-core/deprecated';
 import React from 'react';
-import { WithStateMachine } from 'routes/settings/costModels/components/hoc/withStateMachine';
-import { selectMachineState } from 'routes/settings/costModels/components/logic/selectStateMachine';
+import { useState } from 'react';
 import type { Option } from 'routes/settings/costModels/components/logic/types';
 
 interface CheckboxSelectorProps {
@@ -19,37 +18,28 @@ export const CheckboxSelector: React.FC<CheckboxSelectorProps> = ({
   selections,
   isDisabled,
 }) => {
+  const [isOpen, setIsOpen] = useState(false);
+
   return (
-    <WithStateMachine
-      machine={selectMachineState.withConfig({
-        actions: {
-          assignSelection: (_ctx, evt) => {
-            setSelections(evt.selection);
-          },
-        },
-      })}
+    <Select
+      isDisabled={isDisabled}
+      isOpen={isOpen}
+      placeholderText={placeholderText}
+      onSelect={(_evt, sel: string) => {
+        setSelections(sel);
+        setIsOpen(false);
+      }}
+      onToggle={() => setIsOpen(!isOpen)}
+      selections={selections}
+      variant={SelectVariant.checkbox}
     >
-      {({ send, current }) => {
+      {options.map(opt => {
         return (
-          <Select
-            isDisabled={isDisabled}
-            variant={SelectVariant.checkbox}
-            placeholderText={placeholderText}
-            selections={selections}
-            isOpen={current.matches('expanded')}
-            onSelect={(_evt, selection) => send({ type: 'SELECT', selection })}
-            onToggle={() => send({ type: 'TOGGLE' })}
-          >
-            {options.map(opt => {
-              return (
-                <SelectOption key={opt.value} value={opt.value}>
-                  {opt.label}
-                </SelectOption>
-              );
-            })}
-          </Select>
+          <SelectOption key={opt.value} value={opt.value}>
+            {opt.label}
+          </SelectOption>
         );
-      }}
-    </WithStateMachine>
+      })}
+    </Select>
   );
 };
diff --git a/src/routes/settings/costModels/components/toolbar/primarySelector.tsx b/src/routes/settings/costModels/components/toolbar/primarySelector.tsx
@@ -1,8 +1,6 @@
 import { Select, SelectOption } from '@patternfly/react-core/deprecated';
 import { FilterIcon } from '@patternfly/react-icons/dist/esm/icons/filter-icon';
-import React from 'react';
-import { WithStateMachine } from 'routes/settings/costModels/components/hoc/withStateMachine';
-import { selectMachineState } from 'routes/settings/costModels/components/logic/selectStateMachine';
+import React, { useState } from 'react';
 import type { Option } from 'routes/settings/costModels/components/logic/types';
 
 export interface PrimarySelectorProps {
@@ -13,36 +11,27 @@ export interface PrimarySelectorProps {
 }
 
 export const PrimarySelector: React.FC<PrimarySelectorProps> = ({ setPrimary, primary, options, isDisabled }) => {
+  const [isOpen, setIsOpen] = useState(false);
+
   return (
-    <WithStateMachine
-      machine={selectMachineState.withConfig({
-        actions: {
-          assignSelection: (_ctx, evt) => {
-            setPrimary(evt.selection);
-          },
-        },
-      })}
+    <Select
+      isDisabled={isDisabled}
+      isOpen={isOpen}
+      onSelect={(_evt, sel: string) => {
+        setPrimary(sel);
+        setIsOpen(false);
+      }}
+      onToggle={() => setIsOpen(!isOpen)}
+      selections={primary}
+      toggleIcon={<FilterIcon />}
     >
-      {({ current, send }) => {
+      {options.map(opt => {
         return (
-          <Select
-            isDisabled={isDisabled}
-            toggleIcon={<FilterIcon />}
-            isOpen={current.matches('expanded')}
-            selections={primary}
-            onSelect={(_evt, selection: string) => send({ type: 'SELECT', selection })}
-            onToggle={() => send({ type: 'TOGGLE' })}
-          >
-            {options.map(opt => {
-              return (
-                <SelectOption key={opt.value} value={opt.value}>
-                  {opt.label}
-                </SelectOption>
-              );
-            })}
-          </Select>
+          <SelectOption key={opt.value} value={opt.value}>
+            {opt.label}
+          </SelectOption>
         );
-      }}
-    </WithStateMachine>
+      })}
+    </Select>
   );
 };