[Redirects] improve options loading (#3472)

* improve options loading

* Automatic frontend build

Author: xIrusux

assets/js/src/core/modules/redirects/hooks/use-redirect-options.ts

@@ -0,0 +1,56 @@
+/**
+ * This source file is available under the terms of the
+ * Pimcore Open Core License (POCL)
+ * Full copyright and license information is available in
+ * LICENSE.md which is distributed with this source code.
+ *
+ *  @copyright  Copyright (c) Pimcore GmbH (https://www.pimcore.com)
+ *  @license    Pimcore Open Core License (POCL)
+ */
+
+import { useTranslation } from 'react-i18next'
+import {
+  useBundleSeoRedirectListTypesQuery,
+  useBundleSeoRedirectListStatusesQuery,
+  useBundleSeoRedirectListPrioritiesQuery
+} from '../seo-api-slice-enhanced'
+import { type SelectOptionType } from '@Pimcore/modules/element/dynamic-types/definitions/grid-cell/utils/select-options'
+
+interface OptionsHookResult {
+  isLoading: boolean
+  options: SelectOptionType[]
+}
+
+export const useRedirectTypeOptions = (): OptionsHookResult => {
+  const { t } = useTranslation()
+  const { data, isLoading } = useBundleSeoRedirectListTypesQuery()
+
+  return {
+    isLoading,
+    options: data?.types?.map(type => ({ label: t(type), value: type })) ?? []
+  }
+}
+
+export const useRedirectStatusOptions = (): OptionsHookResult => {
+  const { data, isLoading } = useBundleSeoRedirectListStatusesQuery()
+
+  return {
+    isLoading,
+    options: data?.statuses?.map(status => ({
+      label: `${status.code} - ${status.label}`,
+      value: status.code
+    })) ?? []
+  }
+}
+
+export const useRedirectPriorityOptions = (): OptionsHookResult => {
+  const { data, isLoading } = useBundleSeoRedirectListPrioritiesQuery()
+
+  return {
+    isLoading,
+    options: data?.priorities?.map(priority => ({
+      label: priority.toString(),
+      value: priority
+    })) ?? []
+  }
+}

assets/js/src/core/modules/redirects/redirects-container.tsx

@@ -13,7 +13,10 @@ import { ContentLayout } from '@Pimcore/components/content-layout/content-layout
 import { Content } from '@Pimcore/components/content/content'
 import { Table } from './table/table'
 import { Box } from '@sdk/components'
-import { api, useBundleSeoRedirectsGetCollectionQuery } from './seo-api-slice-enhanced'
+import {
+  api,
+  useBundleSeoRedirectsGetCollectionQuery
+} from './seo-api-slice-enhanced'
 import trackError, { ApiError } from '../app/error-handler'
 import { uuid } from '@sdk/utils'
 import { type RedirectRow, useRedirects } from './hooks/use-redirects'

assets/js/src/core/modules/redirects/table/table.tsx

@@ -16,10 +16,10 @@ import { type RedirectRow, useRedirects } from '../hooks/use-redirects'
 import { type ModifiedCells } from '@sdk/modules/element'
 import { ActionsCell } from './actions-cell'
 import {
-  useBundleSeoRedirectListTypesQuery,
-  useBundleSeoRedirectListStatusesQuery,
-  useBundleSeoRedirectListPrioritiesQuery
-} from '../seo-api-slice-enhanced'
+  useRedirectTypeOptions,
+  useRedirectStatusOptions,
+  useRedirectPriorityOptions
+} from '../hooks/use-redirect-options'
 import { useSites } from '@Pimcore/modules/document/hooks/use-sites'
 import { type Site } from '@Pimcore/modules/document/document-api-slice-enhanced'
 
@@ -36,9 +36,6 @@ export const Table = ({ onSortingChange, sorting, redirectRows, setRedirectRows
   const { t } = useTranslation()
 
   const { updateRedirectById } = useRedirects()
-  const { data: typesData } = useBundleSeoRedirectListTypesQuery()
-  const { data: statusesData } = useBundleSeoRedirectListStatusesQuery()
-  const { data: prioritiesData } = useBundleSeoRedirectListPrioritiesQuery()
   const { getAllSites } = useSites()
 
   const [modifiedCells, setModifiedCells] = useState<ModifiedCells>([])
@@ -49,36 +46,15 @@ export const Table = ({ onSortingChange, sorting, redirectRows, setRedirectRows
     label: t(site.domain)
   }))
 
-  const typeOptions = useMemo(() =>
-    typesData?.types?.map(type => ({ label: t(type), value: type })) ?? [],
-  [typesData]
-  )
-
-  const statusOptions = useMemo(() =>
-    statusesData?.statuses?.map(status => ({
-      label: `${status.code} - ${status.label}`,
-      value: status.code
-    })) ?? [],
-  [statusesData]
-  )
-
-  const priorityOptions = useMemo(() =>
-    prioritiesData?.priorities?.map(priority => ({
-      label: priority.toString(),
-      value: priority
-    })) ?? [],
-  [prioritiesData]
-  )
-
   const columnHelper = createColumnHelper<RedirectWithActions>()
 
-  const tableColumns = [
+  const tableColumns = useMemo(() => [
     columnHelper.accessor('type', {
       header: t('redirects.type'),
       meta: {
         type: 'select',
         editable: true,
-        config: { options: typeOptions }
+        config: { useOptionsHook: () => useRedirectTypeOptions() }
       },
       size: 120
     }),
@@ -115,7 +91,7 @@ export const Table = ({ onSortingChange, sorting, redirectRows, setRedirectRows
       meta: {
         type: 'select',
         editable: true,
-        config: { options: statusOptions }
+        config: { useOptionsHook: () => useRedirectStatusOptions() }
       },
       size: 100
     }),
@@ -124,7 +100,7 @@ export const Table = ({ onSortingChange, sorting, redirectRows, setRedirectRows
       meta: {
         type: 'select',
         editable: true,
-        config: { options: priorityOptions }
+        config: { useOptionsHook: () => useRedirectPriorityOptions() }
       },
       size: 80
     }),
@@ -159,7 +135,7 @@ export const Table = ({ onSortingChange, sorting, redirectRows, setRedirectRows
         />
       )
     })
-  ]
+  ], [siteOptions, t])
 
   const onUpdateCellData = async ({
     columnId,