Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Added frontend logical polish #2274

Merged
merged 5 commits into from
Aug 30, 2024
+99 −78
Merged

Added frontend logical polish #2274

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
e9cf4ca
Added frontend logical polish
hagen-danswer Aug 30, 2024
3e7b216
Merge branch 'main' into is-public-string
hagen-danswer Aug 30, 2024
a2eeecb
fixed frontend bug
hagen-danswer Aug 30, 2024
9256d83
removed some unused code
hagen-danswer Aug 30, 2024
0263b1c
string revision
hagen-danswer Aug 30, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 6 additions & 8 deletions web/src/app/admin/documents/sets/DocumentSetCreationForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -125,14 +125,12 @@ export const DocumentSetCreationForm = ({
placeholder="Describe what the document set represents"
autoCompleteDisabled={true}
/>
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

should show the element regardless of situation

{isPaidEnterpriseFeaturesEnabled &&
userGroups &&
userGroups.length > 0 && (
<IsPublicGroupSelector
formikProps={props}
objectName="document set"
/>
)}
{isPaidEnterpriseFeaturesEnabled && (
<IsPublicGroupSelector
formikProps={props}
objectName="document set"
/>
)}

<Divider />

Expand Down
80 changes: 44 additions & 36 deletions web/src/components/IsPublicGroupSelector.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand Down Expand Up @@ -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">
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

reworded string to make it more clear

If set, then this {objectName} will be visible to{" "}
<b>all users</b>. If turned off, then only users who explicitly
have been given access to this {objectName} (e.g. through a User
Group) will have access.
If set, then this {objectName} will be usable by{" "}
<b>All {publicToWhom}</b>. Otherwise, only <b>Admins</b> and{" "}
<b>{publicToWhom}</b> who have explicitly been given access to
this {objectName} (e.g. via a User Group) will have access.
</span>
}
/>
</>
)}

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

should not show group selector if there are no groups

{(!formikProps.values.is_public ||
isCurator ||
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>
{(!formikProps.values.is_public || isCurator) &&
formikProps.values.groups.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 ? (
<>
Expand All @@ -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) => {
)}
<FieldArray
name="groups"
render={(arrayHelpers: ArrayHelpers) => (
<div className="flex gap-2 flex-wrap mb-4">
{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
);
Expand All @@ -135,7 +143,7 @@ export const IsPublicGroupSelector = <T extends IsPublicGroupSelectorFormType>({
flex
cursor-pointer
${isSelected ? "bg-background-strong" : "hover:bg-hover"}
`}
`}
onClick={() => {
if (isSelected) {
arrayHelpers.remove(ind);
Expand All @@ -150,18 +158,18 @@ export const IsPublicGroupSelector = <T extends IsPublicGroupSelectorFormType>({
</div>
</div>
);
})}
</div>
)}
/>
<ErrorMessage
name="groups"
component="div"
className="text-error text-sm mt-1"
/>
</>
)
))}
})
)}
</div>
)}
/>
<ErrorMessage
name="groups"
component="div"
className="text-error text-sm mt-1"
/>
</>
)}
</div>
);
};
82 changes: 48 additions & 34 deletions web/src/components/UserDropdown.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,33 @@ import {
} from "./icons/icons";
import { pageType } from "@/app/chat/sessionSidebar/types";

interface DropdownOptionProps {
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

turned the dropdown options into a component

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,
Expand Down Expand Up @@ -100,44 +127,31 @@ export function UserDropdown({
overscroll-contain
`}
>
{showAdminPanel && (
<>
<Link
{showAdminPanel ? (
<DropdownOption
href="/admin/indexing/status"
icon={<LightSettingsIcon className="h-5 w-5 my-auto mr-2" />}
label="Admin Panel"
/>
) : (
showCuratorPanel && (
<DropdownOption
href="/admin/indexing/status"
className="flex py-3 px-4 cursor-pointer !
rounded hover:bg-hover-light"
>
<LightSettingsIcon className="h-5 w-5 my-auto mr-2" />
Admin Panel
</Link>
</>
)}
{showCuratorPanel && (
<>
<Link
href="/admin/indexing/status"
className="flex py-3 px-4 cursor-pointer !
rounded hover:bg-hover-light"
>
<LightSettingsIcon className="h-5 w-5 my-auto mr-2" />
Curator Panel
</Link>
</>
icon={<LightSettingsIcon className="h-5 w-5 my-auto mr-2" />}
label="Curator Panel"
/>
)
)}
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

fixed logical issue that would cause the border to show when only logout was present

also allows admins/curators to logout from admin/curator menu


{(showAdminPanel || showCuratorPanel) && (
<div className="border-t border-border my-1" />
)}
{showLogout && (
<>
{(!(page == "search" || page == "chat") || showAdminPanel) && (
<div className="border-t border-border my-1" />
)}
<div
onClick={handleLogout}
className="mt-1 flex py-3 px-4 cursor-pointer hover:bg-hover-light"
>
<FiLogOut className="my-auto mr-2 text-lg" />
Log out
</div>
</>
<DropdownOption
onClick={handleLogout}
icon={<FiLogOut className="my-auto mr-2 text-lg" />}
label="Log out"
/>
)}
</div>
}
Expand Down
1 change: 1 addition & 0 deletions web/src/components/credentials/actions/CreateCredential.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -236,6 +236,7 @@ export default function CreateCredential({
<IsPublicGroupSelector
formikProps={formikProps}
objectName="credential"
publicToWhom="Curators"
/>
)}
</div>
Expand Down
Loading