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

Jump to bottom

fix: update project description, update alerts animation, fix delete and duplicate loading #3835

Merged
merged 5 commits into from
Sep 18, 2024
Merged

fix: update project description, update alerts animation, fix delete and duplicate loading #3835

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
a0e2542
Deleted "personal" from manage your projects
lucaseduoli Sep 17, 2024
a50778c
Removed animations from alerts on the dropdown
lucaseduoli Sep 17, 2024
40c9ebf
Changed useDeleteFlow to return isPending as well
lucaseduoli Sep 17, 2024
41bd8e3
Added delete loading to components and added filter of components not…
lucaseduoli Sep 17, 2024
79603ad
added isDuplicating as a isMutating with the postAddFlow
lucaseduoli Sep 17, 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
273 changes: 129 additions & 144 deletions src/frontend/src/alerts/alertDropDown/components/singleAlertComponent/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import { CustomLink } from "@/customization/components/custom-link";
import { Transition } from "@headlessui/react";
import { useState } from "react";
import IconComponent from "../../../../components/genericIconComponent";
import { SingleAlertComponentType } from "../../../../types/alerts";
Expand All @@ -11,161 +10,147 @@ export default function SingleAlert({
const [show, setShow] = useState(true);
const type = dropItem.type;

return (
<Transition
className="noflow nowheel nopan nodelete nodrag relative"
show={show}
appear={true}
enter="transition-transform duration-500 ease-out"
enterFrom={"transform translate-x-[-100%]"}
enterTo={"transform translate-x-0"}
leave="transition-transform duration-500 ease-in"
leaveFrom={"transform translate-x-0"}
leaveTo={"transform translate-x-[-100%]"}
return type === "error" ? (
<div
className="mx-2 mb-2 flex rounded-md bg-error-background p-3"
key={dropItem.id}
>
{type === "error" ? (
<div
className="mx-2 mb-2 flex rounded-md bg-error-background p-3"
key={dropItem.id}
>
<div className="flex-shrink-0">
<div className="flex-shrink-0">
<IconComponent
name="XCircle"
className="h-5 w-5 text-status-red"
aria-hidden="true"
/>
</div>
<div className="ml-3">
<h3 className="text-sm font-medium text-error-foreground word-break-break-word">
{dropItem.title}
</h3>
{dropItem.list ? (
<div className="mt-2 text-sm text-error-foreground">
<ul className="list-disc space-y-1 pl-5">
{dropItem.list.map((item, idx) => (
<li className="word-break-break-word" key={idx}>
{item}
</li>
))}
</ul>
</div>
) : (
<></>
)}
</div>
<div className="ml-auto pl-3">
<div className="-mx-1.5 -my-1.5">
<button
type="button"
onClick={() => {
setShow(false);
setTimeout(() => {
removeAlert(dropItem.id);
}, 500);
}}
className="inline-flex rounded-md p-1.5 text-status-red"
>
<span className="sr-only">Dismiss</span>
<IconComponent
name="XCircle"
className="h-5 w-5 text-status-red"
name="X"
className="h-4 w-4 text-error-foreground"
aria-hidden="true"
/>
</div>
<div className="ml-3">
<h3 className="text-sm font-medium text-error-foreground word-break-break-word">
{dropItem.title}
</h3>
{dropItem.list ? (
<div className="mt-2 text-sm text-error-foreground">
<ul className="list-disc space-y-1 pl-5">
{dropItem.list.map((item, idx) => (
<li className="word-break-break-word" key={idx}>
{item}
</li>
))}
</ul>
</div>
) : (
<></>
)}
</div>
<div className="ml-auto pl-3">
<div className="-mx-1.5 -my-1.5">
<button
type="button"
onClick={() => {
setShow(false);
setTimeout(() => {
removeAlert(dropItem.id);
}, 500);
}}
className="inline-flex rounded-md p-1.5 text-status-red"
>
<span className="sr-only">Dismiss</span>
<IconComponent
name="X"
className="h-4 w-4 text-error-foreground"
aria-hidden="true"
/>
</button>
</div>
</div>
</button>
</div>
) : type === "notice" ? (
<div
className="mx-2 mb-2 flex rounded-md bg-info-background p-3"
key={dropItem.id}
>
<div className="flex-shrink-0 cursor-help">
</div>
</div>
) : type === "notice" ? (
<div
className="mx-2 mb-2 flex rounded-md bg-info-background p-3"
key={dropItem.id}
>
<div className="flex-shrink-0 cursor-help">
<IconComponent
name="Info"
className="h-5 w-5 text-status-blue"
aria-hidden="true"
/>
</div>
<div className="ml-3 flex-1 md:flex md:justify-between">
<p className="text-sm font-medium text-info-foreground">
{dropItem.title}
</p>
<p className="mt-3 text-sm md:ml-6 md:mt-0">
{dropItem.link ? (
<CustomLink
to={dropItem.link}
className="whitespace-nowrap font-medium text-info-foreground hover:text-accent-foreground"
>
Details
</CustomLink>
) : (
<></>
)}
</p>
</div>
<div className="ml-auto pl-3">
<div className="-mx-1.5 -my-1.5">
<button
type="button"
onClick={() => {
setShow(false);
setTimeout(() => {
removeAlert(dropItem.id);
}, 500);
}}
className="inline-flex rounded-md p-1.5 text-info-foreground"
>
<span className="sr-only">Dismiss</span>
<IconComponent
name="Info"
className="h-5 w-5 text-status-blue"
name="X"
className="h-4 w-4 text-info-foreground"
aria-hidden="true"
/>
</div>
<div className="ml-3 flex-1 md:flex md:justify-between">
<p className="text-sm font-medium text-info-foreground">
{dropItem.title}
</p>
<p className="mt-3 text-sm md:ml-6 md:mt-0">
{dropItem.link ? (
<CustomLink
to={dropItem.link}
className="whitespace-nowrap font-medium text-info-foreground hover:text-accent-foreground"
>
Details
</CustomLink>
) : (
<></>
)}
</p>
</div>
<div className="ml-auto pl-3">
<div className="-mx-1.5 -my-1.5">
<button
type="button"
onClick={() => {
setShow(false);
setTimeout(() => {
removeAlert(dropItem.id);
}, 500);
}}
className="inline-flex rounded-md p-1.5 text-info-foreground"
>
<span className="sr-only">Dismiss</span>
<IconComponent
name="X"
className="h-4 w-4 text-info-foreground"
aria-hidden="true"
/>
</button>
</div>
</div>
</button>
</div>
) : (
<div
className="mx-2 mb-2 flex rounded-md bg-success-background p-3"
key={dropItem.id}
>
<div className="flex-shrink-0">
</div>
</div>
) : (
<div
className="mx-2 mb-2 flex rounded-md bg-success-background p-3"
key={dropItem.id}
>
<div className="flex-shrink-0">
<IconComponent
name="CheckCircle2"
className="h-5 w-5 text-status-green"
aria-hidden="true"
/>
</div>
<div className="ml-3">
<p className="text-sm font-medium text-success-foreground">
{dropItem.title}
</p>
</div>
<div className="ml-auto pl-3">
<div className="-mx-1.5 -my-1.5">
<button
type="button"
onClick={() => {
setShow(false);
setTimeout(() => {
removeAlert(dropItem.id);
}, 500);
}}
className="inline-flex rounded-md p-1.5 text-status-green"
>
<span className="sr-only">Dismiss</span>
<IconComponent
name="CheckCircle2"
className="h-5 w-5 text-status-green"
name="X"
className="h-4 w-4 text-success-foreground"
aria-hidden="true"
/>
</div>
<div className="ml-3">
<p className="text-sm font-medium text-success-foreground">
{dropItem.title}
</p>
</div>
<div className="ml-auto pl-3">
<div className="-mx-1.5 -my-1.5">
<button
type="button"
onClick={() => {
setShow(false);
setTimeout(() => {
removeAlert(dropItem.id);
}, 500);
}}
className="inline-flex rounded-md p-1.5 text-status-green"
>
<span className="sr-only">Dismiss</span>
<IconComponent
name="X"
className="h-4 w-4 text-success-foreground"
aria-hidden="true"
/>
</button>
</div>
</div>
</button>
</div>
)}
</Transition>
</div>
</div>
);
}
2 changes: 1 addition & 1 deletion src/frontend/src/constants/constants.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -703,7 +703,7 @@ export const CHAT_INPUT_PLACEHOLDER =
export const CHAT_INPUT_PLACEHOLDER_SEND = "Send a message...";
export const EDIT_CODE_TITLE = "Edit Code";
export const MY_COLLECTION_DESC =
"Manage your personal projects. Download and upload entire collections.";
"Manage your projects. Download and upload entire collections.";
export const STORE_DESC = "Explore community-shared flows and components.";
export const STORE_TITLE = "Langflow Store";
export const NO_API_KEY = "You don't have an API key.";
Expand Down
2 changes: 1 addition & 1 deletion src/frontend/src/hooks/flows/use-add-flow.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ const useAddFlow = () => {
);
const flows = useFlowsManagerStore((state) => state.flows);
const setFlows = useFlowsManagerStore((state) => state.setFlows);
const deleteFlow = useDeleteFlow();
const { deleteFlow } = useDeleteFlow();

const { folderId } = useParams();

Expand Down
4 changes: 2 additions & 2 deletions src/frontend/src/hooks/flows/use-delete-flow.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ const useDeleteFlow = () => {
const flows = useFlowsManagerStore((state) => state.flows);
const setFlows = useFlowsManagerStore((state) => state.setFlows);

const { mutate } = useDeleteDeleteFlows();
const { mutate, isPending } = useDeleteDeleteFlows();

const deleteFlow = async ({
id,
Expand Down Expand Up @@ -45,7 +45,7 @@ const useDeleteFlow = () => {
});
};

return deleteFlow;
return { deleteFlow, isDeleting: isPending };
};

export default useDeleteFlow;
2 changes: 1 addition & 1 deletion ...d/src/pages/FlowPage/components/extraSidebarComponent/sideBarDraggableComponent/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ export const SidebarDraggableComponent = forwardRef(
ref,
) => {
const [open, setOpen] = useState(false);
const deleteFlow = useDeleteFlow();
const { deleteFlow } = useDeleteFlow();
const flows = useFlowsManagerStore((state) => state.flows);

const version = useDarkStore((state) => state.version);
Expand Down
5 changes: 2 additions & 3 deletions src/frontend/src/pages/MainPage/components/componentsComponent/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import { usePostDownloadMultipleFlows } from "@/controllers/API/queries/flows";
import useDeleteFlow from "@/hooks/flows/use-delete-flow";
import { useEffect, useMemo, useState } from "react";
import { FormProvider, useForm, useWatch } from "react-hook-form";
import { useLocation, useParams } from "react-router-dom";
Expand Down Expand Up @@ -29,10 +28,12 @@ export default function ComponentsComponent({
type = "all",
currentFolder,
isLoading,
deleteFlow,
}: {
type?: string;
currentFolder?: FolderType;
isLoading: boolean;
deleteFlow: ({ id }: { id: string[] }) => Promise<void>;
}) {
const { folderId } = useParams();

Expand Down Expand Up @@ -176,8 +177,6 @@ export default function ComponentsComponent({
handleExport,
);

const deleteFlow = useDeleteFlow();

const handleDeleteMultiple = () => {
deleteFlow({ id: selectedFlowsComponentsCards })
.then(() => {
Expand Down
Loading
Loading