Merge pull request #7738 from TheThingsNetwork/fix/fetch-table

mjamescompton · web-flow · commit 10dc5aa897b1 · 2025-10-23T10:44:18.000+02:00
Block requests on Fetch Table when fetching
diff --git a/pkg/webui/components/tabs/index.js b/pkg/webui/components/tabs/index.js
@@ -35,43 +35,53 @@ const Tabs = ({
   divider,
   narrow,
   toggleStyle,
-}) => (
-  <ul
-    className={classnames(className, style.tabs, {
-      [style.divider]: divider,
-      [style.tabsToggleStyle]: toggleStyle,
-    })}
-    data-test-id="tabs"
-  >
-    {tabs.map(
-      ({ name, disabled, narrow: nrw, link, exact, icon, title, hidden, description }, index) =>
-        !Boolean(hidden) && (
-          <Tab
-            key={index}
-            active={name === active}
-            name={name}
-            disabled={disabled}
-            onClick={onTabChange}
-            narrow={nrw || narrow}
-            link={link}
-            exact={exact}
-            tabClassName={individualTabClassName}
-            className={tabItemClassName}
-            toggleStyle={toggleStyle}
-            tooltip={description}
-          >
-            {icon && <Icon icon={icon} className={style.icon} />}
-            <Message content={title} />
-          </Tab>
-        ),
-    )}
-  </ul>
-)
+  disabled,
+}) => {
+  const handleClick = tabName => {
+    if (!disabled && onTabChange) {
+      onTabChange(tabName)
+    }
+  }
+
+  return (
+    <ul
+      className={classnames(className, style.tabs, {
+        [style.divider]: divider,
+        [style.tabsToggleStyle]: toggleStyle,
+      })}
+      data-test-id="tabs"
+    >
+      {tabs.map(
+        ({ name, disabled, narrow: nrw, link, exact, icon, title, hidden, description }, index) =>
+          !Boolean(hidden) && (
+            <Tab
+              key={index}
+              active={name === active}
+              name={name}
+              disabled={disabled}
+              onClick={handleClick}
+              narrow={nrw || narrow}
+              link={link}
+              exact={exact}
+              tabClassName={individualTabClassName}
+              className={tabItemClassName}
+              toggleStyle={toggleStyle}
+              tooltip={description}
+            >
+              {icon && <Icon icon={icon} className={style.icon} />}
+              <Message content={title} />
+            </Tab>
+          ),
+      )}
+    </ul>
+  )
+}
 
 Tabs.propTypes = {
   /** The name of the active tab. */
   active: PropTypes.string,
   className: PropTypes.string,
+  disabled: PropTypes.bool,
   /** Flag specifying whether the tab should render a bottom divider. */
   divider: PropTypes.bool,
   individualTabClassName: PropTypes.string,
@@ -104,6 +114,7 @@ Tabs.defaultProps = {
   divider: false,
   narrow: false,
   toggleStyle: false,
+  disabled: false,
 }
 
 export default Tabs
diff --git a/pkg/webui/console/containers/applications-table/index.js b/pkg/webui/console/containers/applications-table/index.js
@@ -265,8 +265,6 @@ const ApplicationsTable = props => {
     const { tab, query } = filters
     const isDeletedTab = tab === DELETED_TAB
 
-    setTab(tab)
-
     return getApplicationsList(
       { ...filters, deleted: isDeletedTab },
       [
@@ -297,6 +295,7 @@ const ApplicationsTable = props => {
       tabs={isAdmin ? tabs : []}
       searchPlaceholderMessage={sharedMessages.searchApplications}
       {...rest}
+      setTab={setTab}
     />
   )
 }
diff --git a/pkg/webui/console/containers/gateways-table/index.js b/pkg/webui/console/containers/gateways-table/index.js
@@ -233,8 +233,6 @@ const GatewaysTable = () => {
     const { tab, query } = filters
     const isDeletedTab = tab === DELETED_TAB
 
-    setTab(tab)
-
     return getGatewaysList(
       { ...filters, deleted: isDeletedTab },
       ['name', 'description', 'frequency_plan_ids', 'gateway_server_address'],
@@ -258,6 +256,7 @@ const GatewaysTable = () => {
       searchPlaceholderMessage={sharedMessages.searchGateways}
       clickable={!isDeletedTab}
       tabs={isAdmin ? tabs : undefined}
+      setTab={setTab}
     />
   )
 }
diff --git a/pkg/webui/console/containers/oauth-clients-table/index.js b/pkg/webui/console/containers/oauth-clients-table/index.js
@@ -191,7 +191,6 @@ const ClientsTable = () => {
     const { tab, query } = filters
     const isDeletedTab = tab === DELETED_TAB
 
-    setTab(tab)
     return getClientsList({ ...filters, deleted: isDeletedTab }, ['name', 'description', 'state'], {
       isSearch: tab === ALL_TAB || isDeletedTab || query.length > 0,
     })
@@ -209,6 +208,7 @@ const ClientsTable = () => {
       searchable
       clickable={!isDeletedTab}
       tabs={isAdmin ? tabs : EMPTY_ARRAY}
+      setTab={setTab}
     />
   )
 }
diff --git a/pkg/webui/console/containers/organizations-table/index.js b/pkg/webui/console/containers/organizations-table/index.js
@@ -202,8 +202,6 @@ const OrganizationsTable = () => {
     const { tab, query } = filters
     const isDeletedTab = tab === DELETED_TAB
 
-    setTab(tab)
-
     return getOrganizationsList({ ...filters, deleted: isDeletedTab }, ['name', 'description'], {
       isSearch: tab === ALL_TAB || isDeletedTab || query.length > 0,
       withCollaboratorCount: true,
@@ -222,6 +220,7 @@ const OrganizationsTable = () => {
       searchable
       clickable={!isDeletedTab}
       tabs={isAdmin ? tabs : []}
+      setTab={setTab}
     />
   )
 }
diff --git a/pkg/webui/console/containers/users-table/index.js b/pkg/webui/console/containers/users-table/index.js
@@ -306,7 +306,6 @@ const UsersTable = () => {
   const getItems = React.useCallback(params => {
     const { tab, query } = params
     const isDeletedTab = tab === DELETED_TAB
-    setTab(tab)
 
     if (tab === INVITATIONS_TAB) {
       return getUserInvitations(params, ['state'])
@@ -356,6 +355,7 @@ const UsersTable = () => {
       clickable={!isDeletedTab}
       tabs={mayInvite ? tabsWithInvitations : tabs}
       searchable={!isInvitationsTab}
+      setTab={setTab}
     />
   )
 }
diff --git a/pkg/webui/containers/fetch-table/index.js b/pkg/webui/containers/fetch-table/index.js
@@ -88,6 +88,7 @@ const FetchTable = props => {
     filtersClassName,
     smallCells,
     tableClassName,
+    setTab,
   } = props
 
   const globalPageSize = useSelector(selectPageSize)
@@ -96,7 +97,7 @@ const FetchTable = props => {
   const dispatch = useDispatch()
   const defaultTab = tabs.length > 0 ? tabs[0].name : undefined
   const [page, setPage] = useQueryState('page', 1, parseInt)
-  const [tab, setTab] = useQueryState('tab', defaultTab)
+  const [queryTab, setQueryTab] = useQueryState('tab', defaultTab)
   const [order, setOrder] = useQueryState('order', defaultOrder)
   const [query, setQuery] = useQueryState('query', '')
   const debouncedQuery = useDebounce(
@@ -113,7 +114,13 @@ const FetchTable = props => {
   const mayAdd = 'mayAdd' in base ? base.mayAdd : true
   const mayLink = 'mayLink' in base ? base.mayLink : true
 
-  const filters = { query: debouncedQuery, tab, order, page, limit: globalPageSize ?? pageSize }
+  const filters = {
+    query: debouncedQuery,
+    queryTab,
+    order,
+    page,
+    limit: globalPageSize ?? pageSize,
+  }
   const [fetching, setFetching] = useState(true)
   const [error, setError] = useState(undefined)
   let orderDirection, orderBy
@@ -141,10 +148,10 @@ const FetchTable = props => {
     const fetchItems = async () => {
       setFetching(true)
       const f = { query: debouncedQuery || '', page, limit: globalPageSize ?? pageSize }
-      if (tabs.find(t => t.name === tab)) {
-        f.tab = tab
+      if (tabs.find(t => t.name === queryTab)) {
+        f.tab = queryTab
       } else {
-        setTab(defaultTab)
+        setQueryTab(defaultTab)
         f.tab = undefined
       }
 
@@ -162,6 +169,7 @@ const FetchTable = props => {
           await dispatch(attachPromise(searchItemsAction(f)))
         } else {
           await dispatch(attachPromise(getItemsAction(f)))
+          setTab(f.tab)
         }
         if (isMounted.current) {
           setFetching(false)
@@ -187,9 +195,10 @@ const FetchTable = props => {
     pageSize,
     searchItemsAction,
     setOrder,
-    setTab,
-    tab,
     tabs,
+    queryTab,
+    setQueryTab,
+    setTab,
   ])
 
   const onPageChange = useCallback(
@@ -217,11 +226,11 @@ const FetchTable = props => {
 
   const onTabChange = useCallback(
     tab => {
-      setTab(tab)
+      setQueryTab(tab)
       setPage(1)
       setQuery('')
     },
-    [setPage, setQuery, setTab],
+    [setPage, setQuery, setQueryTab],
   )
 
   const rowHrefSelector = useCallback(
@@ -262,11 +271,12 @@ const FetchTable = props => {
           <div className={style.filtersLeft}>
             {tabs.length > 0 ? (
               <Tabs
-                active={tab}
+                active={queryTab}
                 className={style.tabs}
                 tabs={tabs}
                 onTabChange={onTabChange}
                 toggleStyle
+                disabled={fetching}
               />
             ) : (
               tableTitle && (
@@ -286,6 +296,7 @@ const FetchTable = props => {
                 className={style.searchBar}
                 inputWidth="full"
                 maxLength={searchQueryMaxLength}
+                disabled={fetching}
               />
             )}
             {(Boolean(actionItems) || mayAdd) && (
@@ -378,6 +389,7 @@ FetchTable.propTypes = {
   searchPlaceholderMessage: PropTypes.message,
   searchQueryMaxLength: PropTypes.number,
   searchable: PropTypes.bool,
+  setTab: PropTypes.func,
   smallCells: PropTypes.bool,
   tableClassName: PropTypes.string,
   tableTitle: PropTypes.message,
@@ -416,6 +428,7 @@ FetchTable.defaultProps = {
   filtersClassName: undefined,
   smallCells: false,
   tableClassName: undefined,
+  setTab: () => {},
 }
 
 export default FetchTable

Original file line number	Diff line number	Diff line change
`@@ -265,8 +265,6 @@ const ApplicationsTable = props => {`
`265`	`265`	`const { tab, query } = filters`
`266`	`266`	`const isDeletedTab = tab === DELETED_TAB`
`267`	`267`
`268`		`- setTab(tab)`
`269`		`-`
`270`	`268`	`return getApplicationsList(`
`271`	`269`	`{ ...filters, deleted: isDeletedTab },`
`272`	`270`	`[`
`@@ -297,6 +295,7 @@ const ApplicationsTable = props => {`
`297`	`295`	`tabs={isAdmin ? tabs : []}`
`298`	`296`	`searchPlaceholderMessage={sharedMessages.searchApplications}`
`299`	`297`	`{...rest}`
	`298`	`+ setTab={setTab}`
`300`	`299`	`/>`
`301`	`300`	`)`
`302`	`301`	`}`
Original file line number	Diff line number	Diff line change
`@@ -191,7 +191,6 @@ const ClientsTable = () => {`
`191`	`191`	`const { tab, query } = filters`
`192`	`192`	`const isDeletedTab = tab === DELETED_TAB`
`193`	`193`
`194`		`- setTab(tab)`
`195`	`194`	`return getClientsList({ ...filters, deleted: isDeletedTab }, ['name', 'description', 'state'], {`
`196`	`195`	`isSearch: tab === ALL_TAB \|\| isDeletedTab \|\| query.length > 0,`
`197`	`196`	`})`
`@@ -209,6 +208,7 @@ const ClientsTable = () => {`
`209`	`208`	`searchable`
`210`	`209`	`clickable={!isDeletedTab}`
`211`	`210`	`tabs={isAdmin ? tabs : EMPTY_ARRAY}`
	`211`	`+ setTab={setTab}`
`212`	`212`	`/>`
`213`	`213`	`)`
`214`	`214`	`}`
Original file line number	Diff line number	Diff line change
`@@ -306,7 +306,6 @@ const UsersTable = () => {`
`306`	`306`	`const getItems = React.useCallback(params => {`
`307`	`307`	`const { tab, query } = params`
`308`	`308`	`const isDeletedTab = tab === DELETED_TAB`
`309`		`- setTab(tab)`
`310`	`309`
`311`	`310`	`if (tab === INVITATIONS_TAB) {`
`312`	`311`	`return getUserInvitations(params, ['state'])`
`@@ -356,6 +355,7 @@ const UsersTable = () => {`
`356`	`355`	`clickable={!isDeletedTab}`
`357`	`356`	`tabs={mayInvite ? tabsWithInvitations : tabs}`
`358`	`357`	`searchable={!isInvitationsTab}`
	`358`	`+ setTab={setTab}`
`359`	`359`	`/>`
`360`	`360`	`)`
`361`	`361`	`}`