Register pipelines via frontend

ui/src/data-services/hooks/backends/usePopulateBackend.ts

@@ -0,0 +1,26 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query'
+import axios from 'axios'
+import { API_ROUTES, API_URL } from 'data-services/constants'
+import { getAuthHeader } from 'data-services/utils'
+import { useUser } from 'utils/user/userContext'
+
+export const usePopulateBackend = () => {
+  const { user } = useUser()
+  const queryClient = useQueryClient()
+
+  const { mutateAsync, isLoading, isSuccess, error } = useMutation({
+    mutationFn: (id: string) =>
+      axios.post<{ id: number }>(
+        `${API_URL}/${API_ROUTES.BACKENDS}/${id}/register_pipelines/`,
+        undefined,
+        {
+          headers: getAuthHeader(user),
+        }
+      ),
+    onSuccess: () => {
+      queryClient.invalidateQueries([API_ROUTES.BACKENDS])
+    },
+  })
+
+  return { populateBackend: mutateAsync, isLoading, isSuccess, error }
+}

ui/src/pages/overview/backends/backends-actions.tsx

@@ -0,0 +1,30 @@
+import { usePopulateBackend } from 'data-services/hooks/backends/usePopulateBackend'
+import { Backend } from 'data-services/models/backend'
+import { Button, ButtonTheme } from 'design-system/components/button/button'
+import { useState } from 'react'
+import { STRING, translate } from 'utils/language'
+
+export const PopulateBackend = ({
+  backend,
+}: {
+  backend: Backend
+}) => {
+  const [timestamp, setTimestamp] = useState<string>()
+  const { populateBackend, isLoading } = usePopulateBackend()
+
+  // TODO: It would be better to inspect task status here, but we currently don't have this information.
+  const isPopulating = isLoading || timestamp === backend.updatedAtDetailed
+
+  return (
+    <Button
+      label={translate(STRING.SYNC)}
+      loading={isPopulating}
+      disabled={isPopulating}
+      theme={ButtonTheme.Success}
+      onClick={() => {
+        populateBackend(backend.id)
+        setTimestamp(backend.updatedAtDetailed)
+      }}
+    />
+  )
+}

ui/src/pages/overview/backends/backends-columns.tsx

@@ -6,6 +6,7 @@ import { DeleteEntityDialog } from 'pages/overview/entities/delete-entity-dialog
 import { UpdateEntityDialog } from 'pages/overview/entities/entity-details-dialog'
 import styles from 'pages/overview/entities/styles.module.scss'
 import { STRING, translate } from 'utils/language'
+import { PopulateBackend } from './backends-actions'
 
 export const columns: (projectId: string) => TableColumn<Backend>[] = () => [
   {
@@ -38,6 +39,19 @@ export const columns: (projectId: string) => TableColumn<Backend>[] = () => [
     sortField: 'last_checked',
     renderCell: (item: Backend) => <BasicTableCell value={item.lastChecked} />,
   },
+  {
+    id: 'backend-actions',
+    name: '',
+    styles: {
+      padding: '16px',
+      width: '100%',
+    },
+    renderCell: (item: Backend) => (
+      <div className={styles.entityActions}>
+        <PopulateBackend backend={item} />
+      </div>
+    ),
+  },
   {
     id: 'actions',
     name: '',