jyapayne/langflow
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

Fix: bug on disabled share when there is no api key

Browse source
This commit is contained in:
igorrCarvalho 2023-11-27 21:28:33 -03:00
commit fa627eea03
5 changed files with 89 additions and 44 deletions
Download patch file Download diff file Expand all files Collapse all files

45
src/frontend/src/CustomNodes/GenericNode/index.tsx
View file

@ -198,14 +198,19 @@ export default function GenericNode({
</div> </div>
) : ( ) : (
<ShadTooltip content={data.node?.display_name}> <ShadTooltip content={data.node?.display_name}>
<div className="flex" onDoubleClick={() => setInputName(true)}> <div
<div className="flex"
className="generic-node-tooltip-div text-primary pr-3" onDoubleClick={() => setInputName(true)}
>
> <div className="generic-node-tooltip-div pr-3 text-primary">
{data.node?.display_name} {data.node?.display_name}
</div> </div>
{data.node?.flow&& <IconComponent name="Pencil" className="w-5 h-5 text-primary-content" />} {data.node?.flow && (
<IconComponent
name="Pencil"
className="h-5 w-5 text-primary-content"
/>
)}
</div> </div>
</ShadTooltip> </ShadTooltip>
)} )}
@ -235,10 +240,10 @@ export default function GenericNode({
setData={setData} setData={setData}
color={ color={
nodeColors[ nodeColors[
types[data.node?.template[templateField].type!] types[data.node?.template[templateField].type!]
] ?? ] ??
nodeColors[ nodeColors[
data.node?.template[templateField].type! data.node?.template[templateField].type!
] ?? ] ??
nodeColors.unknown nodeColors.unknown
} }
@ -285,7 +290,7 @@ export default function GenericNode({
color={nodeColors[types[data.type]] ?? nodeColors.unknown} color={nodeColors[types[data.type]] ?? nodeColors.unknown}
title={ title={
data.node?.output_types && data.node?.output_types &&
data.node.output_types.length > 0 data.node.output_types.length > 0
? data.node.output_types.join("|") ? data.node.output_types.join("|")
: data.type : data.type
} }
@ -323,10 +328,10 @@ export default function GenericNode({
<div className="max-h-96 overflow-auto"> <div className="max-h-96 overflow-auto">
{typeof validationStatus.params === "string" {typeof validationStatus.params === "string"
? validationStatus.params ? validationStatus.params
.split("\n") .split("\n")
.map((line: string, index: number) => ( .map((line: string, index: number) => (
<div key={index}>{line}</div> <div key={index}>{line}</div>
)) ))
: ""} : ""}
</div> </div>
) )
@ -370,14 +375,14 @@ export default function GenericNode({
className={ className={
showNode showNode
? "generic-node-desc " + ? "generic-node-desc " +
(data.node?.description !== "" ? "py-5" : "pb-5") (data.node?.description !== "" ? "py-5" : "pb-5")
: "" : ""
} }
> >
{data.node?.description !== "" && {data.node?.description !== "" &&
showNode && showNode &&
data.node?.flow && data.node?.flow &&
inputDescription ? ( inputDescription ? (
<Textarea <Textarea
autoFocus autoFocus
onBlur={() => { onBlur={() => {
@ -432,7 +437,7 @@ export default function GenericNode({
.map((templateField: string, idx) => ( .map((templateField: string, idx) => (
<div key={idx}> <div key={idx}>
{data.node!.template[templateField].show && {data.node!.template[templateField].show &&
!data.node!.template[templateField].advanced ? ( !data.node!.template[templateField].advanced ? (
<ParameterComponent <ParameterComponent
index={idx.toString()} index={idx.toString()}
key={scapedJSONStringfy({ key={scapedJSONStringfy({
@ -447,10 +452,10 @@ export default function GenericNode({
setData={setData} setData={setData}
color={ color={
nodeColors[ nodeColors[
types[data.node?.template[templateField].type!] types[data.node?.template[templateField].type!]
] ?? ] ??
nodeColors[ nodeColors[
data.node?.template[templateField].type! data.node?.template[templateField].type!
] ?? ] ??
nodeColors.unknown nodeColors.unknown
} }

60
src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
View file

@ -30,7 +30,7 @@ export default function ExtraSidebar(): JSX.Element {
useContext(typesContext); useContext(typesContext);
const { flows, tabId, uploadFlow, tabsState, saveFlow, isBuilt, version } = const { flows, tabId, uploadFlow, tabsState, saveFlow, isBuilt, version } =
useContext(FlowsContext); useContext(FlowsContext);
const { hasApiKey,validApiKey } = useContext(StoreContext); const { hasApiKey, validApiKey } = useContext(StoreContext);
const { setErrorData } = useContext(alertContext); const { setErrorData } = useContext(alertContext);
const [dataFilter, setFilterData] = useState(data); const [dataFilter, setFilterData] = useState(data);
const [search, setSearch] = useState(""); const [search, setSearch] = useState("");
@ -181,25 +181,54 @@ export default function ExtraSidebar(): JSX.Element {
}, [getFilterEdge, data]); }, [getFilterEdge, data]);
const ModalMemo = useMemo( const ModalMemo = useMemo(
() => ( () =>
<ShareModal is_component={false} component={flow!} disabled={(!hasApiKey||!validApiKey)}> !hasApiKey || !validApiKey ? (
<ShadTooltip content="Share" side="top"> <button
<button disabled={!hasApiKey} className={classNames("extra-side-bar-buttons",(!hasApiKey||!validApiKey)?"button-disable cursor-default":"")}> disabled={!hasApiKey || !validApiKey}
<IconComponent name="Share2" className={classNames("side-bar-button-size",(!hasApiKey||!validApiKey)?"extra-side-bar-save-disable":"")} /> className={classNames(
"extra-side-bar-buttons",
!hasApiKey || !validApiKey ? "button-disable cursor-default" : ""
)}
>
<IconComponent
name="Share2"
className={classNames(
"side-bar-button-size",
!hasApiKey || !validApiKey ? "extra-side-bar-save-disable" : ""
)}
/>
</button>
) : (
<ShareModal
is_component={false}
component={flow!}
disabled={!hasApiKey || !validApiKey}
>
<button
disabled={!hasApiKey || !validApiKey}
className={classNames(
"extra-side-bar-buttons",
!hasApiKey || !validApiKey ? "button-disable cursor-default" : ""
)}
>
<IconComponent
name="Share2"
className={classNames(
"side-bar-button-size",
!hasApiKey || !validApiKey ? "extra-side-bar-save-disable" : ""
)}
/>
</button> </button>
</ShadTooltip> </ShareModal>
</ShareModal> ),
), [hasApiKey, validApiKey]
[hasApiKey,validApiKey]
); );
const ExportMemo = useMemo( const ExportMemo = useMemo(
() => ( () => (
<ExportModal> <ExportModal>
<ShadTooltip content="Export" side="top"> <ShadTooltip content="Export" side="top">
<button <button className={classNames("extra-side-bar-buttons")}>
className={classNames("extra-side-bar-buttons")}
>
<IconComponent name="FileDown" className="side-bar-button-size" /> <IconComponent name="FileDown" className="side-bar-button-size" />
</button> </button>
</ShadTooltip> </ShadTooltip>
@ -280,8 +309,9 @@ export default function ExtraSidebar(): JSX.Element {
</div> </div>
</ShadTooltip> </ShadTooltip>
</div> </div>
<ShadTooltip content="Share" side="top" styleClasses="cursor-default">
<div className="side-bar-button">{ModalMemo}</div> <div className="side-bar-button">{ModalMemo}</div>
</ShadTooltip>
</div> </div>
<Separator /> <Separator />
<div className="side-bar-search-div-placement"> <div className="side-bar-search-div-placement">

10
src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
View file

@ -52,7 +52,7 @@ export default function NodeToolbarComponent({
); );
const updateNodeInternals = useUpdateNodeInternals(); const updateNodeInternals = useUpdateNodeInternals();
const { getNodeId } = useContext(FlowsContext); const { getNodeId } = useContext(FlowsContext);
const { hasApiKey,validApiKey } = useContext(StoreContext); const { hasApiKey, validApiKey } = useContext(StoreContext);
function canMinimize() { function canMinimize() {
let countHandles: number = 0; let countHandles: number = 0;
@ -161,9 +161,9 @@ export default function NodeToolbarComponent({
<a <a
className={classNames( className={classNames(
"relative -ml-px inline-flex items-center bg-background px-2 py-2 text-foreground shadow-md ring-1 ring-inset ring-ring transition-all duration-500 ease-in-out hover:bg-muted focus:z-10" + "relative -ml-px inline-flex items-center bg-background px-2 py-2 text-foreground shadow-md ring-1 ring-inset ring-ring transition-all duration-500 ease-in-out hover:bg-muted focus:z-10" +
(data.node?.documentation === "" (data.node?.documentation === ""
? " text-muted-foreground" ? " text-muted-foreground"
: " text-foreground") : " text-foreground")
)} )}
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
@ -232,7 +232,7 @@ export default function NodeToolbarComponent({
</SelectItem> </SelectItem>
)} )}
<SelectItem disabled={(!hasApiKey||!validApiKey)} value={"Share"}> <SelectItem disabled={!hasApiKey || !validApiKey} value={"Share"}>
<div className="flex"> <div className="flex">
<IconComponent <IconComponent
name="Share2" name="Share2"

14
src/frontend/src/pages/StorePage/index.tsx
View file

@ -275,8 +275,18 @@ export default function StorePage(): JSX.Element {
<SelectContent> <SelectContent>
<SelectGroup> <SelectGroup>
<SelectItem value="all">All</SelectItem> <SelectItem value="all">All</SelectItem>
<SelectItem disabled={!hasApiKey} value="createdbyme">Created By Me</SelectItem> <SelectItem
<SelectItem disabled={!hasApiKey} value="likedbyme">Liked By Me</SelectItem> disabled={!hasApiKey || !validApiKey}
value="createdbyme"
>
Created By Me
</SelectItem>
<SelectItem
disabled={!hasApiKey || !validApiKey}
value="likedbyme"
>
Liked By Me
</SelectItem>
</SelectGroup> </SelectGroup>
</SelectContent> </SelectContent>
</Select> </Select>

4
src/frontend/tests/end-to-end/promptModalComponent.spec.ts
View file

@ -152,8 +152,8 @@ test("PromptTemplateComponent", async ({ page }) => {
) )
.click(); .click();
await page.getByTestId("more-options-modal").click(); await page.getByTestId("more-options-modal").click();
await page.getByTestId("edit-button-modal").click(); await page.getByTestId("edit-button-modal").click();
await page.locator('//*[@id="showprompt1"]').click(); await page.locator('//*[@id="showprompt1"]').click();
expect( expect(