fix: loading all keys

.github/workflows/test.yml

@@ -11,6 +11,9 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: "20.x"
 
       - name: Cache node modules
         uses: actions/cache@v3
@@ -32,6 +35,9 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: "20.x"
 
       - name: Cache node modules
         uses: actions/cache@v3
@@ -51,6 +57,9 @@ jobs:
 
     steps:
       - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: "20.x"
 
       - name: Cache node modules
         uses: actions/cache@v3

scripts/runAfterApp.ts

@@ -12,8 +12,8 @@ const afterArgs = process.argv.slice(2);
 const SEARCHED_TEXTS = ["Tomcat started on port(s):"];
 
 const dockerComposeProcess = spawn(
-  "docker-compose",
-  ["up", "--force-recreate"],
+  "docker",
+  ["compose", "up", "--force-recreate"],
   {
     cwd: path.join(__dirname, "..", "cypress"),
   }

src/tools/getPullChanges.ts

@@ -1,24 +1,16 @@
-import { components } from "@/ui/client/apiSchema.generated";
 import { NodeInfo, PartialNodeInfo } from "@/types";
-import { compareNs } from "./compareNs";
-
-type KeyWithTranslationsModel =
-  components["schemas"]["KeyWithTranslationsModel"];
 
 export const getPullChanges = (
   nodes: NodeInfo[],
   lang: string,
-  keys: KeyWithTranslationsModel[]
+  keys: Record<string, Record<string, string>>
 ) => {
   const changedNodes: NodeInfo[] = [];
   const missingKeys: PartialNodeInfo[] = [];
 
   nodes.forEach((node) => {
-    const key = keys?.find(
-      (t) => t.keyName === node.key && compareNs(t.keyNamespace, node.ns)
-    );
+    const value = keys?.[node.ns ?? ""]?.[node.key];
 
-    const value = key?.translations[lang]?.text;
     if (value) {
       if (value !== node.characters) {
         changedNodes.push({ ...node, characters: value });

src/tools/getPushChanges.ts

@@ -1,10 +1,6 @@
 import { FrameScreenshot, NodeInfo } from "@/types";
-import { components } from "@/ui/client/apiSchema.generated";
 import { compareNs } from "./compareNs";
 
-type KeyWithTranslationsModel =
-  components["schemas"]["KeyWithTranslationsModel"];
-
 export type KeyChangeValue = {
   key: string;
   ns: string | undefined;
@@ -22,7 +18,7 @@ export type KeyChanges = {
 
 export const getPushChanges = (
   nodes: NodeInfo[],
-  translations: KeyWithTranslationsModel[],
+  translations: Record<string, Record<string, string>>,
   language: string,
   screenshots: FrameScreenshot[]
 ): KeyChanges => {
@@ -46,21 +42,17 @@ export const getPushChanges = (
   };
 
   nodes.forEach((node) => {
-    const key = translations.find(
-      (t) =>
-        t.keyName === node.key &&
-        compareNs(t.keyNamespace, node.ns) &&
-        t.translations[language]?.text
-    );
+    const oldValue = translations?.[node.ns ?? ""]?.[node.key];
+
     const change: KeyChangeValue = {
       key: node.key,
       ns: node.ns,
-      oldValue: key?.translations[language]?.text,
+      oldValue,
       newValue: node.characters,
       screenshots: getKeyScreenshots(node),
     };
 
-    if (!key) {
+    if (!oldValue) {
       newKeys.push(change);
     } else if (change.oldValue !== change.newValue) {
       changedKeys.push(change);

src/ui/hooks/useAllTranslations.ts

@@ -0,0 +1,54 @@
+import { useState } from "preact/hooks";
+import { useApiMutation } from "../client/useQueryApi";
+
+type Props = {
+  language: string;
+  namespaces?: string[];
+};
+
+export const useAllTranslations = () => {
+  const namespacesLoadable = useApiMutation({
+    url: "/v2/projects/used-namespaces",
+    method: "get",
+  });
+  const translationsLoadable = useApiMutation({
+    url: "/v2/projects/translations/{languages}",
+    method: "get",
+  });
+
+  async function loadData({ language, namespaces }: Props) {
+    const nsNames =
+      namespaces ??
+      (await namespacesLoadable.mutateAsync({}))._embedded?.namespaces?.map(
+        (n) => n.name ?? ""
+      ) ??
+      [];
+
+    const data: Record<string, Record<string, string>> = {};
+
+    for (const ns of nsNames) {
+      data[ns] = (
+        (await translationsLoadable.mutateAsync({
+          path: { languages: [language] },
+          query: { ns },
+        })) as any
+      )?.[language];
+    }
+    return data;
+  }
+
+  const [isLoading, setIsLoading] = useState(false);
+
+  return {
+    async getData(props: Props) {
+      setIsLoading(true);
+      try {
+        return await loadData(props);
+      } finally {
+        setIsLoading(false);
+      }
+    },
+    isLoading,
+    error: namespacesLoadable.error || translationsLoadable.error,
+  };
+};

src/ui/views/CopyView/CopyView.tsx

@@ -8,16 +8,16 @@ import {
   VerticalSpace,
 } from "@create-figma-plugin/ui";
 import { useGlobalState } from "@/ui/state/GlobalState";
-import { useApiMutation } from "@/ui/client/useQueryApi";
 import { FullPageLoading } from "@/ui/components/FullPageLoading/FullPageLoading";
 
 import { NodeList } from "../../components/NodeList/NodeList";
 import { TopBar } from "../../components/TopBar/TopBar";
 import { useSelectedNodes } from "@/ui/hooks/useSelectedNodes";
-import { getPullChanges } from "@/tools/getPullChanges";
 import { useConnectedMutation } from "@/ui/hooks/useConnectedMutation";
 import { useUpdateNodesMutation } from "@/ui/hooks/useUpdateNodesMutation";
 import { LocateNodeButton } from "@/ui/components/LocateNodeButton/LocateNodeButton";
+import { getPullChanges } from "@/tools/getPullChanges";
+import { useAllTranslations } from "@/ui/hooks/useAllTranslations";
 
 export const CopyView = () => {
   const selectionLoadable = useSelectedNodes();
@@ -30,36 +30,27 @@ export const CopyView = () => {
 
   const nothingSelected = !selectionLoadable.data?.somethingSelected;
 
-  const translationsLoadable = useApiMutation({
-    url: "/v2/projects/translations",
-    method: "get",
-  });
-
   const updateNodesLoadalbe = useUpdateNodesMutation();
+  const allTranslationsLoadable = useAllTranslations();
 
   const handlePull = async () => {
-    const keys = [...new Set(selection.map((n) => n.key))];
-    const translations = await translationsLoadable.mutateAsync({
-      query: {
-        languages: [language!],
-        size: 1000000,
-        filterKeyName: nothingSelected ? undefined : keys,
-      },
+    const translations = await allTranslationsLoadable.getData({
+      language: language ?? "",
     });
 
     const connectedNodes = await connectedNodesLoadable.mutateAsync(undefined);
 
     const { changedNodes } = getPullChanges(
       connectedNodes.items,
       language!,
-      translations._embedded?.keys || []
+      translations
     );
 
     await updateNodesLoadalbe.mutateAsync({ nodes: changedNodes });
   };
 
   if (
-    translationsLoadable.isLoading ||
+    allTranslationsLoadable.isLoading ||
     connectedNodesLoadable.isLoading ||
     updateNodesLoadalbe.isLoading
   ) {

src/ui/views/CreateCopy/CreateCopy.tsx

@@ -1,4 +1,4 @@
-import { useApiMutation, useApiQuery } from "@/ui/client/useQueryApi";
+import { useApiQuery } from "@/ui/client/useQueryApi";
 import { ActionsBottom } from "@/ui/components/ActionsBottom/ActionsBottom";
 import { FullPageLoading } from "@/ui/components/FullPageLoading/FullPageLoading";
 import { TopBar } from "@/ui/components/TopBar/TopBar";
@@ -15,9 +15,10 @@ import {
   Checkbox,
 } from "@create-figma-plugin/ui";
 import { Fragment, FunctionComponent, h } from "preact";
-import { useMemo, useState } from "preact/hooks";
+import { useState } from "preact/hooks";
 import { useCopyPage } from "@/ui/hooks/useCopyPage";
 import { useConnectedNodes } from "@/ui/hooks/useConnectedNodes";
+import { useAllTranslations } from "@/ui/hooks/useAllTranslations";
 
 type CopyType = "language" | "keys";
 
@@ -29,11 +30,6 @@ export const CreateCopy: FunctionComponent = () => {
 
   const connectedNodes = useConnectedNodes({ ignoreSelection: true });
 
-  const keys = useMemo(
-    () => [...new Set(connectedNodes.data?.items.map((n) => n.key))],
-    [connectedNodes.data]
-  );
-
   const languagesLoadable = useApiQuery({
     url: "/v2/projects/languages",
     method: "get",
@@ -43,10 +39,7 @@ export const CreateCopy: FunctionComponent = () => {
     },
   });
 
-  const translationsLoadable = useApiMutation({
-    url: "/v2/projects/translations",
-    method: "get",
-  });
+  const allTranslationsLoadable = useAllTranslations();
 
   const copyPageMutation = useCopyPage();
 
@@ -59,18 +52,14 @@ export const CreateCopy: FunctionComponent = () => {
       });
     } else {
       for (const language of selectedLanguages) {
-        const response = await translationsLoadable.mutateAsync({
-          query: {
-            languages: [language],
-            size: 1000000,
-            filterKeyName: keys,
-          },
+        const response = await allTranslationsLoadable.getData({
+          language,
         });
 
         const { changedNodes } = getPullChanges(
           connectedNodes.data?.items || [],
           language,
-          response._embedded?.keys || []
+          response
         );
 
         copyPageMutation.mutate(