fix(extraSidebarComponent): add validApiKey to the dependency array of ModalMemo to update the disabled state of the Share button based on validApiKey value

fix(extraSidebarComponent): update the disabled state of the Share button to also consider validApiKey value
fix(nodeToolbarComponent): add validApiKey to the dependency array of ModalMemo to update the disabled state of the Share SelectItem based on validApiKey value
fix(nodeToolbarComponent): update the disabled state of the Share SelectItem to also consider validApiKey value
fix(applies.css): remove unnecessary whitespace in the class definition of extra-side-bar-buttons
This commit is contained in:
anovazzi1 2023-11-27 18:43:46 -03:00
commit 31f89283b4
3 changed files with 21 additions and 23 deletions

View file

@ -30,7 +30,7 @@ export default function ExtraSidebar(): JSX.Element {
useContext(typesContext);
const { flows, tabId, uploadFlow, tabsState, saveFlow, isBuilt, version } =
useContext(FlowsContext);
const { hasApiKey } = useContext(StoreContext);
const { hasApiKey,validApiKey } = useContext(StoreContext);
const { setErrorData } = useContext(alertContext);
const [dataFilter, setFilterData] = useState(data);
const [search, setSearch] = useState("");
@ -182,15 +182,15 @@ export default function ExtraSidebar(): JSX.Element {
const ModalMemo = useMemo(
() => (
<ShareModal is_component={false} component={flow!} disabled={!hasApiKey}>
<ShareModal is_component={false} component={flow!} disabled={(!hasApiKey||!validApiKey)}>
<ShadTooltip content="Share" side="top">
<div className={classNames("extra-side-bar-buttons")}>
<IconComponent name="Share2" className="side-bar-button-size" />
</div>
<button disabled={!hasApiKey} 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>
</ShadTooltip>
</ShareModal>
),
[hasApiKey]
[hasApiKey,validApiKey]
);
const ExportMemo = useMemo(
@ -198,7 +198,6 @@ export default function ExtraSidebar(): JSX.Element {
<ExportModal>
<ShadTooltip content="Export" side="top">
<button
disabled={!hasApiKey}
className={classNames("extra-side-bar-buttons")}
>
<IconComponent name="FileDown" className="side-bar-button-size" />

View file

@ -52,7 +52,7 @@ export default function NodeToolbarComponent({
);
const updateNodeInternals = useUpdateNodeInternals();
const { getNodeId } = useContext(FlowsContext);
const { hasApiKey } = useContext(StoreContext);
const { hasApiKey,validApiKey } = useContext(StoreContext);
function canMinimize() {
let countHandles: number = 0;
@ -161,9 +161,9 @@ export default function NodeToolbarComponent({
<a
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" +
(data.node?.documentation === ""
? " text-muted-foreground"
: " text-foreground")
(data.node?.documentation === ""
? " text-muted-foreground"
: " text-foreground")
)}
target="_blank"
rel="noopener noreferrer"
@ -231,17 +231,16 @@ export default function NodeToolbarComponent({
</div>{" "}
</SelectItem>
)}
{hasApiKey && (
<SelectItem value={"Share"}>
<div className="flex">
<IconComponent
name="Share2"
className="relative top-0.5 mr-2 h-4 w-4"
/>{" "}
Share{" "}
</div>{" "}
</SelectItem>
)}
<SelectItem disabled={(!hasApiKey||!validApiKey)} value={"Share"}>
<div className="flex">
<IconComponent
name="Share2"
className="relative top-0.5 mr-2 h-4 w-4"
/>{" "}
Share{" "}
</div>{" "}
</SelectItem>
<SelectItem value={"Download"}>
<div className="flex">
<IconComponent

View file

@ -114,7 +114,7 @@
@apply pointer-events-none;
}
.extra-side-bar-buttons {
@apply relative inline-flex w-full items-center justify-center rounded-md bg-background px-2 py-2 text-foreground shadow-sm ring-1 ring-inset ring-input transition-all duration-500 ease-in-out;
@apply relative inline-flex w-full items-center justify-center rounded-md bg-background px-2 py-2 text-foreground shadow-sm ring-1 ring-inset ring-input transition-all duration-500 ease-in-out;
}
.extra-side-bar-buttons:hover {
@apply hover:bg-muted;