Filter by user for docset display (#2245)

* filter by user for docset display

* spacing

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

@@ -8,13 +8,19 @@ import {
   updateDocumentSet,
   DocumentSetCreationRequest,
 } from "./lib";
-import { ConnectorIndexingStatus, DocumentSet, UserGroup } from "@/lib/types";
+import {
+  ConnectorIndexingStatus,
+  DocumentSet,
+  UserGroup,
+  UserRole,
+} from "@/lib/types";
 import { TextFormField } from "@/components/admin/connectors/Field";
 import { ConnectorTitle } from "@/components/admin/connectors/ConnectorTitle";
 import { Button, Divider } from "@tremor/react";
 import { usePaidEnterpriseFeaturesEnabled } from "@/components/settings/usePaidEnterpriseFeaturesEnabled";
 import { IsPublicGroupSelector } from "@/components/IsPublicGroupSelector";
 import React, { useEffect, useState } from "react";
+import { useUser } from "@/components/user/UserProvider";
 
 interface SetCreationPopupProps {
   ccPairs: ConnectorIndexingStatus<any, any>[];
@@ -34,6 +40,7 @@ export const DocumentSetCreationForm = ({
   const isPaidEnterpriseFeaturesEnabled = usePaidEnterpriseFeaturesEnabled();
   const isUpdate = existingDocumentSet !== undefined;
   const [localCcPairs, setLocalCcPairs] = useState(ccPairs);
+  const { user } = useUser();
 
   useEffect(() => {
     if (existingDocumentSet?.is_public) {
@@ -128,6 +135,9 @@ export const DocumentSetCreationForm = ({
                 )}
 
               <Divider />
+
+              {user?.role === UserRole.CURATOR ? (
+                <>
                   <div className="flex flex-col gap-y-1">
                     <h2 className="mb-1 font-medium text-base">
                       These are the connectors available to{" "}
@@ -136,9 +146,10 @@ export const DocumentSetCreationForm = ({
                         : "the group you curate"}
                       :
                     </h2>
+
                     <p className="mb-text-sm">
-                  All documents indexed by these selected connectors will be a
+                      All documents indexed by these selected connectors will be
-                  part of this document set.
+                      a part of this document set.
                     </p>
                     <FieldArray
                       name="cc_pair_ids"
@@ -157,8 +168,9 @@ export const DocumentSetCreationForm = ({
                         const visibleCcPairIds = visibleCcPairs.map(
                           (ccPair) => ccPair.cc_pair_id
                         );
-                    props.values.cc_pair_ids = props.values.cc_pair_ids.filter(
+                        props.values.cc_pair_ids =
-                      (id) => visibleCcPairIds.includes(id)
+                          props.values.cc_pair_ids.filter((id) =>
+                            visibleCcPairIds.includes(id)
                           );
 
                         return (
@@ -210,6 +222,7 @@ export const DocumentSetCreationForm = ({
                       }}
                     />
                   </div>
+
                   <div>
                     <FieldArray
                       name="cc_pair_ids"
@@ -236,8 +249,8 @@ export const DocumentSetCreationForm = ({
                             </h2>
                             <p className="mb-3 text-sm">
                               Only connectors that are directly assigned to the
-                          group you are trying to add the document set to will
+                              group you are trying to add the document set to
-                          be available.
+                              will be available.
                             </p>
                             <div className="mb-3 flex gap-2 flex-wrap">
                               {nonVisibleCcPairs.map((ccPair) => (
@@ -262,6 +275,67 @@ export const DocumentSetCreationForm = ({
                       }}
                     />
                   </div>
+                </>
+              ) : (
+                <div>
+                  <h2 className="mb-1 font-medium text-base">
+                    Pick your connectors:
+                  </h2>
+                  <p className="mb-3 text-xs">
+                    All documents indexed by the selected connectors will be a
+                    part of this document set.
+                  </p>
+                  <FieldArray
+                    name="cc_pair_ids"
+                    render={(arrayHelpers: ArrayHelpers) => (
+                      <div className="mb-3 flex gap-2 flex-wrap">
+                        {ccPairs.map((ccPair) => {
+                          const ind = props.values.cc_pair_ids.indexOf(
+                            ccPair.cc_pair_id
+                          );
+                          let isSelected = ind !== -1;
+                          return (
+                            <div
+                              key={`${ccPair.connector.id}-${ccPair.credential.id}`}
+                              className={
+                                `
+                              px-3 
+                              py-1
+                              rounded-lg 
+                              border
+                              border-border 
+                              w-fit 
+                              flex 
+                              cursor-pointer ` +
+                                (isSelected
+                                  ? " bg-background-strong"
+                                  : " hover:bg-hover")
+                              }
+                              onClick={() => {
+                                if (isSelected) {
+                                  arrayHelpers.remove(ind);
+                                } else {
+                                  arrayHelpers.push(ccPair.cc_pair_id);
+                                }
+                              }}
+                            >
+                              <div className="my-auto">
+                                <ConnectorTitle
+                                  connector={ccPair.connector}
+                                  ccPairId={ccPair.cc_pair_id}
+                                  ccPairName={ccPair.name}
+                                  isLink={false}
+                                  showMetadata={false}
+                                />
+                              </div>
+                            </div>
+                          );
+                        })}
+                      </div>
+                    )}
+                  />
+                </div>
+              )}
 
               <div className="flex mt-6">
                 <Button

web/src/components/IsPublicGroupSelector.tsx

@@ -87,7 +87,7 @@ export const IsPublicGroupSelector = <T extends IsPublicGroupSelectorFormType>({
         !isAdmin ||
         formikProps.values.groups.length > 0) && (
         <>
-          <div className="flex gap-x-2 items-center">
+          <div className="flex mt-4 gap-x-2 items-center">
             <div className="block font-medium text-base">
               Assign group access for this {objectName}
             </div>