diff --git a/src/frontend/src/components/cardComponent/index.tsx b/src/frontend/src/components/cardComponent/index.tsx index 8b3510f45..e82263513 100644 --- a/src/frontend/src/components/cardComponent/index.tsx +++ b/src/frontend/src/components/cardComponent/index.tsx @@ -8,7 +8,7 @@ import useFlowsManagerStore from "../../stores/flowsManagerStore"; import { useStoreStore } from "../../stores/storeStore"; import { storeComponent } from "../../types/store"; import cloneFLowWithParent from "../../utils/storeUtils"; -import { cn } from "../../utils/utils"; +import { cn, convertTestName } from "../../utils/utils"; import IconComponent from "../genericIconComponent"; import ShadTooltip from "../shadTooltipComponent"; import { Badge } from "../ui/badge"; @@ -48,11 +48,11 @@ export default function CollectionCardComponent({ const [loading, setLoading] = useState(false); const [loadingLike, setLoadingLike] = useState(false); const [liked_by_user, setLiked_by_user] = useState( - data?.liked_by_user ?? false + data?.liked_by_user ?? false, ); const [likes_count, setLikes_count] = useState(data?.liked_by_count ?? 0); const [downloads_count, setDownloads_count] = useState( - data?.downloads_count ?? 0 + data?.downloads_count ?? 0, ); const currentFlow = useFlowsManagerStore((state) => state.currentFlow); const setCurrentFlow = useFlowsManagerStore((state) => state.setCurrentFlow); @@ -63,7 +63,7 @@ export default function CollectionCardComponent({ const [openPlayground, setOpenPlayground] = useState(false); const [openDelete, setOpenDelete] = useState(false); const setCurrentFlowId = useFlowsManagerStore( - (state) => state.setCurrentFlowId + (state) => state.setCurrentFlowId, ); const [loadingPlayground, setLoadingPlayground] = useState(false); @@ -106,16 +106,18 @@ export default function CollectionCardComponent({ addFlow(true, newFlow) .then((id) => { setSuccessData({ - title: `${name} ${isStore ? "Downloaded" : "Installed" - } Successfully.`, + title: `${name} ${ + isStore ? "Downloaded" : "Installed" + } Successfully.`, }); setLoading(false); }) .catch((error) => { setLoading(false); setErrorData({ - title: `Error ${isStore ? "downloading" : "installing" - } the ${name}`, + title: `Error ${ + isStore ? "downloading" : "installing" + } the ${name}`, list: [error["response"]["data"]["detail"]], }); }); @@ -167,10 +169,11 @@ export default function CollectionCardComponent({ return ( <> @@ -183,7 +186,7 @@ export default function CollectionCardComponent({ "flex-shrink-0", data.is_component ? "mx-0.5 h-6 w-6 text-component-icon" - : "h-7 w-7 flex-shrink-0 text-flow-icon" + : "h-7 w-7 flex-shrink-0 text-flow-icon", )} name={data.is_component ? "ToyBrick" : "Group"} /> @@ -235,17 +238,17 @@ export default function CollectionCardComponent({ )} {onDelete && data?.metadata === undefined && ( - + > + + )} @@ -326,9 +329,7 @@ export default function CollectionCardComponent({ )} Playground - ) : ( - undefined - )} + ) : undefined} {data.liked_by_count != undefined && (
{onDelete && data?.metadata !== undefined ? ( @@ -351,10 +352,11 @@ export default function CollectionCardComponent({ } > @@ -389,7 +391,7 @@ export default function CollectionCardComponent({ liked_by_user ? "fill-destructive stroke-destructive" : "", - !authorized ? " text-ring" : "" + !authorized ? " text-ring" : "", )} /> @@ -427,7 +429,7 @@ export default function CollectionCardComponent({ } className={cn( loading ? "h-5 w-5 animate-spin" : "h-5 w-5", - !authorized ? " text-ring" : "" + !authorized ? " text-ring" : "", )} /> @@ -490,13 +492,12 @@ export default function CollectionCardComponent({ open={openDelete} setOpen={setOpenDelete} onConfirm={() => { - if(onDelete) onDelete(); + if (onDelete) onDelete(); }} > <> - ) - } + )} ); } diff --git a/src/frontend/src/utils/utils.ts b/src/frontend/src/utils/utils.ts index 1c580fa4b..43838bb27 100644 --- a/src/frontend/src/utils/utils.ts +++ b/src/frontend/src/utils/utils.ts @@ -61,7 +61,7 @@ export function normalCaseToSnakeCase(str: string): string { export function toTitleCase( str: string | undefined, - isNodeField?: boolean + isNodeField?: boolean, ): string { if (!str) return ""; let result = str @@ -70,7 +70,7 @@ export function toTitleCase( if (isNodeField) return word; if (index === 0) { return checkUpperWords( - word[0].toUpperCase() + word.slice(1).toLowerCase() + word[0].toUpperCase() + word.slice(1).toLowerCase(), ); } return checkUpperWords(word.toLowerCase()); @@ -83,7 +83,7 @@ export function toTitleCase( if (isNodeField) return word; if (index === 0) { return checkUpperWords( - word[0].toUpperCase() + word.slice(1).toLowerCase() + word[0].toUpperCase() + word.slice(1).toLowerCase(), ); } return checkUpperWords(word.toLowerCase()); @@ -93,8 +93,8 @@ export function toTitleCase( export function getUnavailableFields(variables: { [key: string]: { default_fields?: string[] }; -}): {[name: string]: string} { - const unVariables:{[name: string]: string} = {}; +}): { [name: string]: string } { + const unVariables: { [name: string]: string } = {}; Object.keys(variables).forEach((key) => { if (variables[key].default_fields) { variables[key].default_fields!.forEach((field) => { @@ -123,7 +123,7 @@ export function groupByFamily( data: APIDataType, baseClasses: string, left: boolean, - flow?: NodeType[] + flow?: NodeType[], ): groupedObjType[] { const baseClassesSet = new Set(baseClasses.split("\n")); let arrOfPossibleInputs: Array<{ @@ -149,7 +149,7 @@ export function groupByFamily( baseClassesSet.has(template.type)) || (template.input_types && template.input_types.some((inputType) => - baseClassesSet.has(inputType) + baseClassesSet.has(inputType), ))) ); }; @@ -169,7 +169,7 @@ export function groupByFamily( hasBaseClassInBaseClasses: foundNode?.hasBaseClassInBaseClasses || nodeData.node!.base_classes.some((baseClass) => - baseClassesSet.has(baseClass) + baseClassesSet.has(baseClass), ), //seta como anterior ou verifica se o node tem base class displayName: nodeData.node?.display_name, }); @@ -186,10 +186,10 @@ export function groupByFamily( if (!foundNode) { foundNode = { hasBaseClassInTemplate: Object.values(node!.template).some( - checkBaseClass + checkBaseClass, ), hasBaseClassInBaseClasses: node!.base_classes.some((baseClass) => - baseClassesSet.has(baseClass) + baseClassesSet.has(baseClass), ), displayName: node?.display_name, }; @@ -246,7 +246,7 @@ export function getRandomDescription(): string { export function getRandomName( retry: number = 0, noSpace: boolean = false, - maxRetries: number = 3 + maxRetries: number = 3, ): string { const left: string[] = ADJECTIVES; const right: string[] = NOUNS; @@ -325,7 +325,7 @@ export function getChatInputField(flowState?: FlowState) { export function getPythonApiCode( flow: FlowType, isAuth: boolean, - tweak?: any[] + tweak?: any[], ): string { const flowId = flow.id; @@ -393,7 +393,7 @@ print(run_flow(message=message, flow_id=FLOW_ID, tweaks=TWEAKS${ export function getCurlCode( flow: FlowType, isAuth: boolean, - tweak?: any[] + tweak?: any[], ): string { const flowId = flow.id; const tweaks = buildTweaks(flow); @@ -463,7 +463,7 @@ result = run_flow_from_json(flow="${flowName}.json", export function getWidgetCode( flow: FlowType, isAuth: boolean, - flowState?: FlowState + flowState?: FlowState, ): string { const flowId = flow.id; const flowName = flow.name; @@ -593,7 +593,7 @@ export function checkLocalStorageKey(key: string): boolean { export function IncrementObjectKey( object: object, - key: string + key: string, ): { newKey: string; increment: number } { let count = 1; const type = removeCountFromString(key); @@ -665,7 +665,7 @@ export function getSetFromObject(obj: object, key?: string): Set { export function getFieldTitle( template: APITemplateType, - templateField: string + templateField: string, ): string { return template[templateField].display_name ? template[templateField].display_name! @@ -715,3 +715,7 @@ export function freezeObject(obj: any) { if (!obj) return obj; return JSON.parse(JSON.stringify(obj)); } + +export function convertTestName(name: string): string { + return name.replace(/ /g, "-").toLowerCase(); +} diff --git a/src/frontend/tests/end-to-end/deleteComponentFlows.spec.ts b/src/frontend/tests/end-to-end/deleteComponentFlows.spec.ts new file mode 100644 index 000000000..ecb590aa9 --- /dev/null +++ b/src/frontend/tests/end-to-end/deleteComponentFlows.spec.ts @@ -0,0 +1,46 @@ +import { test } from "@playwright/test"; + +test("shoud delete a flow", async ({ page }) => { + await page.goto("/"); + await page.waitForTimeout(2000); + await page.getByText("Store").nth(0).click(); + await page.getByTestId("install-Website Content QA").click(); + await page.waitForTimeout(5000); + await page.getByText("My Collection").nth(0).click(); + await page.getByText("Website Content QA").first().isVisible(); + await page + .getByTestId("card-website-content-qa") + .first() + .hover() + .then(async () => { + await page.getByTestId("icon-Trash2").first().click(); + await page.waitForTimeout(2000); + }); + await page.getByText("Confirm deletion of component?").isVisible(); + await page.getByText("Delete").nth(1).click(); + await page.waitForTimeout(1000); + await page.getByText("Successfully").first().isVisible(); +}); + +test("shoud delete a component", async ({ page }) => { + await page.goto("/"); + await page.waitForTimeout(2000); + await page.getByText("Store").nth(0).click(); + await page.getByTestId("install-Basic RAG").click(); + await page.waitForTimeout(5000); + await page.getByText("My Collection").nth(0).click(); + await page.getByText("Components").first().click(); + await page.getByText("Basic RAG").first().isVisible(); + await page + .getByTestId("card-basic-rag") + .first() + .hover() + .then(async () => { + await page.getByTestId("icon-Trash2").first().click(); + await page.waitForTimeout(2000); + }); + await page.getByText("Confirm deletion of component?").isVisible(); + await page.getByText("Delete").nth(1).click(); + await page.waitForTimeout(1000); + await page.getByText("Successfully").first().isVisible(); +});