Skip to content

Commit

Permalink
fix: update project description, update alerts animation, fix delete …
Browse files Browse the repository at this point in the history 
…and duplicate loading (#3835)

* Deleted "personal" from manage your projects

* Removed animations from alerts on the dropdown

* Changed useDeleteFlow to return isPending as well

* Added delete loading to components and added filter of components not present in "flows" for deletion

* added isDuplicating as a isMutating with the postAddFlow
  • Loading branch information
@lucaseduoli
lucaseduoli authored Sep 18, 2024
1 parent a7d1449 commit bad009c
Show file tree
Hide file tree
Showing 7 changed files with 167 additions and 156 deletions.
273 changes: 129 additions & 144 deletions src/frontend/src/alerts/alertDropDown/components/singleAlertComponent/index.tsx
View file
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
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
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
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
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
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

0 comments on commit bad009c

Please sign in to comment.