Add backend details dialog

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

@@ -0,0 +1,32 @@
+import { API_ROUTES, API_URL } from 'data-services/constants'
+import { Backend, ServerBackend } from 'data-services/models/backend'
+import { useMemo } from 'react'
+import { useAuthorizedQuery } from '../auth/useAuthorizedQuery'
+
+const convertServerRecord = (record: ServerBackend) => new Backend(record)
+
+export const useBackendDetails = (
+  backendId: string
+): {
+  backend?: Backend
+  isLoading: boolean
+  isFetching: boolean
+  error?: unknown
+} => {
+  const { data, isLoading, isFetching, error } = useAuthorizedQuery<Backend>({
+    queryKey: [API_ROUTES.BACKENDS, backendId],
+    url: `${API_URL}/${API_ROUTES.BACKENDS}/${backendId}/`,
+  })
+
+  const backend = useMemo(
+    () => (data ? convertServerRecord(data) : undefined),
+    [data]
+  )
+
+  return {
+    backend,
+    isLoading,
+    isFetching,
+    error,
+  }
+}

ui/src/pages/backend-details/backend-details-dialog.tsx

@@ -0,0 +1,111 @@
+import { FormRow, FormSection } from 'components/form/layout/layout'
+import { useBackendDetails } from 'data-services/hooks/backends/useBackendDetails'
+import * as Dialog from 'design-system/components/dialog/dialog'
+import { InputValue } from 'design-system/components/input/input'
+import _ from 'lodash'
+import { Error } from 'pages/error/error'
+import { useEffect, useState } from 'react'
+import { STRING, translate } from 'utils/language'
+import { BackendPipelines } from './backend-pipelines'
+import styles from './styles.module.scss'
+
+export const BackendDetailsDialog = ({
+  id,
+  name,
+}: {
+  id: string
+  name: string
+}) => {
+  const [isOpen, setIsOpen] = useState(false)
+  const [isLoading, setIsLoading] = useState(true)
+
+  return (
+    <Dialog.Root open={isOpen} onOpenChange={setIsOpen}>
+      <Dialog.Trigger>
+        <button className={styles.dialogTrigger}>
+          <span>{name}</span>
+        </button>
+      </Dialog.Trigger>
+      <Dialog.Content
+        ariaCloselabel={translate(STRING.CLOSE)}
+        isLoading={isLoading}
+      >
+        <Dialog.Header
+          title={translate(STRING.ENTITY_DETAILS, {
+            type: _.capitalize(translate(STRING.ENTITY_TYPE_BACKEND)),
+          })}
+        />
+        <div className={styles.content}>
+          <BackendDetailsContent id={id} onLoadingChange={setIsLoading} />
+        </div>
+      </Dialog.Content>
+    </Dialog.Root>
+  )
+}
+
+const BackendDetailsContent = ({
+  id,
+  onLoadingChange,
+}: {
+  id: string
+  onLoadingChange: (isLoading: boolean) => void
+}) => {
+  const { backend, isLoading, error } = useBackendDetails(id)
+
+  useEffect(() => {
+    onLoadingChange(isLoading)
+  }, [isLoading])
+
+  return (
+    <>
+      {backend ? (
+        <>
+          <FormSection title={translate(STRING.SUMMARY)}>
+            <FormRow>
+              <InputValue
+                label={translate(STRING.FIELD_LABEL_ID)}
+                value={backend.id}
+              />
+              <InputValue
+                label={translate(STRING.FIELD_LABEL_VERSION)}
+                value={backend.versionLabel}
+              />
+            </FormRow>
+            <FormRow>
+              <InputValue
+                label={translate(STRING.FIELD_LABEL_NAME)}
+                value={backend.name}
+              />
+              <InputValue
+                label={translate(STRING.FIELD_LABEL_DESCRIPTION)}
+                value={backend.description}
+              />
+            </FormRow>
+
+            <FormRow>
+              <InputValue
+                label={translate(STRING.FIELD_LABEL_CREATED_AT)}
+                value={backend.createdAt}
+              />
+              <InputValue
+                label={translate(STRING.FIELD_LABEL_UPDATED_AT)}
+                value={backend.updatedAt}
+              />
+            </FormRow>
+          </FormSection>
+          {backend.pipelines.length > 0 && (
+            <FormSection title={translate(STRING.PIPELINES)}>
+              <div className={styles.tableContainer}>
+                <BackendPipelines backend={backend} />
+              </div>
+            </FormSection>
+          )}
+        </>
+      ) : error ? (
+        <div className={styles.errorContent}>
+          <Error error={error} />
+        </div>
+      ) : null}
+    </>
+  )
+}

ui/src/pages/backend-details/backend-pipelines.tsx

@@ -0,0 +1,50 @@
+import { Pipeline } from 'data-services/models/pipeline'
+import { Backend } from 'data-services/models/backend'
+import { BasicTableCell } from 'design-system/components/table/basic-table-cell/basic-table-cell'
+import {
+  Table,
+  TableBackgroundTheme,
+} from 'design-system/components/table/table/table'
+import { TableColumn } from 'design-system/components/table/types'
+import { STRING, translate } from 'utils/language'
+
+export const columns: TableColumn<Pipeline>[] = [
+  {
+    id: 'name',
+    name: translate(STRING.FIELD_LABEL_NAME),
+    renderCell: (item: Pipeline) => (
+      <BasicTableCell
+        value={item.name}
+        style={{ width: '240px', whiteSpace: 'normal' }}
+      />
+    ),
+  },
+  {
+    id: 'description',
+    name: translate(STRING.FIELD_LABEL_DESCRIPTION),
+    renderCell: (item: Pipeline) => (
+      <BasicTableCell
+        value={item.description}
+        style={{ width: '240px', whiteSpace: 'normal' }}
+      />
+    ),
+  },
+  {
+    id: 'created-at',
+    name: translate(STRING.FIELD_LABEL_CREATED_AT),
+    renderCell: (item: Pipeline) => <BasicTableCell value={item.createdAt} />,
+  },
+  {
+    id: 'updated-at',
+    name: translate(STRING.FIELD_LABEL_UPDATED_AT),
+    renderCell: (item: Pipeline) => <BasicTableCell value={item.updatedAt} />,
+  },
+]
+
+export const BackendPipelines = ({ backend }: { backend: Backend }) => (
+  <Table
+    backgroundTheme={TableBackgroundTheme.White}
+    items={backend.pipelines}
+    columns={columns}
+  />
+)

ui/src/pages/backend-details/styles.module.scss

@@ -0,0 +1,32 @@
+@import 'src/design-system/variables/colors.scss';
+@import 'src/design-system/variables/typography.scss';
+
+.content {
+  width: 720px;
+  max-width: 100%;
+  box-sizing: border-box;
+}
+
+.dialogTrigger {
+  @include paragraph-medium();
+  color: $color-primary-1-600;
+  font-weight: 600;
+
+  &:hover {
+    cursor: pointer;
+    opacity: 0.7;
+  }
+
+  &:focus-visible {
+    box-shadow: 0 0 0 2px $color-generic-black;
+  }
+}
+
+.tableContainer {
+  max-width: 100%;
+  overflow: hidden;
+}
+
+.errorContent {
+  padding: 32px;
+}

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

@@ -7,6 +7,7 @@ import { UpdateEntityDialog } from 'pages/overview/entities/entity-details-dialo
 import styles from 'pages/overview/entities/styles.module.scss'
 import { STRING, translate } from 'utils/language'
 import { PopulateBackend } from './backends-actions'
+import { BackendDetailsDialog } from 'pages/backend-details/backend-details-dialog'
 
 export const columns: (projectId: string) => TableColumn<Backend>[] = () => [
   {
@@ -19,7 +20,11 @@ export const columns: (projectId: string) => TableColumn<Backend>[] = () => [
     id: 'endpoint',
     name: translate(STRING.FIELD_LABEL_ENDPOINT),
     sortField: 'endpoint',
-    renderCell: (item: Backend) => <BasicTableCell value={item.endpointUrl} />,
+    renderCell: (item: Backend) => (
+      <BasicTableCell>
+        <BackendDetailsDialog id={item.id} name={item.endpointUrl} />
+      </BasicTableCell>
+    ),
   },
   {
     id: 'created-at',

ui/src/utils/language.ts

@@ -45,6 +45,7 @@ export enum STRING {
   ENTITY_DELETE,
   ENTITY_DETAILS,
   ENTITY_EDIT,
+  ENTITY_TYPE_BACKEND,
   ENTITY_TYPE_CAPTURE,
   ENTITY_TYPE_DEPLOYMENT,
   ENTITY_TYPE_IDENTIFICATION,
@@ -219,6 +220,7 @@ export enum STRING {
   NEW_ID,
   NOT_CONNECTED,
   OR,
+  PIPELINES,
   RECENT,
   REJECT_ID,
   REJECT_ID_SHORT,
@@ -358,6 +360,7 @@ const ENGLISH_STRINGS: { [key in STRING]: string } = {
   [STRING.ENTITY_DELETE]: 'Delete {{type}}',
   [STRING.ENTITY_DETAILS]: '{{type}} details',
   [STRING.ENTITY_EDIT]: 'Edit {{type}}',
+  [STRING.ENTITY_TYPE_BACKEND]: 'backend',
   [STRING.ENTITY_TYPE_CAPTURE]: 'capture',
   [STRING.ENTITY_TYPE_DEPLOYMENT]: 'station',
   [STRING.ENTITY_TYPE_IDENTIFICATION]: 'identification',
@@ -483,6 +486,7 @@ const ENGLISH_STRINGS: { [key in STRING]: string } = {
   [STRING.NEW_ID]: 'New ID',
   [STRING.NOT_CONNECTED]: 'Not connected',
   [STRING.OR]: 'Or',
+  [STRING.PIPELINES]: 'Pipelines',
   [STRING.RECENT]: 'Recent',
   [STRING.REJECT_ID]: 'Reject ID',
   [STRING.REJECT_ID_SHORT]: 'Reject',