pollination-react-io 1.26.1 → 1.27.0

package/build/hooks/useDebounce.d.ts

@@ -0,0 +1,2 @@
+import type { EffectCallback, DependencyList } from "react";
+export declare const useDebounce: (delay: number) => (effect: EffectCallback, deps?: DependencyList) => void;

package/build/index.esm.js

@@ -40596,23 +40596,44 @@ var getFileIcon$1 = function (type, disabled) {
     }
 };
 
+// https://dev.to/rajeshroyal/how-to-make-a-custom-debounce-hook-in-react-js-4gcc
+var useDebounce = function (delay) { return function (effect, deps) {
+    return useEffect(function () {
+        var handler = setTimeout(effect, delay);
+        return function () { return clearTimeout(handler); };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, __spreadArray(__spreadArray([], deps, true), [delay], false));
+}; };
+
+var longDebounce$3 = useDebounce(500);
+var shortDebounce$3 = useDebounce(200);
 var SelectCloudArtifacts = function (_a) {
     var _b, _c;
     var projectOwner = _a.projectOwner, projectName = _a.projectName, jobId = _a.jobId, value = _a.value, hidden = _a.hidden, _d = _a.fileNameMatch, fileNameMatch = _d === void 0 ? '.*' : _d, onChange = _a.onChange, client = _a.client;
     var comboBoxRef = useRef(null);
-    var listArtifacts = useArtifacts(projectOwner, projectName, client).listArtifacts;
     var valueRef = useRef();
+    var listArtifacts = useArtifacts(projectOwner, projectName, client).listArtifacts;
     var _e = useState(), selArtifact = _e[0], setSelArtifact = _e[1];
     var _f = useState(false), loading = _f[0], setLoading = _f[1];
     var _g = useState({ folders: [], files: [] }), artifacts = _g[0], setArtifacts = _g[1];
-    var _h = useState(value ?
+    var _h = useState((value === null || value === void 0 ? void 0 : value.key) ?
         [value.key.split('/').slice(0, -1).join('/')]
         :
             []), path = _h[0], setPath = _h[1];
     var handleClear = useCallback(function () {
         setPath([]);
     }, []);
+    // resetting query
     useEffect(function () {
+        // deselect item
+        if (comboBoxRef.current) {
+            comboBoxRef.current.selectItem(null);
+        }
+        setArtifacts({ folders: [], files: [] });
+    }, [projectOwner, projectName]);
+    longDebounce$3(function () {
+        if (!client || !client.projects)
+            return;
         setLoading(true);
         listArtifacts(path, jobId)
             .then(function (facts) {
@@ -40630,8 +40651,7 @@ var SelectCloudArtifacts = function (_a) {
             return newPath;
         });
     }, [selArtifact]);
-    useEffect(function () {
-        // nonmemoized value from react-hook-form or other parent causes infinite rerendering
+    shortDebounce$3(function () {
         if (lodash_isequal(valueRef.current, selArtifact) ||
             (!valueRef.current && !selArtifact)) {
             return;
@@ -40642,11 +40662,8 @@ var SelectCloudArtifacts = function (_a) {
         comboBoxRef.current.selectItem(selArtifact);
         valueRef.current = selArtifact;
         // don't call onChange for undefined values
-        onChange && selArtifact && onChange(selArtifact);
+        onChange && onChange(selArtifact);
     }, [onChange, selArtifact]);
-    useEffect(function () {
-        setSelArtifact(value);
-    }, [value]);
     var stateReducer = useCallback(function (state, actionAndChanges) {
         var type = actionAndChanges.type, changes = actionAndChanges.changes;
         switch (type) {
@@ -40790,9 +40807,8 @@ var ComboFileSelector = function (_a) {
     var projectOwner = _a.projectOwner, projectName = _a.projectName, value = _a.value, _b = _a.hidden, hidden = _b === void 0 ? false : _b, _c = _a.disabled, disabled = _c === void 0 ? false : _c, defaultOption = _a.defaultOption, optionsConfig = _a.optionsConfig, _d = _a.mode, mode = _d === void 0 ? 'cloud' : _d, onChange = _a.onChange, client = _a.client, inputProps = _a.inputProps;
     var host = getHost();
     var _e = useState(function () {
-        if (typeof defaultOption !== 'undefined') {
-            return defaultOption;
-        }
+        if (defaultOption == null)
+            return;
         if (host !== 'web') {
             if (mode !== 'cloud') {
                 // plugin, local
@@ -40814,6 +40830,10 @@ var ComboFileSelector = function (_a) {
     var handleLocalArtifactSelect = useCallback(function (path) {
         onChange({ pollination_local_path: path });
     }, [onChange]);
+    // reset onChange if option
+    useEffect(function () {
+        onChange();
+    }, [option]);
     return (React__default.createElement("div", { "data-testid": "ComboFileSelector", style: {
             display: 'flex',
             flexDirection: 'column',
@@ -40821,7 +40841,7 @@ var ComboFileSelector = function (_a) {
         } },
         !hidden &&
             React__default.createElement(ButtonGroup, null,
-                (typeof optionsConfig['get_file'] === 'undefined' || optionsConfig['get_file']) &&
+                mode === 'cloud' && (typeof optionsConfig['get_file'] === 'undefined' || optionsConfig['get_file']) &&
                     React__default.createElement("button", { type: 'button', disabled: disabled, onClick: function () { return setOption('get_file'); }, style: {
                             display: 'flex',
                             boxShadow: !disabled && option === 'get_file' ?
@@ -41717,6 +41737,8 @@ TabPanel.tabsRole = 'TabPanel';
 TabPanel.propTypes = process.env.NODE_ENV !== "production" ? propTypes : {};
 TabPanel.defaultProps = defaultProps;
 
+var longDebounce$2 = useDebounce(500);
+var shortDebounce$2 = useDebounce(200);
 var SelectProject = function (_a) {
     var _b, _c;
     var authUser = _a.authUser, client = _a.client, projectOwner = _a.projectOwner, value = _a.value, onChange = _a.onChange;
@@ -41725,16 +41747,17 @@ var SelectProject = function (_a) {
     var _d = useState(), selProject = _d[0], setSelProject = _d[1];
     var _e = useState(false), loading = _e[0], setLoading = _e[1];
     var _f = useState([]), projects = _f[0], setProjects = _f[1];
+    var _g = useState(1), pageNumber = _g[0], setPageNumber = _g[1];
     var totalProjectsRef = useRef({
         loaded: 0,
         total: undefined
     });
-    var _g = useState(0), total = _g[0], setTotal = _g[1];
-    var _h = useState({
+    var _h = useState(0), total = _h[0], setTotal = _h[1];
+    var projectApiRef = useRef({
         owner: (_b = [projectOwner]) !== null && _b !== void 0 ? _b : (authUser && [authUser.username]),
-        page: 1,
+        page: pageNumber,
         perPage: 10,
-    }), queryConfig = _h[0], setQueryConfig = _h[1];
+    });
     // resetting query
     useEffect(function () {
         // reset total loaded
@@ -41742,38 +41765,57 @@ var SelectProject = function (_a) {
             loaded: 0,
             total: undefined
         };
-        // deselect items
+        // deselect item
         if (comboBoxRef.current) {
-            comboBoxRef.current.selectItem(value);
+            comboBoxRef.current.selectItem(null);
         }
         setProjects([]);
-        setQueryConfig(function (q) { return (__assign(__assign({}, q), { owner: [projectOwner], page: 1 })); });
-    }, [projectOwner, value]);
-    var fetchProjects = useCallback(function (queryConfig) {
+        setPageNumber(1);
+    }, [projectOwner]);
+    useEffect(function () {
+        // select item
+        if (comboBoxRef.current) {
+            comboBoxRef.current.selectItem(value);
+        }
+    }, [value]);
+    longDebounce$2(function () {
+        var _a;
+        projectApiRef.current = {
+            owner: (_a = [projectOwner]) !== null && _a !== void 0 ? _a : (authUser && [authUser.username]),
+            page: pageNumber,
+            perPage: 10,
+        };
+        var queryConfig = projectApiRef.current;
         if (!authUser || !client || !client.projects)
             return;
         if (!queryConfig.owner)
             return;
-        var _a = totalProjectsRef.current, total = _a.total, loaded = _a.loaded;
+        var _b = totalProjectsRef.current, total = _b.total, loaded = _b.loaded;
         if (total && loaded >= total)
             return;
+        var fetchData = function () { return __awaiter$1(void 0, void 0, void 0, function () {
+            var data;
+            return __generator$1(this, function (_a) {
+                switch (_a.label) {
+                    case 0: return [4 /*yield*/, client.projects.listProjects(queryConfig)];
+                    case 1:
+                        data = (_a.sent()).data;
+                        setProjects(function (state) { return state
+                            ? __spreadArray(__spreadArray([], state, true), data.resources, true) : __spreadArray([], data.resources, true); });
+                        setTotal(data.total_count);
+                        totalProjectsRef.current.loaded += data.resources.length;
+                        totalProjectsRef.current.total = data.total_count;
+                        return [2 /*return*/];
+                }
+            });
+        }); };
+        // call the function
         setLoading(true);
-        client.projects.listProjects(queryConfig)
-            .then(function (_a) {
-            var data = _a.data;
-            setProjects(function (state) { return state ? __spreadArray(__spreadArray([], state, true), data.resources, true) : __spreadArray([], data.resources, true); });
-            setTotal(data.total_count);
-            totalProjectsRef.current.loaded += data.resources.length;
-            totalProjectsRef.current.total = data.total_count;
-        })
-            .finally(function () {
-            setLoading(false);
-        });
-    }, [authUser, client]);
-    useEffect(function () {
-        fetchProjects(queryConfig);
-    }, [fetchProjects, queryConfig]);
-    useEffect(function () {
+        fetchData()
+            .catch(console.error)
+            .finally(function () { return setLoading(false); });
+    }, [authUser, client, projectOwner, pageNumber]);
+    shortDebounce$2(function () {
         // nonmemoized value from react-hook-form or other parent causes infinite rerendering
         if (lodash_isequal(valueRef.current, selProject)) {
             return;
@@ -41784,28 +41826,27 @@ var SelectProject = function (_a) {
         comboBoxRef.current.selectItem(selProject);
         valueRef.current = selProject;
         // don't call onChange for undefined values
-        onChange && selProject && onChange(selProject);
+        onChange && onChange(selProject);
     }, [selProject, onChange]);
-    useEffect(function () {
-        setSelProject(value);
-    }, [value]);
     var onScrollReachEnd = useCallback(function () {
         // already loaded all runs
         var _a = totalProjectsRef.current, total = _a.total, loaded = _a.loaded;
         if (total && loaded >= total)
             return;
-        setQueryConfig(function (q) { return (__assign(__assign({}, q), { page: q.page ? q.page + 1 : 1 })); });
+        setPageNumber(projectApiRef.current.page + 1);
     }, []);
-    return (React__default.createElement(ComboBox, { ref: comboBoxRef, items: projects !== null && projects !== void 0 ? projects : [], setSelected: setSelProject, onClear: function () { return setSelProject(undefined); }, inputProps: {
+    return (React__default.createElement(ComboBox, { ref: comboBoxRef, items: projects !== null && projects !== void 0 ? projects : [], setSelected: setSelProject, inputProps: {
             placeholder: 'Select a project...',
-        }, loading: loading, disabled: !authUser || !queryConfig.owner, footer: (React__default.createElement("div", { key: "footer", style: {
+        }, loading: loading, disabled: !authUser || !projectOwner, footer: (React__default.createElement("div", { key: "footer", style: {
                 width: '100%',
                 display: 'flex',
                 justifyContent: 'center',
                 color: 'var(--grey4)',
-            } }, "Showing ".concat((_c = projects === null || projects === void 0 ? void 0 : projects.length) !== null && _c !== void 0 ? _c : 0, " of ").concat(total, " projects"))), onScrollReachEnd: onScrollReachEnd }));
+            } }, "Showing ".concat((_c = projects.length) !== null && _c !== void 0 ? _c : 0, " of ").concat(total, " projects"))), onScrollReachEnd: onScrollReachEnd }));
 };
 
+var longDebounce$1 = useDebounce(500);
+var shortDebounce$1 = useDebounce(200);
 var SelectAccount = function (_a) {
     var _b;
     var authUser = _a.authUser, client = _a.client, value = _a.value, onChange = _a.onChange;
@@ -41814,28 +41855,42 @@ var SelectAccount = function (_a) {
     var _c = useState(value), selAccount = _c[0], setSelAccount = _c[1];
     var _d = useState(function () { return authUser ? [authUser] : []; }), accounts = _d[0], setAccounts = _d[1];
     var _e = useState(false), loading = _e[0], setLoading = _e[1];
+    var _f = useState(1), pageNumber = _f[0], setPageNumber = _f[1];
     var totalAccountsRef = useRef({
         loaded: 0,
         total: undefined
     });
-    var _f = useState(0), total = _f[0], setTotal = _f[1];
-    var _g = useState({
-        page: 1,
+    var _g = useState(0), total = _g[0], setTotal = _g[1];
+    var accountsApiRef = useRef({
+        page: pageNumber,
         perPage: 25,
-    }), queryConfig = _g[0], setQueryConfig = _g[1];
-    // resetting query
+    });
     useEffect(function () {
-        if (authUser == null)
-            return;
         // reset total loaded
         totalAccountsRef.current = {
             loaded: 0,
             total: undefined
         };
-        setAccounts([authUser]);
-        setQueryConfig(function (q) { return (__assign(__assign({}, q), { member: [authUser === null || authUser === void 0 ? void 0 : authUser.username], page: 1 })); });
-    }, [authUser, onChange, value]);
-    var fetchOrganizations = useCallback(function (queryConfig) {
+        // deselect items
+        if (comboBoxRef.current) {
+            comboBoxRef.current.selectItem(null);
+        }
+        setAccounts([]);
+        setPageNumber(1);
+    }, [authUser]);
+    useEffect(function () {
+        // select item
+        if (comboBoxRef.current) {
+            comboBoxRef.current.selectItem(value);
+        }
+    }, [value]);
+    longDebounce$1(function () {
+        accountsApiRef.current = {
+            member: [authUser === null || authUser === void 0 ? void 0 : authUser.username],
+            page: pageNumber,
+            perPage: 25
+        };
+        var queryConfig = accountsApiRef.current;
         if (!authUser || !client || !client.orgs)
             return;
         if (!queryConfig.member)
@@ -41844,42 +41899,44 @@ var SelectAccount = function (_a) {
         // we've already loaded all accounts
         if (total && loaded >= total)
             return;
+        var fetchData = function () { return __awaiter$1(void 0, void 0, void 0, function () {
+            var data;
+            return __generator$1(this, function (_a) {
+                switch (_a.label) {
+                    case 0: return [4 /*yield*/, client.orgs.listOrgs(queryConfig)];
+                    case 1:
+                        data = (_a.sent()).data;
+                        setAccounts(function (state) { return state
+                            ? __spreadArray(__spreadArray([authUser], state, true), data.resources, true) : __spreadArray([authUser], data.resources, true); });
+                        setTotal(data.total_count);
+                        totalAccountsRef.current.loaded += data.resources.length;
+                        totalAccountsRef.current.total = data.total_count;
+                        return [2 /*return*/];
+                }
+            });
+        }); };
+        // call the function
         setLoading(true);
-        client.orgs.listOrgs(__assign(__assign({}, queryConfig), { member: [authUser.username] }))
-            .then(function (_a) {
-            var data = _a.data;
-            setAccounts(function (state) { return state ? __spreadArray(__spreadArray([], state, true), data.resources, true) : __spreadArray([], data.resources, true); });
-            setTotal(data.total_count);
-            totalAccountsRef.current.loaded += data.resources.length;
-            totalAccountsRef.current.total = data.total_count;
-        })
-            .finally(function () {
-            setLoading(false);
-        });
-    }, [authUser, client]);
-    useEffect(function () {
-        fetchOrganizations(queryConfig);
-    }, [fetchOrganizations, queryConfig]);
-    useEffect(function () {
+        fetchData()
+            .catch(console.error)
+            .finally(function () { return setLoading(false); });
+    }, [authUser, client, pageNumber, selAccount]);
+    shortDebounce$1(function () {
+        // nonmemoized value from react-hook-form or other parent causes infinite rerendering
         if (lodash_isequal(valueRef.current, selAccount)) {
             return;
         }
-        if (selAccount == null)
-            return;
         comboBoxRef.current.selectItem(selAccount);
         valueRef.current = selAccount;
-        // comboBoxRef.current.setInputValue( selAccount.name  )
+        // don't call onChange for undefined values
         onChange && onChange(selAccount);
-    }, [onChange, selAccount]);
-    useEffect(function () {
-        setSelAccount(value);
-    }, [value]);
+    }, [selAccount, onChange]);
     var onScrollReachEnd = useCallback(function () {
         // already loaded all runs
         var _a = totalAccountsRef.current, total = _a.total, loaded = _a.loaded;
         if (total && loaded >= total)
             return;
-        setQueryConfig(function (q) { return (__assign(__assign({}, q), { page: q.page ? q.page + 1 : 1 })); });
+        setPageNumber(accountsApiRef.current.page + 1);
     }, []);
     return (React__default.createElement(ComboBox, { ref: comboBoxRef, 
         // @ts-ignore
@@ -41910,6 +41967,8 @@ var SelectAccount = function (_a) {
             } }, "Showing ".concat((_b = accounts === null || accounts === void 0 ? void 0 : accounts.length) !== null && _b !== void 0 ? _b : 0, " of ").concat(total + 1, " accounts."))), onScrollReachEnd: onScrollReachEnd }));
 };
 
+var longDebounce = useDebounce(500);
+var shortDebounce = useDebounce(200);
 var SelectRecipe = function (_a) {
     var _b, _c;
     var authUser = _a.authUser, client = _a.client, projectName = _a.projectName, projectOwner = _a.projectOwner, value = _a.value, onChange = _a.onChange;
@@ -41918,17 +41977,18 @@ var SelectRecipe = function (_a) {
     var _d = useState(), selRecipe = _d[0], setSelRecipe = _d[1];
     var _e = useState(false), loading = _e[0], setLoading = _e[1];
     var _f = useState(), recipes = _f[0], setRecipes = _f[1];
+    var _g = useState(1), pageNumber = _g[0], setPageNumber = _g[1];
     var totalRecipesRef = useRef({
         loaded: 0,
         total: undefined
     });
-    var _g = useState(0), total = _g[0], setTotal = _g[1];
-    var _h = useState({
+    var _h = useState(0), total = _h[0], setTotal = _h[1];
+    var projectApiRef = useRef({
         owner: projectOwner !== null && projectOwner !== void 0 ? projectOwner : (authUser && authUser.username),
         name: projectName,
-        page: 1,
+        page: pageNumber,
         perPage: 10,
-    }), queryConfig = _h[0], setQueryConfig = _h[1];
+    });
     // resetting query
     useEffect(function () {
         // reset total loaded
@@ -41938,58 +41998,71 @@ var SelectRecipe = function (_a) {
         };
         // deselect items
         if (comboBoxRef.current) {
-            comboBoxRef.current.selectItem(value);
+            comboBoxRef.current.selectItem(null);
         }
         setRecipes([]);
-        setQueryConfig(function (q) { return (__assign(__assign({}, q), { owner: projectOwner, name: projectName, page: 1 })); });
-    }, [projectOwner, projectName, value]);
-    var fetchRecipes = useCallback(function (queryConfig) {
+        setPageNumber(1);
+    }, [projectOwner, projectName]);
+    useEffect(function () {
+        // select item
+        if (comboBoxRef.current) {
+            comboBoxRef.current.selectItem(value);
+        }
+    }, [value]);
+    longDebounce(function () {
+        projectApiRef.current = {
+            owner: projectOwner !== null && projectOwner !== void 0 ? projectOwner : (authUser && authUser.username),
+            name: projectName,
+            page: pageNumber,
+            perPage: 10,
+        };
+        var queryConfig = projectApiRef.current;
         if (!authUser || !client || !client.projects)
             return;
         if (!queryConfig.owner || !queryConfig.name)
             return;
-        // we've already loaded all recipes
         var _a = totalRecipesRef.current, total = _a.total, loaded = _a.loaded;
         if (total && loaded >= total)
             return;
+        var fetchData = function () { return __awaiter$1(void 0, void 0, void 0, function () {
+            var data;
+            return __generator$1(this, function (_a) {
+                switch (_a.label) {
+                    case 0: return [4 /*yield*/, client.projects.getProjectRecipes(queryConfig)];
+                    case 1:
+                        data = (_a.sent()).data;
+                        setRecipes(function (state) { return state ? __spreadArray(__spreadArray([], state, true), data.resources, true) : __spreadArray([], data.resources, true); });
+                        setTotal(data.total_count);
+                        totalRecipesRef.current.loaded += data.resources.length;
+                        totalRecipesRef.current.total = data.total_count;
+                        return [2 /*return*/];
+                }
+            });
+        }); };
+        // call the function
         setLoading(true);
-        client.projects.getProjectRecipes(queryConfig)
-            .then(function (_a) {
-            var data = _a.data;
-            setRecipes(function (state) { return state ? __spreadArray(__spreadArray([], state, true), data.resources, true) : __spreadArray([], data.resources, true); });
-            setTotal(data.total_count);
-            totalRecipesRef.current.loaded += data.resources.length;
-            totalRecipesRef.current.total = data.total_count;
-        })
-            .finally(function () {
-            setLoading(false);
-        });
-    }, [authUser, client]);
-    useEffect(function () {
-        fetchRecipes(queryConfig);
-    }, [fetchRecipes, queryConfig]);
-    useEffect(function () {
+        fetchData()
+            .catch(console.error)
+            .finally(function () { return setLoading(false); });
+    }, [authUser, client, projectOwner, projectName, pageNumber]);
+    shortDebounce(function () {
         // nonmemoized value from react-hook-form or other parent causes infinite rerendering
         if (lodash_isequal(valueRef.current, selRecipe)) {
             return;
         }
-        if (selRecipe == null)
-            return;
+        // if (selRecipe == null) return
         if (selRecipe && selRecipe.metadata && selRecipe.metadata.name) {
             comboBoxRef.current.setInputValue(selRecipe.metadata.name);
         }
         comboBoxRef.current.selectItem(selRecipe);
         valueRef.current = selRecipe;
-        onChange && selRecipe && onChange(selRecipe);
+        onChange && onChange(selRecipe);
     }, [selRecipe, onChange]);
-    useEffect(function () {
-        setSelRecipe(value);
-    }, [value]);
     var onScrollReachEnd = useCallback(function () {
         var _a = totalRecipesRef.current, total = _a.total, loaded = _a.loaded;
         if (total && loaded >= total)
             return;
-        setQueryConfig(function (q) { return (__assign(__assign({}, q), { page: q.page ? q.page + 1 : 1 })); });
+        setPageNumber(projectApiRef.current.page + 1);
     }, []);
     return (React__default.createElement(ComboBox, { ref: comboBoxRef, items: (_b = recipes === null || recipes === void 0 ? void 0 : recipes.map(function (r, i) { return (__assign(__assign({}, r), { name: "".concat(r.metadata.name, "-").concat(r.metadata.tag), id: "".concat(r.metadata.name, "-").concat(r.metadata.tag) })); })) !== null && _b !== void 0 ? _b : [], renderItem: function (item) { return (React__default.createElement("div", { style: {
                 display: 'flex',
@@ -41998,7 +42071,7 @@ var SelectRecipe = function (_a) {
             }, id: "".concat(item.metadata.name, "-").concat(item.metadata.tag) },
             React__default.createElement(Avatar, { src: item.metadata.icon, alt: item.metadata.name, fallback: item.metadata.name, size: 24 }), "".concat(item.metadata.name, "-").concat(item.metadata.tag))); }, setSelected: setSelRecipe, inputProps: {
             placeholder: 'Select a recipe...',
-        }, loading: loading, disabled: !authUser || !queryConfig.name || !queryConfig.owner, footer: (React__default.createElement("div", { key: "footer", style: {
+        }, loading: loading, disabled: !authUser || !projectName, footer: (React__default.createElement("div", { key: "footer", style: {
                 width: '100%',
                 display: 'flex',
                 justifyContent: 'center',
@@ -44031,7 +44104,7 @@ var RecipeInputsForm = function (_a) {
     var _f = useForm({
         resolver: Oe(schema),
         mode: 'all',
-    }), control = _f.control, register = _f.register, handleSubmit = _f.handleSubmit, reset = _f.reset, resetField = _f.resetField, _g = _f.formState, errors = _g.errors, isValid = _g.isValid, isSubmitSuccessful = _g.isSubmitSuccessful;
+    }), control = _f.control, register = _f.register, handleSubmit = _f.handleSubmit, reset = _f.reset, resetField = _f.resetField, formState = _f.formState, _g = _f.formState, errors = _g.errors, isValid = _g.isValid, isSubmitSuccessful = _g.isSubmitSuccessful;
     var _onSubmit = function (_data) {
         var data = __assign({}, _data);
         // strip study name
@@ -44053,19 +44126,22 @@ var RecipeInputsForm = function (_a) {
             setLoading(true);
             onSubmit(studyName, data, 'description', localConfig)
                 .finally(function () {
-                // @ts-ignore
-                var defaults = recipe.inputs.map(function (input) {
-                    var _a;
-                    var _b;
-                    return (_a = {}, _a[input.name] = (_b = input.default) !== null && _b !== void 0 ? _b : '', _a);
-                });
-                defaults.push({ 'study-name': '' });
-                // console.log(defaults)
-                reset();
                 setLoading(false);
             });
         }
     };
+    useEffect(function () {
+        reset({
+            'study-name': ''
+        }, { keepValues: false });
+    }, [recipe]);
+    useEffect(function () {
+        if (formState.isSubmitSuccessful) {
+            reset({
+                'study-name': ''
+            }, { keepValues: false });
+        }
+    }, [formState, reset]);
     var groups = recipe.inputs.reduce(function (p, c) {
         if (c.required) {
             p[0].push(c);