Added frontend logical polish (#2274)

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

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

web/src/components/IsPublicGroupSelector.tsx

@@ -15,10 +15,12 @@ export type IsPublicGroupSelectorFormType = {
 export const IsPublicGroupSelector = <T extends IsPublicGroupSelectorFormType>({
   formikProps,
   objectName,
+  publicToWhom = "Users",
   enforceGroupSelection = true,
 }: {
   formikProps: FormikProps<T>;
   objectName: string;
+  publicToWhom?: string;
   enforceGroupSelection?: boolean;
 }) => {
   const { data: userGroups, isLoading: userGroupsIsLoading } = useUserGroups();
@@ -72,34 +74,35 @@ export const IsPublicGroupSelector = <T extends IsPublicGroupSelectorFormType>({
         <>
           <BooleanFormField
             name="is_public"
-            label="Is Public?"
+            label={
+              publicToWhom === "Curators"
+                ? `Make this ${objectName} Curator Accessible?`
+                : `Make this ${objectName} Public?`
+            }
             disabled={!isAdmin}
             subtext={
               <span className="block mt-2 text-sm text-gray-500">
-                If set, then this {objectName} will be visible to{" "}
+                If set, then this {objectName} will be usable by{" "}
-                <b>all users</b>. If turned off, then only users who explicitly
+                <b>All {publicToWhom}</b>. Otherwise, only <b>Admins</b> and{" "}
-                have been given access to this {objectName} (e.g. through a User
+                <b>{publicToWhom}</b> who have explicitly been given access to
-                Group) will have access.
+                this {objectName} (e.g. via a User Group) will have access.
               </span>
             }
           />
         </>
       )}
 
-      {(!formikProps.values.is_public ||
+      {(!formikProps.values.is_public || isCurator) &&
-        isCurator ||
+        formikProps.values.groups.length > 0 && (
-        formikProps.values.groups.length > 0) &&
-        (userGroupsIsLoading ? (
-          <div className="animate-pulse bg-gray-200 h-8 w-32 rounded"></div>
-        ) : (
-          userGroups &&
-          userGroups.length > 0 && (
           <>
             <div className="flex mt-4 gap-x-2 items-center">
               <div className="block font-medium text-base">
                 Assign group access for this {objectName}
               </div>
             </div>
+            {userGroupsIsLoading ? (
+              <div className="animate-pulse bg-gray-200 h-8 w-32 rounded"></div>
+            ) : (
               <Text className="mb-3">
                 {isAdmin || !enforceGroupSelection ? (
                   <>
@@ -113,11 +116,16 @@ export const IsPublicGroupSelector = <T extends IsPublicGroupSelectorFormType>({
                   </>
                 )}
               </Text>
+            )}
             <FieldArray
               name="groups"
               render={(arrayHelpers: ArrayHelpers) => (
                 <div className="flex gap-2 flex-wrap mb-4">
-                    {userGroups.map((userGroup: UserGroup) => {
+                  {userGroupsIsLoading ? (
+                    <div className="animate-pulse bg-gray-200 h-8 w-32 rounded"></div>
+                  ) : (
+                    userGroups &&
+                    userGroups.map((userGroup: UserGroup) => {
                       const ind = formikProps.values.groups.indexOf(
                         userGroup.id
                       );
@@ -150,7 +158,8 @@ export const IsPublicGroupSelector = <T extends IsPublicGroupSelectorFormType>({
                           </div>
                         </div>
                       );
-                    })}
+                    })
+                  )}
                 </div>
               )}
             />
@@ -160,8 +169,7 @@ export const IsPublicGroupSelector = <T extends IsPublicGroupSelectorFormType>({
               className="text-error text-sm mt-1"
             />
           </>
-          )
+        )}
-        ))}
     </div>
   );
 };

web/src/components/UserDropdown.tsx

@@ -16,6 +16,33 @@ import {
 } from "./icons/icons";
 import { pageType } from "@/app/chat/sessionSidebar/types";
 
+interface DropdownOptionProps {
+  href?: string;
+  onClick?: () => void;
+  icon: React.ReactNode;
+  label: string;
+}
+
+const DropdownOption: React.FC<DropdownOptionProps> = ({
+  href,
+  onClick,
+  icon,
+  label,
+}) => {
+  const content = (
+    <div className="flex py-3 px-4 cursor-pointer rounded hover:bg-hover-light">
+      {icon}
+      {label}
+    </div>
+  );
+
+  return href ? (
+    <Link href={href}>{content}</Link>
+  ) : (
+    <div onClick={onClick}>{content}</div>
+  );
+};
+
 export function UserDropdown({
   user,
   page,
@@ -100,44 +127,31 @@ export function UserDropdown({
                 overscroll-contain
               `}
           >
-            {showAdminPanel && (
+            {showAdminPanel ? (
-              <>
+              <DropdownOption
-                <Link
                 href="/admin/indexing/status"
-                  className="flex py-3 px-4 cursor-pointer !
+                icon={<LightSettingsIcon className="h-5 w-5 my-auto mr-2" />}
-                   rounded hover:bg-hover-light"
+                label="Admin Panel"
-                >
+              />
-                  <LightSettingsIcon className="h-5 w-5 my-auto mr-2" />
+            ) : (
-                  Admin Panel
+              showCuratorPanel && (
-                </Link>
+                <DropdownOption
-              </>
-            )}
-            {showCuratorPanel && (
-              <>
-                <Link
                   href="/admin/indexing/status"
-                  className="flex py-3 px-4 cursor-pointer !
+                  icon={<LightSettingsIcon className="h-5 w-5 my-auto mr-2" />}
-                   rounded hover:bg-hover-light"
+                  label="Curator Panel"
-                >
+                />
-                  <LightSettingsIcon className="h-5 w-5 my-auto mr-2" />
+              )
-                  Curator Panel
-                </Link>
-              </>
             )}
 
-            {showLogout && (
+            {(showAdminPanel || showCuratorPanel) && (
-              <>
-                {(!(page == "search" || page == "chat") || showAdminPanel) && (
               <div className="border-t border-border my-1" />
             )}
-                <div
+            {showLogout && (
+              <DropdownOption
                 onClick={handleLogout}
-                  className="mt-1 flex py-3 px-4 cursor-pointer hover:bg-hover-light"
+                icon={<FiLogOut className="my-auto mr-2 text-lg" />}
-                >
+                label="Log out"
-                  <FiLogOut className="my-auto mr-2 text-lg" />
+              />
-                  Log out
-                </div>
-              </>
             )}
           </div>
         }

web/src/components/credentials/actions/CreateCredential.tsx

@@ -236,6 +236,7 @@ export default function CreateCredential({
                         <IsPublicGroupSelector
                           formikProps={formikProps}
                           objectName="credential"
+                          publicToWhom="Curators"
                         />
                       )}
                     </div>