update google sites + formik (#2834)

* update google sites + formik

* nit

* k

web/src/app/admin/connectors/[connector]/AddConnectorPage.tsx

@@ -270,6 +270,7 @@ export default function AddConnector({
             advancedConfiguration.pruneFreq,
             advancedConfiguration.indexingStart,
             values.access_type == "public",
+            groups,
             name
           );
           if (response) {

web/src/app/admin/connectors/[connector]/pages/ConnectorInput/FileInput.tsx

@@ -1,3 +1,4 @@
+import { useField } from "formik";
 import { FileUpload } from "@/components/admin/connectors/FileUpload";
 import CredentialSubText from "@/components/credentials/CredentialFields";
 
@@ -6,8 +7,6 @@ interface FileInputProps {
   label: string;
   optional?: boolean;
   description?: string;
-  selectedFiles: File[];
-  setSelectedFiles: (files: File[]) => void;
 }
 
 export default function FileInput({
@@ -15,9 +14,9 @@ export default function FileInput({
   label,
   optional = false,
   description,
-  selectedFiles,
-  setSelectedFiles,
 }: FileInputProps) {
+  const [field, meta, helpers] = useField(name);
+
   return (
     <>
       <label
@@ -29,9 +28,14 @@ export default function FileInput({
       </label>
       {description && <CredentialSubText>{description}</CredentialSubText>}
       <FileUpload
-        selectedFiles={selectedFiles}
-        setSelectedFiles={setSelectedFiles}
+        selectedFiles={field.value ? [field.value] : []}
+        setSelectedFiles={(files: File[]) => {
+          helpers.setValue(files[0] || null);
+        }}
       />
+      {meta.touched && meta.error && (
+        <div className="text-red-500 text-sm mt-1">{meta.error}</div>
+      )}
     </>
   );
 }

web/src/app/admin/connectors/[connector]/pages/DynamicConnectorCreationForm.tsx

@@ -45,8 +45,6 @@ const DynamicConnectionForm: FC<DynamicConnectionFormProps> = ({
           label={field.label}
           optional={field.optional}
           description={field.description}
-          selectedFiles={selectedFiles}
-          setSelectedFiles={setSelectedFiles}
         />
       ) : field.type === "list" ? (
         <ListInput field={field} />

web/src/app/admin/connectors/[connector]/pages/utils/google_site.ts

@@ -11,6 +11,7 @@ export const submitGoogleSite = async (
   pruneFreq: number,
   indexingStart: Date,
   is_public: boolean,
+  groups: number[],
   name?: string
 ) => {
   const uploadCreateAndTriggerConnector = async () => {
@@ -56,7 +57,13 @@ export const submitGoogleSite = async (
       return false;
     }
 
-    const credentialResponse = await linkCredential(connector.id, 0, base_url);
+    const credentialResponse = await linkCredential(
+      connector.id,
+      0,
+      base_url,
+      undefined,
+      groups
+    );
     if (!credentialResponse.ok) {
       const credentialResponseJson = await credentialResponse.json();
       setPopup({

web/src/app/admin/documents/sets/DocumentSetCreationForm.tsx

@@ -125,6 +125,7 @@ export const DocumentSetCreationForm = ({
                 placeholder="Describe what the document set represents"
                 autoCompleteDisabled={true}
               />
+
               {isPaidEnterpriseFeaturesEnabled && (
                 <IsPublicGroupSelector
                   formikProps={props}

web/src/app/admin/embeddings/pages/EmbeddingFormPage.tsx

@@ -3,7 +3,7 @@ import { usePopup } from "@/components/admin/connectors/Popup";
 import { HealthCheckBanner } from "@/components/health/healthcheck";
 
 import { EmbeddingModelSelection } from "../EmbeddingModelSelectionForm";
-import { useEffect, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { Button, Card, Text } from "@tremor/react";
 import { ArrowLeft, ArrowRight, WarningCircle } from "@phosphor-icons/react";
 import {
@@ -152,6 +152,68 @@ export default function EmbeddingForm() {
     }
   }, [currentEmbeddingModel]);
 
+  const handleReindex = async () => {
+    const update = await updateSearch();
+    if (update) {
+      await onConfirm();
+    }
+  };
+
+  const needsReIndex =
+    currentEmbeddingModel != selectedProvider ||
+    searchSettings?.multipass_indexing !=
+      advancedEmbeddingDetails.multipass_indexing;
+
+  const ReIndexingButton = useMemo(() => {
+    const ReIndexingButtonComponent = ({
+      needsReIndex,
+    }: {
+      needsReIndex: boolean;
+    }) => {
+      return needsReIndex ? (
+        <div className="flex mx-auto gap-x-1 ml-auto items-center">
+          <button
+            className="enabled:cursor-pointer disabled:bg-accent/50 disabled:cursor-not-allowed bg-accent flex gap-x-1 items-center text-white py-2.5 px-3.5 text-sm font-regular rounded-sm"
+            onClick={handleReindex}
+          >
+            Re-index
+          </button>
+          <div className="relative group">
+            <WarningCircle
+              className="text-text-800 cursor-help"
+              size={20}
+              weight="fill"
+            />
+            <div className="absolute z-10 invisible group-hover:visible bg-background-800 text-text-200 text-sm rounded-md shadow-md p-2 right-0 mt-1 w-64">
+              <p className="font-semibold mb-2">Needs re-indexing due to:</p>
+              <ul className="list-disc pl-5">
+                {currentEmbeddingModel != selectedProvider && (
+                  <li>Changed embedding provider</li>
+                )}
+                {searchSettings?.multipass_indexing !=
+                  advancedEmbeddingDetails.multipass_indexing && (
+                  <li>Multipass indexing modification</li>
+                )}
+              </ul>
+            </div>
+          </div>
+        </div>
+      ) : (
+        <button
+          className="enabled:cursor-pointer ml-auto disabled:bg-accent/50 disabled:cursor-not-allowed bg-accent flex mx-auto gap-x-1 items-center text-white py-2.5 px-3.5 text-sm font-regular rounded-sm"
+          onClick={async () => {
+            updateSearch();
+            navigateToEmbeddingPage("search settings");
+          }}
+        >
+          Update Search
+        </button>
+      );
+    };
+    ReIndexingButtonComponent.displayName = "ReIndexingButton";
+    return ReIndexingButtonComponent;
+  }, [needsReIndex]);
+
   if (!selectedProvider) {
     return <ThreeDotsLoader />;
   }
@@ -196,12 +258,13 @@ export default function EmbeddingForm() {
 
     // We use a spread operation to merge properties from multiple objects into a single object.
     // Advanced embedding details may update default values.
+    // Do NOT modify the order unless you are positive the new hierarchy is correct.
     if (selectedProvider.provider_type != null) {
       // This is a cloud model
       newModel = {
+        ...selectedProvider,
         ...rerankingDetails,
         ...advancedEmbeddingDetails,
-        ...selectedProvider,
         provider_type:
           (selectedProvider.provider_type
             ?.toLowerCase()
@@ -213,10 +276,10 @@ export default function EmbeddingForm() {
         ...selectedProvider,
         ...rerankingDetails,
         ...advancedEmbeddingDetails,
-        ...selectedProvider,
         provider_type: null,
       };
     }
+
     newModel.index_name = null;
 
     const response = await fetch(
@@ -239,58 +302,6 @@ export default function EmbeddingForm() {
     }
   };
 
-  const needsReIndex =
-    currentEmbeddingModel != selectedProvider ||
-    searchSettings?.multipass_indexing !=
-      advancedEmbeddingDetails.multipass_indexing;
-
-  const ReIndexingButton = ({ needsReIndex }: { needsReIndex: boolean }) => {
-    return needsReIndex ? (
-      <div className="flex mx-auto gap-x-1 ml-auto items-center">
-        <button
-          className="enabled:cursor-pointer disabled:bg-accent/50 disabled:cursor-not-allowed bg-accent flex gap-x-1 items-center text-white py-2.5 px-3.5 text-sm font-regular rounded-sm"
-          onClick={async () => {
-            const update = await updateSearch();
-            if (update) {
-              await onConfirm();
-            }
-          }}
-        >
-          Re-index
-        </button>
-        <div className="relative group">
-          <WarningCircle
-            className="text-text-800 cursor-help"
-            size={20}
-            weight="fill"
-          />
-          <div className="absolute z-10 invisible group-hover:visible bg-background-800 text-text-200 text-sm rounded-md shadow-md p-2 right-0 mt-1 w-64">
-            <p className="font-semibold mb-2">Needs re-indexing due to:</p>
-            <ul className="list-disc pl-5">
-              {currentEmbeddingModel != selectedProvider && (
-                <li>Changed embedding provider</li>
-              )}
-              {searchSettings?.multipass_indexing !=
-                advancedEmbeddingDetails.multipass_indexing && (
-                <li>Multipass indexing modification</li>
-              )}
-            </ul>
-          </div>
-        </div>
-      </div>
-    ) : (
-      <button
-        className="enabled:cursor-pointer ml-auto disabled:bg-accent/50 disabled:cursor-not-allowed bg-accent flex mx-auto gap-x-1 items-center text-white py-2.5 px-3.5 text-sm font-regular rounded-sm"
-        onClick={async () => {
-          updateSearch();
-          navigateToEmbeddingPage("search settings");
-        }}
-      >
-        Update Search
-      </button>
-    );
-  };
-
   return (
     <div className="mx-auto mb-8 w-full">
       {popup}
@@ -391,7 +402,7 @@ export default function EmbeddingForm() {
               />
             </Card>
 
-            <div className={` mt-4 w-full grid grid-cols-3`}>
+            <div className={`mt-4 w-full grid grid-cols-3`}>
               <button
                 className="border-border-dark mr-auto border flex gap-x-1 items-center text-text p-2.5 text-sm font-regular rounded-sm "
                 onClick={() => prevFormStep()}