Migrate Tweaks Module to Zustand Library and Add All Flows (#1847)

* ✨ (codeTabsComponent/index.tsx): refactor code to remove unnecessary code and improve readability
📝 (codeTabsComponent/index.tsx): update comments in source code to provide better understanding of the code logic
♻️ (apiModal/index.tsx): refactor code to remove unnecessary code and improve readability
📝 (apiModal/index.tsx): update comments in source code to provide better understanding of the code logic
🔧 (tweaksStore.ts): add new store for managing tweaks data

📝 (components/index.ts): update codeTabsPropsType to use array syntax for tweak and tweaksList properties for better readability and consistency
♻️ (utils/utils.ts): refactor toTitleCase function to remove unnecessary comma and improve code readability
♻️ (utils/utils.ts): refactor groupByFamily function to remove unnecessary comma and improve code readability
♻️ (utils/utils.ts): refactor getPythonApiCode function to remove unnecessary comma and improve code readability
♻️ (utils/utils.ts): refactor getCurlCode function to remove unnecessary comma and improve code readability
♻️ (utils/utils.ts): refactor getPythonCode function to remove unnecessary comma and improve code readability
♻️ (utils/utils.ts): refactor getWidgetCode function to remove unnecessary comma and improve code readability
♻️ (utils/utils.ts): refactor getFieldTitle function to remove unnecessary comma and improve code readability
♻️ (utils/utils.ts): refactor IncrementObjectKey function to remove unnecessary comma and improve code readability
♻️ (utils/utils.ts): refactor getSetFromObject function to remove unnecessary comma and improve code readability
♻️ (utils/utils.ts): refactor getRandomName function to remove unnecessary comma and improve code readability

* 📝 (codeTabsComponent/index.tsx): remove unnecessary whitespace in className
♻️ (codeTabsComponent/index.tsx): refactor code to improve readability and remove unnecessary code
♻️ (apiModal/index.tsx): refactor code to improve readability and remove unnecessary code
♻️ (tweaksStore.ts): refactor code to improve readability and remove unnecessary code
✨ (zustand/tweaks/index.ts): add types for tweaks store

* ✨ (codeTabsComponent/index.tsx): refactor code to improve readability and remove unnecessary code
♻️ (codeTabsComponent/index.tsx): refactor code to improve readability and remove unnecessary code
♻️ (utils/utils.ts): refactor code to improve readability and remove unnecessary code

✅ (tweaks_test.spec.ts): add end-to-end test to check if tweaks are updating when something on the flow changes

* 🐛 (accordionComponent/index.tsx): fix variable name from 'trigger' to 'keyValue' for better clarity and readability
♻️ (accordionComponent/index.tsx): refactor code to use 'defaultValue' prop instead of manually setting the value in the AccordionItem component
🐛 (codeTabsComponent/index.tsx): remove unused 'openAccordions' function
♻️ (codeTabsComponent/index.tsx): refactor code to remove unnecessary condition for opening accordions in the onValueChange event handler
♻️ (codeTabsComponent/index.tsx): refactor code to remove unused 'open' prop in AccordionItem component
♻️ (codeTabsComponent/index.tsx): refactor code to remove unused 'openAccordion' state variable
♻️ (codeTabsComponent/index.tsx): refactor code to remove unused 'openAccordions' function call in the onValueChange event handler

* 🐛 (apiModal/index.tsx): remove unnecessary comma after ref parameter in ApiModal component
♻️ (apiModal/index.tsx): refactor code to improve readability and remove unnecessary commas in function parameters
✨ (apiModal/index.tsx): add conditional check before assigning values to tabs array to prevent errors when tabs is undefined or empty

* 🐛 (index.tsx): remove unnecessary defaultValue prop from Accordion component
♻️ (index.tsx): refactor AccordionItem component to remove defaultValue prop and simplify code

* 🐛 (apiModal/index.tsx): remove unnecessary comma after ref parameter in function signature
♻️ (apiModal/index.tsx): refactor code to improve readability and remove unnecessary comma after ref parameter in function signature

* refactor tweaks

* ✨ (codeTabsComponent/index.tsx): add autoFocus prop to the tweaks switch to prevent it from automatically gaining focus when rendered
♻️ (codeTabsComponent/index.tsx): refactor classNames in the api-modal-according-display div to remove unnecessary whitespace
♻️ (codeTabsComponent/index.tsx): refactor mapping of templateFields in the api-modal-according-display div to improve readability and remove unnecessary parentheses
♻️ (codeTabsComponent/index.tsx): refactor mapping of templateFields in the api-modal-according-display div to improve readability and remove unnecessary parentheses
♻️ (codeTabsComponent/index.tsx): refactor mapping of templateFields in the api-modal-according-display div to improve readability and remove unnecessary parentheses
♻️ (codeTabsComponent/index.tsx): refactor mapping of templateFields in the api-modal-according-display div to improve readability and remove unnecessary parentheses
♻️ (codeTabsComponent/index.tsx): refactor mapping of templateFields in the api-modal-according-display div to improve readability and remove unnecessary parentheses
♻️ (codeTabsComponent/index.tsx): refactor mapping of templateFields in the api-modal-according-display div to improve readability and remove unnecessary parentheses
♻️ (codeTabsComponent/index.tsx): refactor mapping of templateFields in the api-modal-according-display div to improve readability and remove unnecessary parentheses
♻️ (codeTabsComponent/index.tsx): refactor mapping of templateFields in the api-modal-according-display div to improve readability and remove unnecessary parentheses
♻️ (codeTabsComponent/index.tsx): refactor mapping of templateFields in the api-modal-according-display div to improve readability and remove unnecessary parentheses
♻️ (codeTabsComponent/index.tsx): refactor mapping of templateFields in the api-modal-according-display div to improve readability and remove unnecessary parentheses
♻️ (codeTabsComponent/index.tsx): refactor mapping of templateFields in the api-modal-according-display div to improve readability and remove unnecessary parentheses
♻️ (codeTabsComponent/index.tsx): refactor mapping of templateFields in the api-modal-according-display div to improve readability and remove unnecessary parentheses
♻️ (codeTabsComponent/index.tsx): refactor mapping of templateFields in the api-modal-according-display div to improve readability and remove unnecessary parentheses
♻️ (codeTabsComponent/index.tsx): refactor mapping of templateFields in the api-modal-according-display div to improve readability and remove unnecessary parentheses
♻️ (codeTabsComponent/index.tsx): refactor mapping of templateFields in the api-modal-according-display div to improve readability and remove unnecessary parentheses
♻️ (codeTabsComponent/index.tsx): refactor mapping of templateFields in the api-modal-according-display div to improve readability and remove unnecessary parentheses
♻️ (codeTabsComponent/index.tsx): refactor mapping of templateFields in the api-modal-according-display div to improve readability and remove unnecessary parentheses
♻️ (codeTabsComponent/index.tsx): refactor mapping of templateFields in the api-modal-according-display div to improve readability and remove unnecessary parentheses
♻️ (codeTabsComponent/index.tsx): refactor mapping of templateFields in the api-modal-according-display div to improve readability and remove unnecessary parentheses
♻️ (codeTabsComponent/index.tsx): refactor mapping of templateFields in the api-modal-according-display div to improve readability and remove unnecessary parentheses
♻️ (codeTabsComponent/index.tsx): refactor mapping of templateFields in the api-modal-according-display div to improve readability and remove unnecessary parentheses
♻️ (codeTabsComponent/index.tsx): refactor mapping of templateFields in the api-modal-according-display div to improve readability and remove unnecessary parentheses
♻️ (codeTabsComponent/index.tsx): refactor mapping of templateFields in the api-modal-according-display div to improve readability and remove unnecessary parentheses
♻️ (codeTabsComponent/index.tsx): refactor mapping of templateFields in the api-modal-according-display div to improve readability and remove unnecessary parentheses
♻️ (codeTabsComponent/index.tsx): refactor mapping of templateFields in the api-modal-according-display div to improve readability and remove unnecessary parentheses
♻️ (codeTabsComponent/index.tsx): refactor mapping of templateFields in the api-modal-according-display div to improve readability and remove unnecessary parentheses
♻️ (codeTabsComponent/index.tsx): refactor mapping of templateFields in the api-modal-according-display div to improve readability and remove unnecessary parentheses
♻️ (codeTabsComponent/index.tsx): refactor mapping of templateFields in the api-modal-according-display div to improve readability and remove unnecessary parentheses
♻️ (codeTabsComponent/index.tsx): refactor mapping of templateFields in the api-modal-according-display div to improve readability and remove unnecessary parentheses
♻️ (codeTabsComponent/index.tsx): refactor mapping of templateFields in the api

* fix tests on tweaks

src/frontend/tests/end-to-end/tweaks_test.spec.ts

@@ -24,7 +24,7 @@ test("curl_api_generation", async ({ page, context }) => {
   await page.getByRole("tab", { name: "cURL" }).click();
   await page.getByRole("button", { name: "Copy Code" }).click();
   const handle = await page.evaluateHandle(() =>
-    navigator.clipboard.readText()
+    navigator.clipboard.readText(),
   );
   const clipboardContent = await handle.jsonValue();
   const oldValue = clipboardContent;
@@ -50,10 +50,78 @@ test("curl_api_generation", async ({ page, context }) => {
   await page.getByRole("tab", { name: "cURL" }).click();
   await page.getByRole("button", { name: "Copy Code" }).click();
   const handle2 = await page.evaluateHandle(() =>
-    navigator.clipboard.readText()
+    navigator.clipboard.readText(),
   );
   const clipboardContent2 = await handle2.jsonValue();
   const newValue = clipboardContent2;
   expect(oldValue).not.toBe(newValue);
   expect(clipboardContent2.length).toBeGreaterThan(clipboardContent.length);
 });
+
+test("check if tweaks are updating when someothing on the flow changes", async ({
+  page,
+}) => {
+  await page.goto("/");
+  await page.waitForTimeout(2000);
+
+  let modalCount = 0;
+  try {
+    const modalTitleElement = await page?.getByTestId("modal-title");
+    if (modalTitleElement) {
+      modalCount = await modalTitleElement.count();
+    }
+  } catch (error) {
+    modalCount = 0;
+  }
+
+  while (modalCount === 0) {
+    await page.locator('//*[@id="new-project-btn"]').click();
+    await page.waitForTimeout(5000);
+    modalCount = await page.getByTestId("modal-title")?.count();
+  }
+  await page.waitForTimeout(1000);
+
+  await page.getByTestId("blank-flow").click();
+  await page.waitForTimeout(1000);
+  await page.getByTestId("extended-disclosure").click();
+  await page.getByPlaceholder("Search").click();
+  await page.getByPlaceholder("Search").fill("Chroma");
+
+  await page.waitForTimeout(1000);
+
+  await page
+    .getByTestId("vectorstoresChroma")
+    .dragTo(page.locator('//*[@id="react-flow-id"]'));
+  await page.mouse.up();
+  await page.mouse.down();
+  await page.getByTitle("fit view").click();
+  await page.getByTitle("zoom out").click();
+  await page.getByTitle("zoom out").click();
+  await page.getByTitle("zoom out").click();
+  await page.getByTestId("input-collection_name").click();
+  await page
+    .getByTestId("input-collection_name")
+    .fill("collection_name_test_123123123!@#$&*(&%$@");
+
+  await page.getByTestId("input-index_directory").click();
+  await page
+    .getByTestId("input-index_directory")
+    .fill("index_directory_123123123!@#$&*(&%$@");
+
+  await page.getByText("API", { exact: true }).first().click();
+
+  await page.getByText("Tweaks").nth(1).click();
+
+  await page.getByText("collection_name_test_123123123!@#$&*(&%$@").isVisible();
+  await page.getByText("index_directory_123123123!@#$&*(&%$@").isVisible();
+
+  await page.getByText("Python API", { exact: true }).click();
+
+  await page.getByText("collection_name_test_123123123!@#$&*(&%$@").isVisible();
+  await page.getByText("index_directory_123123123!@#$&*(&%$@").isVisible();
+
+  await page.getByText("Python Code", { exact: true }).click();
+
+  await page.getByText("collection_name_test_123123123!@#$&*(&%$@").isVisible();
+  await page.getByText("index_directory_123123123!@#$&*(&%$@").isVisible();
+});