chore: Refactor brand store state management (#4972)

static/js/brand-store/components/Navigation/Navigation.tsx

@@ -5,7 +5,8 @@ import { useParams, NavLink } from "react-router-dom";
 
 import Logo from "./Logo";
 
-import { publisherState, brandIdState } from "../../state/atoms";
+import { publisherState } from "../../state/publisherState";
+import { brandIdState } from "../../state/brandStoreState";
 import { brandStoresListSelector } from "../../state/selectors";
 import { useBrand, usePublisher } from "../../hooks";
 

static/js/brand-store/pages/AccountDetails/AccountDetails.tsx

@@ -11,7 +11,7 @@ import {
 
 import Navigation from "../../components/Navigation";
 
-import { publisherState } from "../../state/atoms";
+import { publisherState } from "../../state/publisherState";
 
 function AccountDetails(): ReactNode {
   const [subscriptionPreferencesChanged, setSubscriptionPreferencesChanged] =

static/js/brand-store/pages/AccountDetails/__tests__/AccountDetails.test.tsx

@@ -8,7 +8,7 @@ import { QueryClient, QueryClientProvider } from "react-query";
 import { useRecoilValue } from "recoil";
 import { store } from "../../../state/store";
 import AccountDetails from "../AccountDetails";
-import { publisherState } from "../../../state/atoms";
+import { publisherState } from "../../../state/publisherState";
 
 const queryClient = new QueryClient();
 

static/js/brand-store/pages/Model/CreatePolicyForm.tsx

@@ -16,9 +16,8 @@ import { useSigningKeys } from "../../hooks";
 import {
   signingKeysListState,
   newSigningKeyState,
-  brandIdState,
-} from "../../state/atoms";
-import { brandStoreState } from "../../state/selectors";
+} from "../../state/signingKeysState";
+import { brandIdState, brandStoreState } from "../../state/brandStoreState";
 
 type Props = {
   setShowNotification: Dispatch<SetStateAction<boolean>>;

static/js/brand-store/pages/Model/Model.tsx

@@ -12,8 +12,8 @@ import {
   Notification,
 } from "@canonical/react-components";
 
-import { modelsListState, brandIdState } from "../../state/atoms";
-import { currentModelState, brandStoreState } from "../../state/selectors";
+import { modelsListState, currentModelState } from "../../state/modelsState";
+import { brandIdState, brandStoreState } from "../../state/brandStoreState";
 
 import ModelNav from "./ModelNav";
 import ModelBreadcrumb from "./ModelBreadcrumb";

static/js/brand-store/pages/Model/Policies.tsx

@@ -25,11 +25,12 @@ import {
 import {
   policiesListFilterState,
   policiesListState,
+} from "../../state/policiesState";
+import {
   signingKeysListState,
   newSigningKeyState,
-  brandIdState,
-} from "../../state/atoms";
-import { brandStoreState } from "../../state/selectors";
+} from "../../state/signingKeysState";
+import { brandIdState, brandStoreState } from "../../state/brandStoreState";
 
 import { isClosedPanel, setPageTitle } from "../../utils";
 

static/js/brand-store/pages/Model/PoliciesTable.tsx

@@ -7,8 +7,8 @@ import { MainTable, Button, Modal, Icon } from "@canonical/react-components";
 import AppPagination from "../../components/AppPagination";
 
 import { usePolicies, UsePoliciesResponse } from "../../hooks";
-import { brandIdState } from "../../state/atoms";
-import { filteredPoliciesListState } from "../../state/selectors";
+import { brandIdState } from "../../state/brandStoreState";
+import { filteredPoliciesListState } from "../../state/policiesState";
 
 import type { Policy } from "../../types/shared";
 

static/js/brand-store/pages/Models/CreateModelForm.tsx

@@ -8,15 +8,15 @@ import randomstring from "randomstring";
 import { checkModelNameExists, setPageTitle } from "../../utils";
 
 import {
-  brandStoresState,
   modelsListState,
   newModelState,
-  brandIdState,
-} from "../../state/atoms";
-import {
   filteredModelsListState,
+} from "../../state/modelsState";
+import {
+  brandStoresState,
+  brandIdState,
   brandStoreState,
-} from "../../state/selectors";
+} from "../../state/brandStoreState";
 
 import type { Store, Model } from "../../types/shared";
 

static/js/brand-store/pages/Models/Models.tsx

@@ -13,11 +13,10 @@ import { UseQueryResult } from "react-query";
 import {
   modelsListFilterState,
   modelsListState,
-  policiesListState,
   newModelState,
-  brandIdState,
-} from "../../state/atoms";
-import { brandStoreState } from "../../state/selectors";
+} from "../../state/modelsState";
+import { policiesListState } from "../../state/policiesState";
+import { brandIdState, brandStoreState } from "../../state/brandStoreState";
 
 import Filter from "../../components/Filter";
 import ModelsTable from "./ModelsTable";

static/js/brand-store/pages/Models/ModelsTable.tsx

@@ -8,7 +8,7 @@ import AppPagination from "../../components/AppPagination";
 
 import { maskString } from "../../utils";
 
-import { filteredModelsListState } from "../../state/selectors";
+import { filteredModelsListState } from "../../state/modelsState";
 
 import type { Model as ModelType } from "../../types/shared";
 

static/js/brand-store/pages/SigningKeys/CreateSigningKeyForm.tsx

@@ -8,13 +8,10 @@ import { checkSigningKeyExists, setPageTitle } from "../../utils";
 
 import {
   signingKeysListState,
-  newSigningKeyState,
-  brandIdState,
-} from "../../state/atoms";
-import {
   filteredSigningKeysListState,
-  brandStoreState,
-} from "../../state/selectors";
+  newSigningKeyState,
+} from "../../state/signingKeysState";
+import { brandIdState, brandStoreState } from "../../state/brandStoreState";
 
 import type { SigningKey } from "../../types/shared";
 

static/js/brand-store/pages/SigningKeys/SigningKeys.tsx

@@ -14,11 +14,10 @@ import { useSigningKeys, useModels } from "../../hooks";
 import {
   signingKeysListState,
   signingKeysListFilterState,
-  policiesListState,
   newSigningKeyState,
-  brandIdState,
-} from "../../state/atoms";
-import { brandStoreState } from "../../state/selectors";
+} from "../../state/signingKeysState";
+import { policiesListState } from "../../state/policiesState";
+import { brandIdState, brandStoreState } from "../../state/brandStoreState";
 
 import Filter from "../../components/Filter";
 import SigningKeysTable from "./SigningKeysTable";

static/js/brand-store/pages/SigningKeys/SigningKeysTable.tsx

@@ -9,8 +9,11 @@ import DeactivateSigningKeyModal from "./DeactivateSigningKeyModal";
 
 import { sortByDateDescending } from "../../utils";
 
-import { filteredSigningKeysListState } from "../../state/selectors";
-import { signingKeysListState, brandIdState } from "../../state/atoms";
+import {
+  filteredSigningKeysListState,
+  signingKeysListState,
+} from "../../state/signingKeysState";
+import { brandIdState } from "../../state/brandStoreState";
 
 import type { SigningKey } from "../../types/shared";
 import type { ItemType } from "../../components/AppPagination/AppPagination";

static/js/brand-store/routes/App/App.tsx

@@ -11,7 +11,7 @@ import {
 
 import { fetchStores } from "../../state/slices/brandStoreSlice";
 import { brandStoresListSelector } from "../../state/selectors";
-import { brandStoresState } from "../../state/atoms";
+import { brandStoresState } from "../../state/brandStoreState";
 
 import AccountDetails from "../../pages/AccountDetails";
 import Snaps from "../../pages/Snaps";

static/js/brand-store/state/brandStoreState.ts

@@ -0,0 +1,25 @@
+import { atom, selectorFamily } from "recoil";
+
+import type { Store } from "../types/shared";
+
+const brandStoresState = atom({
+  key: "brandStores",
+  default: [] as Array<Store>,
+});
+
+const brandIdState = atom({
+  key: "brandId",
+  default: "",
+});
+
+const brandStoreState = selectorFamily({
+  key: "brandStore",
+  get:
+    (storeId) =>
+    ({ get }) => {
+      const brandStores = get(brandStoresState);
+      return brandStores.find((store) => store.id === storeId);
+    },
+});
+
+export { brandStoresState, brandIdState, brandStoreState };

static/js/brand-store/state/modelsState.ts

@@ -0,0 +1,81 @@
+import { atom, selector, selectorFamily } from "recoil";
+
+import { policiesListState } from "./policiesState";
+
+import { Model } from "../types/shared";
+
+function getFilteredModels(models: Array<Model>, filterQuery?: string | null) {
+  if (!filterQuery) {
+    return models;
+  }
+
+  return models.filter((model: Model) => {
+    if (
+      (model.name && model.name.includes(filterQuery)) ||
+      (model["api-key"] && model["api-key"].includes(filterQuery)) ||
+      (model["created-at"] && model["created-at"].includes(filterQuery)) ||
+      (model["modified-at"] && model["modified-at"].includes(filterQuery))
+    ) {
+      return true;
+    }
+
+    return false;
+  });
+}
+
+const modelsListState = atom({
+  key: "modelsList",
+  default: [] as Array<Model>,
+});
+
+const modelsListFilterState = atom({
+  key: "modelsListFilter",
+  default: "" as string,
+});
+
+const newModelState = atom({
+  key: "newModel",
+  default: {
+    name: "",
+    apiKey: "",
+  },
+});
+
+const filteredModelsListState = selector<Array<Model>>({
+  key: "filteredModelsList",
+  get: ({ get }) => {
+    const filter = get(modelsListFilterState);
+    const models = get(modelsListState);
+    const policies = get(policiesListState);
+    const modelsWithPolicies = models.map((model) => {
+      const policy = policies.find(
+        (policy) => policy["model-name"] === model.name,
+      );
+
+      return {
+        ...model,
+        "policy-revision": policy ? policy.revision : undefined,
+      };
+    });
+
+    return getFilteredModels(modelsWithPolicies, filter);
+  },
+});
+
+const currentModelState = selectorFamily({
+  key: "currentModel",
+  get:
+    (modelId) =>
+    ({ get }) => {
+      const models = get(modelsListState);
+      return models.find((model) => model.name === modelId);
+    },
+});
+
+export {
+  modelsListState,
+  modelsListFilterState,
+  newModelState,
+  filteredModelsListState,
+  currentModelState,
+};