From 20a99ed41803d9a1c3871e53ccaa0c4c0de32468 Mon Sep 17 00:00:00 2001 From: cristhianzl Date: Wed, 29 Nov 2023 10:04:10 -0300 Subject: [PATCH] chore(tagsSelectorComponent): add useContext hook to import statement to use darkContext chore(tagsSelectorComponent): add darkContext to useContext hook to access dark mode state chore(tagsSelectorComponent): add className conditionally based on dark mode state to fade-container div chore(shareModal): change initial state of checked variable to false chore(shareModal): add saveFlow function to useContext hook to access saveFlow function from FlowsContext chore(shareModal): add saveFlow function call to saveFlowStore function call to save flow data to store chore(shareModal): add saveFlow function call to addFlow function call to add flow to FlowsContext chore(shareModal): set checked variable to false when sharePublic state changes chore(shareModal): disable save with my API keys checkbox when sharePublic is true chore(shareModal): add warning message about deselecting save with my API keys checkbox chore(components): add resetFilter function to reset filter state variables and set allData to original flows data chore(components): call resetFilter function when flow is deleted to reset filter state variables and set allData to original flows data chore(applies.css): rearrange classes in community-page-arrangement to match order of properties chore(applies.css): add fade-container-dark class to handle dark mode for fade-container div chore(applies.css): add linear gradient background color for fade-container-dark class to handle dark mode --- .../tagsSelectorComponent/index.tsx | 9 ++++- src/frontend/src/modals/shareModal/index.tsx | 31 ++++++++++----- .../MainPage/components/components/index.tsx | 12 ++++++ src/frontend/src/style/applies.css | 38 +++++++++++++++---- 4 files changed, 71 insertions(+), 19 deletions(-) diff --git a/src/frontend/src/components/tagsSelectorComponent/index.tsx b/src/frontend/src/components/tagsSelectorComponent/index.tsx index 50be6b87e..3c0cbeb09 100644 --- a/src/frontend/src/components/tagsSelectorComponent/index.tsx +++ b/src/frontend/src/components/tagsSelectorComponent/index.tsx @@ -1,4 +1,5 @@ -import { useEffect, useRef, useState } from "react"; +import { useContext, useEffect, useRef, useState } from "react"; +import { darkContext } from "../../contexts/darkContext"; import { cn } from "../../utils/utils"; import { Badge } from "../ui/badge"; @@ -23,6 +24,7 @@ export function TagsSelector({ : selectedTags.filter((_, i) => i !== index); setSelectedTags(newArray); }; + const { dark } = useContext(darkContext); const scrollContainerRef = useRef(null); const fadeContainerRef = useRef(null); @@ -70,7 +72,10 @@ export function TagsSelector({ }, [divWidth, loadingTags]); // Depend on divWidth return ( -
+
{!loadingTags && tags.map((tag, idx) => ( diff --git a/src/frontend/src/modals/shareModal/index.tsx b/src/frontend/src/modals/shareModal/index.tsx index 0e8e13dfe..01c70f264 100644 --- a/src/frontend/src/modals/shareModal/index.tsx +++ b/src/frontend/src/modals/shareModal/index.tsx @@ -35,18 +35,19 @@ export default function ShareModal({ const { version, addFlow } = useContext(FlowsContext); const { hasApiKey } = useContext(StoreContext); const { setSuccessData, setErrorData } = useContext(alertContext); - const [checked, setChecked] = useState(true); + const [checked, setChecked] = useState(false); const [name, setName] = useState(component?.name ?? ""); const [description, setDescription] = useState(component?.description ?? ""); const [internalOpen, internalSetOpen] = useState(children ? false : true); - const nameComponent = is_component ? "Component" : "Flow"; + const nameComponent = is_component ? "component" : "flow"; const [tags, setTags] = useState<{ id: string; name: string }[]>([]); const [loadingTags, setLoadingTags] = useState(false); const [sharePublic, setSharePublic] = useState(true); const [selectedTags, setSelectedTags] = useState([]); const [unavaliableNames, setUnavaliableNames] = useState([]); + const { saveFlow } = useContext(FlowsContext); useEffect(() => { if (open || internalOpen) { @@ -78,10 +79,10 @@ export default function ShareModal({ useEffect(() => { setName(component?.name ?? ""); setDescription(component?.description ?? ""); - }, [component]); + }, [component, open]); const handleShareComponent = () => { - const saveFlow: FlowType = checked + const flow: FlowType = checked ? { id: component!.id, data: component!.data, @@ -98,10 +99,18 @@ export default function ShareModal({ last_tested_version: version, is_component: is_component, }); - saveFlowStore(saveFlow, getTagsIds(selectedTags, tags), sharePublic).then( + + saveFlow( + { + ...flow!, + }, + true + ); + + saveFlowStore(flow!, getTagsIds(selectedTags, tags), sharePublic).then( () => { if (is_component) { - addFlow(true, saveFlow); + addFlow(true, flow); } setSuccessData({ title: `${nameComponent} shared successfully`, @@ -124,7 +133,7 @@ export default function ShareModal({ > {children ? children : <>} Share { setSharePublic(event); + setChecked(false); }} />
@@ -169,14 +179,15 @@ export default function ShareModal({ onCheckedChange={(event: boolean) => { setChecked(event); }} + disabled={sharePublic} />
- Caution: Uncheck this box only removes API keys from fields - specifically designated for API keys. + Warning: Deselecting this box will exclusively eliminate API keys from + fields explicitly designated for API keys. diff --git a/src/frontend/src/pages/MainPage/components/components/index.tsx b/src/frontend/src/pages/MainPage/components/components/index.tsx index dac6a2cf9..360e8ed01 100644 --- a/src/frontend/src/pages/MainPage/components/components/index.tsx +++ b/src/frontend/src/pages/MainPage/components/components/index.tsx @@ -88,6 +88,12 @@ export default function ComponentsComponent({ } }; + function resetFilter() { + setPageIndex(1); + setPageSize(10); + setAllData(flows); + } + return ( { removeFlow(item.id); + setSuccessData({ + title: `${ + item.is_component ? "Component" : "Flow" + } deleted successfully!`, + }); + resetFilter(); }} key={idx} data={item} diff --git a/src/frontend/src/style/applies.css b/src/frontend/src/style/applies.css index d0572c38d..3506b3662 100644 --- a/src/frontend/src/style/applies.css +++ b/src/frontend/src/style/applies.css @@ -241,7 +241,7 @@ } .community-page-arrangement { - @apply flex-max-width justify-between h-full flex-col overflow-auto bg-background px-16; + @apply flex-max-width h-full flex-col justify-between overflow-auto bg-background px-16; } .community-page-nav-arrangement { @@ -1037,27 +1037,51 @@ .fade-container { @apply relative overflow-hidden; } - + .fade-container::before, .fade-container::after { - @apply absolute top-0 bottom-0 pointer-events-none; - content: ''; + @apply pointer-events-none absolute bottom-0 top-0; + content: ""; width: 50px; opacity: 0; transition: opacity 0.3s; background: linear-gradient(to right, white, transparent); } - + .fade-container::after { @apply right-0; transform: rotate(180deg); } - + .fade-container.fade-left::before, .fade-container.fade-right::after { opacity: 1; } - + + .fade-container-dark { + @apply relative overflow-hidden; + } + + .fade-container-dark::before, + .fade-container-dark::after { + @apply pointer-events-none absolute bottom-0 top-0; + content: ""; + width: 50px; + opacity: 0; + transition: opacity 0.3s; + background: linear-gradient(to right, black, transparent); + } + + .fade-container-dark:after { + @apply right-0; + transform: rotate(180deg); + } + + .fade-container-dark.fade-left::before, + .fade-container-dark.fade-right::after { + opacity: 1; + } + .scroll-container { @apply flex overflow-x-scroll scrollbar-hide; }