pollination-react-io 0.0.45-beta.3 → 0.0.45

package/build/SelectAccount/SelectAccount.types.d.ts

@@ -1,11 +1,9 @@
 import { Organization, UserPrivate } from '@pollination-solutions/pollination-sdk';
-import { CSSProperties } from 'react';
 import { APIClient } from '../hooks';
 export declare type Account = Organization | UserPrivate;
 export interface SelectAccountProps {
     authUser?: UserPrivate;
     client?: APIClient;
-    style?: CSSProperties;
     setSelAccount?: (account: Account) => void;
     environment: Window;
 }

package/build/SelectProject/SelectProject.types.d.ts

@@ -1,9 +1,9 @@
-import { Project, ProjectsApiListProjectsRequest, UserPrivate } from '@pollination-solutions/pollination-sdk';
+import { Project, UserPrivate } from '@pollination-solutions/pollination-sdk';
 import { APIClient } from '../hooks';
 export interface SelectProjectProps {
     authUser?: UserPrivate;
     client?: APIClient;
+    projectOwner: string[];
     setSelProject?: (project: Project) => void;
-    queryConfig?: Partial<ProjectsApiListProjectsRequest>;
     environment?: Window;
 }

package/build/SelectRecipe/SelectRecipe.types.d.ts

@@ -1,9 +1,10 @@
 import { RecipeInterface, UserPrivate } from '@pollination-solutions/pollination-sdk';
 import { APIClient } from '../hooks';
 export interface SelectRecipeProps {
-    projectName?: string;
     authUser?: UserPrivate;
     client?: APIClient;
+    projectName?: string;
+    projectOwner?: string;
     setSelRecipe?: (recipe: RecipeInterface) => void;
     environment?: Window;
 }

package/build/SelectRun/SelectRun.types.d.ts

@@ -1,11 +1,11 @@
 import { Run, UserPrivate } from '@pollination-solutions/pollination-sdk';
 import { APIClient } from '../hooks';
 export interface SelectRunProps {
+    authUser?: UserPrivate;
+    client?: APIClient;
     projectOwner?: string;
     projectName?: string;
     jobId?: string[];
-    authUser?: UserPrivate;
-    client?: APIClient;
     setSelRun?: (recipe: Run) => void;
     environment?: Window;
 }

package/build/index.esm.js

@@ -31062,7 +31062,7 @@ var ComboBox = React__default.forwardRef(function ComboBox(_a, ref) {
                 React__default.createElement("ul", __assign$3({}, getMenuProps(), { style: __assign$3(__assign$3({}, menuStyle), { display: 'flex', width: '100%', boxSizing: 'border-box', zIndex: 100, padding: 0, flexDirection: 'column' }) }), inputItems.map(function (item, i, arr) { return (React__default.createElement("li", __assign$3({ className: "poll-combobox-item", style: highlightedIndex === i ? { backgroundColor: '#bde4ff' } : {}, key: "".concat(item.name, "-").concat(i) }, getItemProps({
                     item: item,
                     index: i,
-                    isSelected: selectedItem && selectedItem.id === item.id,
+                    // isSelected: selectedItem && selectedItem.id === item.id, 
                 })), renderItem ? renderItem(item, i, arr) : item.name)); }))),
             React__default.createElement("div", { className: 'poll-combo-footer-container', style: {
                     opacity: isOpen ? 1 : 0
@@ -34120,42 +34120,72 @@ var css_248z = ":root {\n  --slate1: hsl(206, 30.0%, 98.8%);\n  --slate2: hsl(21
 styleInject(css_248z);
 
 var SelectAccount = function (_a) {
+    var _b;
     var authUser = _a.authUser, client = _a.client, setSelAccount = _a.setSelAccount, environment = _a.environment;
-    var _b = useState(), accounts = _b[0], setAccounts = _b[1];
     var comboBoxRef = useRef();
-    var _c = useState(false), loading = _c[0], setLoading = _c[1];
-    var fetchOrganizations = useCallback(function (member) {
+    var _c = useState(function () { return authUser ? [authUser] : []; }), accounts = _c[0], setAccounts = _c[1];
+    var _d = useState(false), loading = _d[0], setLoading = _d[1];
+    var totalRunsRef = useRef({
+        loaded: 0,
+        total: undefined
+    });
+    var _e = useState(0), total = _e[0], setTotal = _e[1];
+    var _f = useState({
+        page: 1,
+        perPage: 25,
+    }), queryConfig = _f[0], setQueryConfig = _f[1];
+    // resetting query
+    useEffect(function () {
+        // reset total loaded
+        totalRunsRef.current = {
+            loaded: 0,
+            total: undefined
+        };
+        // deselect items
+        if (comboBoxRef.current) {
+            comboBoxRef.current.selectItem(null);
+        }
+        setAccounts(authUser ? [authUser] : []);
+        setQueryConfig(function (q) { return (__assign$3(__assign$3({}, q), { member: authUser ? [authUser === null || authUser === void 0 ? void 0 : authUser.username] : undefined, page: 1 })); });
+    }, [authUser]);
+    var fetchOrganizations = useCallback(function (queryConfig) {
         if (!authUser)
             return;
+        if (!queryConfig.member)
+            return;
+        // we've already loaded all Runs
+        var _a = totalRunsRef.current, total = _a.total, loaded = _a.loaded;
+        if (total && loaded >= total)
+            return;
         setLoading(true);
-        client.orgs.listOrgs({
-            member: member,
-            page: 1,
-            perPage: 25,
-        })
+        client.orgs.listOrgs(__assign$3(__assign$3({}, queryConfig), { member: [authUser.username] }))
             .then(function (_a) {
             var data = _a.data;
-            setAccounts(data);
+            setAccounts(function (state) { return state ? __spreadArray$2(__spreadArray$2([], state, true), data.resources, true) : __spreadArray$2([], data.resources, true); });
+            setTotal(data.total_count);
+            totalRunsRef.current.loaded += data.resources.length;
+            totalRunsRef.current.total = data.total_count;
         })
             .finally(function () {
             setLoading(false);
         });
     }, [authUser, client.orgs]);
-    // initial fetch
     useEffect(function () {
-        if (!authUser)
-            return;
-        fetchOrganizations([authUser.username]);
-    }, [authUser, fetchOrganizations]);
-    useEffect(function () {
-        if (!authUser || !comboBoxRef.current)
+        fetchOrganizations(queryConfig);
+    }, [fetchOrganizations, queryConfig]);
+    var onScrollReachEnd = useCallback(function () {
+        // already loaded all runs
+        var _a = totalRunsRef.current, total = _a.total, loaded = _a.loaded;
+        if (total && loaded >= total)
             return;
-        comboBoxRef.current.selectItem(authUser);
-    }, [authUser]);
+        setQueryConfig(function (q) { return (__assign$3(__assign$3({}, q), { page: q.page ? q.page + 1 : 1 })); });
+    }, []);
     return (React__default.createElement(ComboBox, { ref: comboBoxRef, environment: environment, 
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
         // @ts-ignore
-        items: (accounts === null || accounts === void 0 ? void 0 : accounts.resources) ? __spreadArray$2([authUser], accounts.resources, true) : [], renderItem: function (item) {
+        items: accounts ? accounts.map(function (a) {
+            // @ts-ignore
+            return a.name ? a : (__assign$3(__assign$3({}, a), { name: a.account_name }));
+        }) : [], renderItem: function (item) {
             var _a;
             return (React__default.createElement("div", { style: {
                     display: 'flex',
@@ -34164,134 +34194,207 @@ var SelectAccount = function (_a) {
                     padding: '2px 0px'
                 } },
                 React__default.createElement(Avatar
-                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
                 // @ts-ignore
                 , { 
-                    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
                     // @ts-ignore
                     src: (_a = item.picture) !== null && _a !== void 0 ? _a : item.picture_url, alt: item.name, fallback: item.name, size: 24 }),
                 item.name));
         }, setSelected: setSelAccount, inputProps: {
             placeholder: 'Select an account...',
-        }, loading: !client || loading, footer: (React__default.createElement("div", { key: "footer", style: {
+        }, loading: loading, disabled: !authUser, footer: (React__default.createElement("div", { key: "footer", style: {
                 width: '100%',
                 display: 'flex',
                 justifyContent: 'center',
                 color: 'var(--slate10)',
-            } }, "".concat(accounts === null || accounts === void 0 ? void 0 : accounts.total_count, " accounts"))) }));
+            } }, "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 SelectStudy = function (_a) {
-    var _b;
-    var projectName = _a.projectName, projectOwner = _a.projectOwner, authUser = _a.authUser, client = _a.client, setSelStudy = _a.setSelStudy, queryConfig = _a.queryConfig, environment = _a.environment;
-    var _c = useState(), studies = _c[0], setStudies = _c[1];
+    var _b, _c;
+    var authUser = _a.authUser, client = _a.client, projectName = _a.projectName, projectOwner = _a.projectOwner, setSelStudy = _a.setSelStudy, environment = _a.environment;
     var comboBoxRef = useRef();
-    var _d = useState(false), loading = _d[0], setLoading = _d[1];
-    var fetchStudies = useCallback(function (name, owner) {
+    var _d = useState(), studies = _d[0], setStudies = _d[1];
+    var _e = useState(false), loading = _e[0], setLoading = _e[1];
+    var totalRunsRef = useRef({
+        loaded: 0,
+        total: undefined
+    });
+    var _f = useState(0), total = _f[0], setTotal = _f[1];
+    var _g = useState({
+        owner: projectOwner !== null && projectOwner !== void 0 ? projectOwner : (authUser && authUser.username),
+        name: projectName,
+        page: 1,
+        perPage: 10,
+    }), queryConfig = _g[0], setQueryConfig = _g[1];
+    // resetting query
+    useEffect(function () {
+        // reset total loaded
+        totalRunsRef.current = {
+            loaded: 0,
+            total: undefined
+        };
+        // deselect items
+        if (comboBoxRef.current) {
+            comboBoxRef.current.selectItem(null);
+        }
+        setStudies([]);
+        setQueryConfig(function (q) { return (__assign$3(__assign$3({}, q), { owner: projectOwner, name: projectName, page: 1 })); });
+    }, [projectOwner, projectName]);
+    var fetchStudies = useCallback(function (queryConfig) {
         if (!authUser)
             return;
+        if (!queryConfig.name || !queryConfig.owner)
+            return;
+        // we've already loaded all Runs
+        var _a = totalRunsRef.current, total = _a.total, loaded = _a.loaded;
+        if (total && loaded >= total)
+            return;
         setLoading(true);
-        client.jobs.listJobs(__assign$3({ name: name, 
-            // @ts-ignore
-            owner: owner, page: 1, perPage: 25 }, queryConfig))
+        client.jobs.listJobs(queryConfig)
             .then(function (_a) {
             var data = _a.data;
-            setStudies(data);
+            setStudies(function (state) { return state ? __spreadArray$2(__spreadArray$2([], state, true), data.resources, true) : __spreadArray$2([], data.resources, true); });
+            setTotal(data.total_count);
+            totalRunsRef.current.loaded += data.resources.length;
+            totalRunsRef.current.total = data.total_count;
         })
             .finally(function () {
             setLoading(false);
         });
-    }, [authUser, client.jobs, queryConfig]);
+    }, [authUser, client.jobs]);
     useEffect(function () {
-        // recent selection on refetch
-        if (comboBoxRef.current) {
-            comboBoxRef.current.selectItem(null);
-        }
-    }, [queryConfig]);
-    // initial fetch
-    useEffect(function () {
-        if (!authUser || !projectName)
+        fetchStudies(queryConfig);
+    }, [fetchStudies, queryConfig]);
+    var onScrollReachEnd = useCallback(function () {
+        // already loaded all runs
+        var _a = totalRunsRef.current, total = _a.total, loaded = _a.loaded;
+        if (total && loaded >= total)
             return;
-        var owner = projectOwner !== null && projectOwner !== void 0 ? projectOwner : authUser.username;
-        fetchStudies(projectName, owner);
-    }, [authUser, fetchStudies, projectName, projectOwner]);
-    return (React__default.createElement(ComboBox, { ref: comboBoxRef, environment: environment, items: (_b = studies === null || studies === void 0 ? void 0 : studies.resources.map(function (r) { var _a; return (__assign$3(__assign$3({}, r), { name: (_a = r.spec.name) !== null && _a !== void 0 ? _a : "".concat(r.recipe.metadata.name, " : ").concat(r.status.id.slice(0, 5), "...") })); })) !== null && _b !== void 0 ? _b : [], setSelected: setSelStudy, inputProps: {
+        setQueryConfig(function (q) { return (__assign$3(__assign$3({}, q), { page: q.page ? q.page + 1 : 1 })); });
+    }, []);
+    return (React__default.createElement(ComboBox, { ref: comboBoxRef, environment: environment, items: (_b = studies === null || studies === void 0 ? void 0 : studies.map(function (r) { var _a; return (__assign$3(__assign$3({}, r), { name: (_a = r.spec.name) !== null && _a !== void 0 ? _a : "".concat(r.recipe.metadata.name, " : ").concat(r.status.id.slice(0, 5), "...") })); })) !== null && _b !== void 0 ? _b : [], setSelected: setSelStudy, inputProps: {
             placeholder: 'Select a study...',
-        }, loading: !client || loading, disabled: !client || !(queryConfig === null || queryConfig === void 0 ? void 0 : queryConfig.owner), footer: (React__default.createElement("div", { key: "footer", style: {
+        }, loading: loading, disabled: !authUser || !queryConfig.name || !queryConfig.owner, footer: (React__default.createElement("div", { key: "footer", style: {
                 width: '100%',
                 display: 'flex',
                 justifyContent: 'center',
                 color: 'var(--grey4)',
-            } }, "".concat(studies === null || studies === void 0 ? void 0 : studies.total_count, " studies"))) }));
+            } }, "Showing ".concat((_c = studies === null || studies === void 0 ? void 0 : studies.length) !== null && _c !== void 0 ? _c : 0, " of ").concat(total, " runs"))), onScrollReachEnd: onScrollReachEnd }));
 };
 
 var SelectProject = function (_a) {
     var _b;
-    var authUser = _a.authUser, client = _a.client, setSelProject = _a.setSelProject, queryConfig = _a.queryConfig, environment = _a.environment;
-    var _c = useState(), projects = _c[0], setProjects = _c[1];
+    var authUser = _a.authUser, client = _a.client, projectOwner = _a.projectOwner, setSelProject = _a.setSelProject, environment = _a.environment;
     var comboBoxRef = useRef();
+    var _c = useState(), projects = _c[0], setProjects = _c[1];
     var _d = useState(false), loading = _d[0], setLoading = _d[1];
-    var fetchProjects = useCallback(function (owner) {
-        if (!client)
+    var totalRunsRef = useRef({
+        loaded: 0,
+        total: undefined
+    });
+    var _e = useState(0), total = _e[0], setTotal = _e[1];
+    var _f = useState({
+        owner: projectOwner !== null && projectOwner !== void 0 ? projectOwner : (authUser && [authUser.username]),
+        page: 1,
+        perPage: 10,
+    }), queryConfig = _f[0], setQueryConfig = _f[1];
+    // resetting query
+    useEffect(function () {
+        // reset total loaded
+        totalRunsRef.current = {
+            loaded: 0,
+            total: undefined
+        };
+        // deselect items
+        if (comboBoxRef.current) {
+            comboBoxRef.current.selectItem(null);
+        }
+        setProjects([]);
+        setQueryConfig(function (q) { return (__assign$3(__assign$3({}, q), { owner: projectOwner, page: 1 })); });
+    }, [projectOwner]);
+    var fetchProjects = useCallback(function (queryConfig) {
+        if (!authUser)
+            return;
+        if (!queryConfig.owner)
+            return;
+        var _a = totalRunsRef.current, total = _a.total, loaded = _a.loaded;
+        if (total && loaded >= total)
             return;
         setLoading(true);
-        client.projects.listProjects(__assign$3({ owner: owner, page: 1, perPage: 25 }, queryConfig))
+        client.projects.listProjects(queryConfig)
             .then(function (_a) {
             var data = _a.data;
-            setProjects(data);
+            setProjects(function (state) { return state ? __spreadArray$2(__spreadArray$2([], state, true), data.resources, true) : __spreadArray$2([], data.resources, true); });
+            setTotal(data.total_count);
+            totalRunsRef.current.loaded += data.resources.length;
+            totalRunsRef.current.total = data.total_count;
         })
             .finally(function () {
             setLoading(false);
         });
-    }, [client, queryConfig]);
-    useEffect(function () {
-        // recent selection on refetch
-        if (comboBoxRef.current) {
-            comboBoxRef.current.selectItem(null);
-        }
-    }, [queryConfig]);
-    // initial fetch
+    }, [authUser, client.projects]);
     useEffect(function () {
-        if (!authUser)
+        fetchProjects(queryConfig);
+    }, [fetchProjects, queryConfig]);
+    var onScrollReachEnd = useCallback(function () {
+        // already loaded all runs
+        var _a = totalRunsRef.current, total = _a.total, loaded = _a.loaded;
+        if (total && loaded >= total)
             return;
-        fetchProjects([authUser.username]);
-    }, [authUser, fetchProjects]);
-    return (React__default.createElement(ComboBox, { ref: comboBoxRef, environment: environment, items: (_b = projects === null || projects === void 0 ? void 0 : projects.resources) !== null && _b !== void 0 ? _b : [], setSelected: setSelProject, inputProps: {
+        setQueryConfig(function (q) { return (__assign$3(__assign$3({}, q), { page: q.page ? q.page + 1 : 1 })); });
+    }, []);
+    return (React__default.createElement(ComboBox, { ref: comboBoxRef, environment: environment, items: projects !== null && projects !== void 0 ? projects : [], setSelected: setSelProject, inputProps: {
             placeholder: 'Select a project...',
-        }, loading: !client || loading, disabled: !client || !(queryConfig === null || queryConfig === void 0 ? void 0 : queryConfig.owner), footer: (React__default.createElement("div", { key: "footer", style: {
+        }, loading: loading, disabled: !authUser || !queryConfig.owner, footer: (React__default.createElement("div", { key: "footer", style: {
                 width: '100%',
                 display: 'flex',
                 justifyContent: 'center',
                 color: 'var(--grey4)',
-            } }, "".concat(projects === null || projects === void 0 ? void 0 : projects.total_count, " projects"))) }));
+            } }, "Showing ".concat((_b = projects === null || projects === void 0 ? void 0 : projects.length) !== null && _b !== void 0 ? _b : 0, " of ").concat(total, " projects"))), onScrollReachEnd: onScrollReachEnd }));
 };
 
 var SelectRecipe = function (_a) {
     var _b, _c;
-    var projectName = _a.projectName, authUser = _a.authUser, client = _a.client, setSelRecipe = _a.setSelRecipe, environment = _a.environment;
+    var authUser = _a.authUser, client = _a.client, projectName = _a.projectName, projectOwner = _a.projectOwner, setSelRecipe = _a.setSelRecipe, environment = _a.environment;
+    var comboBoxRef = useRef();
     var _d = useState(), recipes = _d[0], setRecipes = _d[1];
+    var _e = useState(false), loading = _e[0], setLoading = _e[1];
     var totalRecipesRef = useRef({
         loaded: 0,
         total: undefined
     });
-    var _e = useState(0), total = _e[0], setTotal = _e[1];
-    var _f = useState(1), page = _f[0], setPage = _f[1];
-    var comboBoxRef = useRef();
-    var _g = useState(false), loading = _g[0], setLoading = _g[1];
-    var fetchRecipes = useCallback(function (name, owner) {
-        if (!client)
+    var _f = useState(0), total = _f[0], setTotal = _f[1];
+    var _g = useState({
+        owner: projectOwner !== null && projectOwner !== void 0 ? projectOwner : (authUser && authUser.username),
+        name: projectName,
+        page: 1,
+        perPage: 10,
+    }), queryConfig = _g[0], setQueryConfig = _g[1];
+    // resetting query
+    useEffect(function () {
+        // reset total loaded
+        totalRecipesRef.current = {
+            loaded: 0,
+            total: undefined
+        };
+        // deselect items
+        if (comboBoxRef.current) {
+            comboBoxRef.current.selectItem(null);
+        }
+        setRecipes([]);
+        setQueryConfig(function (q) { return (__assign$3(__assign$3({}, q), { owner: projectOwner, name: projectName, page: 1 })); });
+    }, [projectOwner, projectName]);
+    var fetchRecipes = useCallback(function (queryConfig) {
+        if (!authUser)
+            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;
         setLoading(true);
-        client.projects.getProjectRecipes({
-            name: name,
-            owner: owner,
-            page: page,
-            perPage: 10,
-        })
+        client.projects.getProjectRecipes(queryConfig)
             .then(function (_a) {
             var data = _a.data;
             setRecipes(function (state) { return state ? __spreadArray$2(__spreadArray$2([], state, true), data.resources, true) : __spreadArray$2([], data.resources, true); });
@@ -34302,28 +34405,15 @@ var SelectRecipe = function (_a) {
             .finally(function () {
             setLoading(false);
         });
-    }, [client, page]);
+    }, [authUser, client.projects]);
     useEffect(function () {
-        // recent selection on refetch
-        if (comboBoxRef.current) {
-            comboBoxRef.current.selectItem(null);
-        }
-    }, [projectName]);
-    // initial fetch
-    useEffect(function () {
-        if (!authUser || !projectName)
-            return;
-        fetchRecipes(projectName, authUser.username);
-    }, [authUser, fetchRecipes, projectName]);
+        fetchRecipes(queryConfig);
+    }, [fetchRecipes, queryConfig]);
     var onScrollReachEnd = useCallback(function () {
-        console.log(totalRecipesRef.current);
         var _a = totalRecipesRef.current, total = _a.total, loaded = _a.loaded;
         if (total && loaded >= total)
             return;
-        setPage(function (p) {
-            p++;
-            return p;
-        });
+        setQueryConfig(function (q) { return (__assign$3(__assign$3({}, q), { page: q.page ? q.page + 1 : 1 })); });
     }, []);
     return (React__default.createElement(ComboBox, { ref: comboBoxRef, environment: environment, items: (_b = recipes === null || recipes === void 0 ? void 0 : recipes.map(function (r, i) { return (__assign$3(__assign$3({}, 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',
@@ -34332,7 +34422,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: !client || loading, disabled: !client || !projectName, footer: (React__default.createElement("div", { key: "footer", style: {
+        }, loading: loading, disabled: !authUser || !queryConfig.name || !queryConfig.owner, footer: (React__default.createElement("div", { key: "footer", style: {
                 width: '100%',
                 display: 'flex',
                 justifyContent: 'center',
@@ -34343,31 +34433,47 @@ var SelectRecipe = function (_a) {
 
 var SelectRun = function (_a) {
     var _b, _c;
-    var projectOwner = _a.projectOwner, projectName = _a.projectName, jobId = _a.jobId, authUser = _a.authUser, client = _a.client, setSelRun = _a.setSelRun, environment = _a.environment;
+    var authUser = _a.authUser, client = _a.client, projectOwner = _a.projectOwner, projectName = _a.projectName, jobId = _a.jobId, setSelRun = _a.setSelRun, environment = _a.environment;
+    var comboBoxRef = useRef();
     var _d = useState(), runs = _d[0], setRuns = _d[1];
+    var _e = useState(false), loading = _e[0], setLoading = _e[1];
     var totalRunsRef = useRef({
         loaded: 0,
         total: undefined
     });
-    var _e = useState(0), total = _e[0], setTotal = _e[1];
-    var _f = useState(1), page = _f[0], setPage = _f[1];
-    var comboBoxRef = useRef();
-    var _g = useState(false), loading = _g[0], setLoading = _g[1];
-    var fetchRuns = useCallback(function (name, owner, jobId) {
-        if (!client)
+    var _f = useState(0), total = _f[0], setTotal = _f[1];
+    var _g = useState({
+        owner: projectOwner !== null && projectOwner !== void 0 ? projectOwner : (authUser && authUser.username),
+        name: projectName,
+        jobId: jobId,
+        page: 1,
+        perPage: 10,
+    }), queryConfig = _g[0], setQueryConfig = _g[1];
+    // resetting query
+    useEffect(function () {
+        // reset total loaded
+        totalRunsRef.current = {
+            loaded: 0,
+            total: undefined
+        };
+        // deselect items
+        if (comboBoxRef.current) {
+            comboBoxRef.current.selectItem(null);
+        }
+        setRuns([]);
+        setQueryConfig(function (q) { return (__assign$3(__assign$3({}, q), { jobId: jobId, owner: projectOwner, name: projectName, page: 1 })); });
+    }, [jobId, projectOwner, projectName]);
+    var fetchRuns = useCallback(function (queryConfig) {
+        if (!authUser)
+            return;
+        if (!queryConfig.name || !queryConfig.owner || !queryConfig.jobId)
             return;
         // we've already loaded all Runs
         var _a = totalRunsRef.current, total = _a.total, loaded = _a.loaded;
         if (total && loaded >= total)
             return;
         setLoading(true);
-        client.runs.listRuns({
-            name: name,
-            owner: owner,
-            jobId: jobId,
-            page: page,
-            perPage: 10,
-        })
+        client.runs.listRuns(queryConfig)
             .then(function (_a) {
             var data = _a.data;
             setRuns(function (state) { return state ? __spreadArray$2(__spreadArray$2([], state, true), data.resources, true) : __spreadArray$2([], data.resources, true); });
@@ -34378,28 +34484,16 @@ var SelectRun = function (_a) {
             .finally(function () {
             setLoading(false);
         });
-    }, [client, page]);
+    }, [authUser, client.runs]);
     useEffect(function () {
-        // recent selection on refetch
-        if (comboBoxRef.current) {
-            comboBoxRef.current.selectItem(null);
-        }
-    }, [projectName]);
-    // initial fetch
-    useEffect(function () {
-        if (!authUser || !projectName)
-            return;
-        var owner = projectOwner !== null && projectOwner !== void 0 ? projectOwner : authUser.username;
-        fetchRuns(projectName, owner, jobId);
-    }, [authUser, fetchRuns, jobId, projectName, projectOwner]);
+        fetchRuns(queryConfig);
+    }, [fetchRuns, queryConfig]);
     var onScrollReachEnd = useCallback(function () {
+        // already loaded all runs
         var _a = totalRunsRef.current, total = _a.total, loaded = _a.loaded;
         if (total && loaded >= total)
             return;
-        setPage(function (p) {
-            p++;
-            return p;
-        });
+        setQueryConfig(function (q) { return (__assign$3(__assign$3({}, q), { page: q.page ? q.page + 1 : 1 })); });
     }, []);
     return (React__default.createElement(ComboBox, { ref: comboBoxRef, environment: environment, items: (_b = runs === null || runs === void 0 ? void 0 : runs.map(function (r) { return (__assign$3(__assign$3({}, r), { name: "".concat(r.recipe.metadata.name, " : ").concat(r.status.status) })); })) !== null && _b !== void 0 ? _b : [], renderItem: function (item, i) { return (React__default.createElement("div", { style: {
                 display: 'flex',
@@ -34420,13 +34514,13 @@ var SelectRun = function (_a) {
                     justifyContent: 'flex-end'
                 }, className: 'secondary' }, "".concat(i)))); }, setSelected: setSelRun, inputProps: {
             placeholder: 'Select a run...',
-        }, loading: !client || loading, disabled: !client || !projectName, footer: (React__default.createElement("div", { key: "footer", style: {
+        }, loading: loading, disabled: !authUser || !queryConfig.name || !queryConfig.owner, footer: (React__default.createElement("div", { key: "footer", style: {
                 width: '100%',
                 display: 'flex',
                 justifyContent: 'center',
                 color: 'var(--grey4)',
                 padding: '6px 0px',
-            } }, "Showing ".concat((_c = runs === null || runs === void 0 ? void 0 : runs.length) !== null && _c !== void 0 ? _c : 0, " of ").concat(total, " recipes"))), onScrollReachEnd: onScrollReachEnd }));
+            } }, "Showing ".concat((_c = runs === null || runs === void 0 ? void 0 : runs.length) !== null && _c !== void 0 ? _c : 0, " of ").concat(total, " runs"))), onScrollReachEnd: onScrollReachEnd }));
 };
 
 var getAction$1 = function (key) {