pollination-react-io 1.8.1 → 1.8.2

package/build/index.esm.js

@@ -21661,7 +21661,7 @@ function getHost(key, defaultValue) {
 
 var useArtifacts = function (owner, name, client) {
     var listArtifacts = useCallback(function (path) {
-        if (!(client === null || client === void 0 ? void 0 : client.artifacts))
+        if (!client)
             return;
         // let key: string[] | undefined = undefined
         // if (path) {
@@ -21674,22 +21674,22 @@ var useArtifacts = function (owner, name, client) {
             perPage: 50,
             path: path
         }).then(function (r) { return r.data; });
-    }, [client.artifacts, owner, name]);
+    }, [client, owner, name]);
     var downloadArtifact = useCallback(function (path) {
-        if (!(client === null || client === void 0 ? void 0 : client.artifacts))
+        if (!client)
             return;
         return client.artifacts.downloadArtifact({
             owner: owner,
             name: name,
             path: path
         }).then(function (r) { return r.data; });
-    }, [client.artifacts, owner, name]);
+    }, [client, owner, name]);
     var deleteArtifact = useCallback(function (path) { return __awaiter(void 0, void 0, void 0, function () {
         var key;
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
-                    if (!(client === null || client === void 0 ? void 0 : client.artifacts))
+                    if (!client)
                         return [2 /*return*/];
                     key = undefined;
                     if (path) {
@@ -21705,13 +21705,13 @@ var useArtifacts = function (owner, name, client) {
                     return [2 /*return*/];
             }
         });
-    }); }, [client.artifacts, owner, name]);
+    }); }, [client, owner, name]);
     var uploadArtifact = useCallback(function (folderRoot, file) { return __awaiter(void 0, void 0, void 0, function () {
         var filePath, rootKey, uploadKey, result, _a, url, fields, payload;
         return __generator(this, function (_b) {
             switch (_b.label) {
                 case 0:
-                    if (!(client === null || client === void 0 ? void 0 : client.artifacts))
+                    if (!client)
                         return [2 /*return*/];
                     filePath = file.path || file.name;
                     if (!filePath) {
@@ -21751,7 +21751,7 @@ var useArtifacts = function (owner, name, client) {
                     return [2 /*return*/, result.data];
             }
         });
-    }); }, [client.artifacts, owner, name]);
+    }); }, [client, owner, name]);
     return {
         listArtifacts: listArtifacts,
         deleteArtifact: deleteArtifact,
@@ -34465,7 +34465,6 @@ var InputDescription = function (_a) {
             width: '100%',
             color: 'var(--slate12)',
             fontSize: '0.8rem',
-            textAlign: 'end',
             gap: 4
         } },
         children,
@@ -35583,7 +35582,7 @@ var Label = function (_a) {
                 justifyContent: 'flex-start',
                 width: '100%'
             } },
-            React__default.createElement("label", { htmlFor: name !== null && name !== void 0 ? name : (typeof label === 'string' && slugify(label, { lower: true })), style: __assign$3({ background: 'var(--background)', borderRadius: 4, width: 'fit-content', transform: 'translate(30px, 6px)', zIndex: 100, fontSize: '0.8rem', color: 'var(--primary)', padding: '0px 4px' }, style) }, label)),
+            React__default.createElement("label", { htmlFor: name !== null && name !== void 0 ? name : (typeof label === 'string' && slugify(label, { lower: true })), style: __assign$3({ background: 'var(--background)', borderRadius: 4, width: 'fit-content', transform: 'translate(30px, 6px)', zIndex: 100, fontSize: '0.8rem', color: 'var(--primary)', fill: 'var(--primary)', padding: '0px 4px', marginBottom: 0 }, style) }, label)),
         children));
 };
 
@@ -39482,6 +39481,8 @@ var SelectCloudArtifacts = function (_a) {
     var _g = useState(), selArtifact = _g[0], setSelArtifact = _g[1];
     var folderNavRef = useRef(false);
     useEffect(function () {
+        if (!client)
+            return;
         setLoading(true);
         listArtifacts(path)
             .then(function (facts) {
@@ -39491,7 +39492,7 @@ var SelectCloudArtifacts = function (_a) {
             setArtifacts({ folders: folders, files: files });
         })
             .finally(function () { return setLoading(false); });
-    }, [listArtifacts, path]);
+    }, [client, listArtifacts, path]);
     useEffect(function () {
         if (!selArtifact)
             return;
@@ -39665,10 +39666,11 @@ var generateSchema = function (inputs) {
     });
 };
 var RecipeInputsForm = function (_a) {
+    var _b;
     var recipe = _a.recipe, onSubmit = _a.onSubmit, disabled = _a.disabled, projectName = _a.projectName, projectOwner = _a.projectOwner, client = _a.client;
-    var _b = useState(false), loading = _b[0], setLoading = _b[1];
+    var _c = useState(false), loading = _c[0], setLoading = _c[1];
     var schema = generateSchema(recipe.inputs);
-    var _c = useForm({
+    var _d = useForm({
         // @ts-ignore
         defaultValues: recipe.inputs.reduce(function (p, c) {
             var _a;
@@ -39677,7 +39679,7 @@ var RecipeInputsForm = function (_a) {
         }, {}),
         resolver: Oe(schema),
         mode: 'all'
-    }), control = _c.control, register = _c.register, handleSubmit = _c.handleSubmit, reset = _c.reset, getValues = _c.getValues, _d = _c.formState, errors = _d.errors, isValid = _d.isValid, isSubmitSuccessful = _d.isSubmitSuccessful; _c.getFieldState;
+    }), control = _d.control, register = _d.register, handleSubmit = _d.handleSubmit, reset = _d.reset, resetField = _d.resetField; _d.setValue; var _e = _d.formState, errors = _e.errors, isValid = _e.isValid, isSubmitSuccessful = _e.isSubmitSuccessful;
     useEffect(function () {
         if (isSubmitSuccessful) {
             reset();
@@ -39710,9 +39712,6 @@ var RecipeInputsForm = function (_a) {
             });
         }
     };
-    // console.log(errors)
-    // console.log(isValid)
-    // console.log(watch())
     var groups = recipe.inputs.reduce(function (p, c) {
         if (c.required) {
             p[0].push(c);
@@ -39723,7 +39722,9 @@ var RecipeInputsForm = function (_a) {
         return p;
     }, [[], []]);
     return (React__default.createElement(Tabs, { forceRenderTabPanel: true },
-        React__default.createElement(TabList, null,
+        React__default.createElement(TabList, { style: {
+                flex: 1
+            } },
             React__default.createElement(Tab, { key: 'required-tab' }, "Required"),
             React__default.createElement(Tab, { key: 'optional-tab' }, "Optional")),
         React__default.createElement("form", { id: recipe.metadata.name, onSubmit: handleSubmit(_onSubmit), style: {
@@ -39740,11 +39741,10 @@ var RecipeInputsForm = function (_a) {
                         flexDirection: 'column',
                         gap: 8
                     } }, g.map(function (input, i) {
-                    var _a, _b, _c;
+                    var _a, _b, _c, _d;
                     return (React__default.createElement($409067139f391064$export$be92b6f5f03c0fe9, { style: {
                             display: 'flex',
                             flexDirection: 'column',
-                            justifyContent: 'flex-end',
                             fontSize: 'inherit',
                             color: 'inherit',
                             gap: 2
@@ -39771,7 +39771,7 @@ var RecipeInputsForm = function (_a) {
                                         cursor: 'pointer',
                                         padding: 0,
                                     } },
-                                    React__default.createElement(InfoCircle$1, { style: { fill: 'var(--primary)' } }))) },
+                                    React__default.createElement(InfoCircle$1, { style: { fill: ((_d = errors[input.name]) === null || _d === void 0 ? void 0 : _d.message) ? 'red' : 'var(--primary)' } }))) },
                             React__default.createElement(InputDescription, { helpText: React__default.createElement($409067139f391064$export$7c6e2c02157bb7d2, { className: 'collapse-content' }, input && input.description) }, (function () {
                                 var _a;
                                 var inputProps = __assign$3({}, register(input.name, {
@@ -39780,13 +39780,8 @@ var RecipeInputsForm = function (_a) {
                                     max: input.spec && input.spec.maximum ? "".concat(input.name, " must be at least ").concat(input.spec.minimum) : undefined,
                                     valueAsNumber: input.type === 'DAGNumberInput' || input.type === 'DAGIntegerInput',
                                 }));
-                                var handleReset = function () {
-                                    var _a;
-                                    return reset(__assign$3(__assign$3({}, getValues()), (_a = {}, _a[input.name] = input.default, _a)), {
-                                        keepIsValid: true,
-                                        keepTouched: true,
-                                    });
-                                };
+                                // @ts-ignore
+                                var handleReset = function () { return resetField(input.name); };
                                 switch (input.type) {
                                     case 'DAGFileInput':
                                         return React__default.createElement(Controller
@@ -39821,12 +39816,20 @@ var RecipeInputsForm = function (_a) {
         React__default.createElement("div", { style: {
                 display: 'flex',
                 width: '100%',
-                justifyContent: 'center',
-                padding: '16px 0px 0px'
+                padding: '16px 0px 0px 8px'
             } },
-            React__default.createElement(Button, { type: 'submit', form: recipe.metadata.name, disabled: !isValid || disabled, style: {
-                    width: 'fit-content',
-                }, loading: loading }, "Create Study"))));
+            React__default.createElement(InputDescription, { helpText: isValid ? 'Recipe input is valid!' : ((_b = Object.values(errors)) === null || _b === void 0 ? void 0 : _b.length) > 0 ?
+                    React__default.createElement("div", null,
+                        React__default.createElement("ul", { style: { padding: 0 } }, Object.entries(errors).map(function (_a) {
+                            var key = _a[0], val = _a[1];
+                            return (
+                            // @ts-ignore
+                            React__default.createElement("li", { key: key, style: { color: 'red', fontSize: '0.8rem', listStyle: 'none' } }, "".concat(key, " ").concat(val.message, ".")));
+                        }))) :
+                    'Recipe input isn\'t valid yet.' },
+                React__default.createElement(Button, { type: 'submit', form: recipe.metadata.name, disabled: !isValid || disabled, style: {
+                        width: 'fit-content',
+                    }, loading: loading }, "Create Study")))));
 };
 
 var css_248z = ".react-tabs {\n  -webkit-tap-highlight-color: transparent;\n}\n\n.react-tabs__tab-list {\n  border-bottom: 1px solid #aaa;\n  margin: 0 0 10px;\n  padding: 0;\n}\n\n.react-tabs__tab {\n  display: inline-block;\n  border: 1px solid transparent;\n  border-bottom: none;\n  bottom: -1px;\n  position: relative;\n  list-style: none;\n  padding: 6px 12px;\n  cursor: pointer;\n}\n\n.react-tabs__tab--selected {\n  background: #fff;\n  border-color: #aaa;\n  color: black;\n  border-radius: 5px 5px 0 0;\n}\n\n.react-tabs__tab--disabled {\n  color: GrayText;\n  cursor: default;\n}\n\n.react-tabs__tab:focus {\n  outline: none;\n}\n\n.react-tabs__tab:focus:after {\n  content: '';\n  position: absolute;\n  height: 5px;\n  left: -4px;\n  right: -4px;\n  bottom: -5px;\n  background: #fff;\n}\n\n.react-tabs__tab-panel {\n  display: none;\n}\n\n.react-tabs__tab-panel--selected {\n  display: block;\n}\n";
@@ -39870,10 +39873,22 @@ var CreateStudy = function (_a) {
     }, [state.recipe]);
     return (React__default.createElement("div", { "data-testid": "CreateProject", style: __assign$3(__assign$3({}, defaultStyle), style) },
         React__default.createElement(Tabs, { selectedIndex: activeTabIndex, onSelect: function (index) { return setActiveTabIndex(index); }, forceRenderTabPanel: true },
-            React__default.createElement(TabList, null,
-                React__default.createElement(Tab, null, "Select Recipe"),
+            React__default.createElement("div", { style: {
+                    display: 'flex',
+                    width: '100%',
+                    alignItems: 'center',
+                    justifyContent: 'space-between'
+                } },
+                React__default.createElement(TabList, { style: {
+                        flex: 1
+                    } },
+                    React__default.createElement(Tab, null, "Select Recipe"),
+                    state.recipe &&
+                        React__default.createElement(Tab, null, "Recipe Inputs")),
                 state.recipe &&
-                    React__default.createElement(Tab, null, "Recipe Inputs")),
+                    React__default.createElement("h5", { style: {
+                            marginBottom: 0
+                        } }, state.recipe.metadata.name)),
             React__default.createElement(TabPanel, { style: {
                     padding: '8px 8px'
                 } },