Show pipeline ID (#479)

* Add ID column to pipeline table

* Add ID field to pipeline details

* Update pipeline sort order

* Tweak dialog trigger apperance

* Make id a sortable field

Author: annavik

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

@@ -5,6 +5,12 @@ import { PipelineDetailsDialog } from 'pages/pipeline-details/pipeline-details-d
 import { STRING, translate } from 'utils/language'
 
 export const columns: (projectId: string) => TableColumn<Pipeline>[] = () => [
+  {
+    id: 'id',
+    sortField: 'id',
+    name: translate(STRING.FIELD_LABEL_ID),
+    renderCell: (item: Pipeline) => <BasicTableCell value={item.id} />,
+  },
   {
     id: 'name',
     name: translate(STRING.FIELD_LABEL_NAME),

ui/src/pages/overview/pipelines/pipelines.tsx

@@ -13,8 +13,8 @@ import { columns } from './pipelines-columns'
 export const Pipelines = () => {
   const { projectId } = useParams()
   const [sort, setSort] = useState<TableSortSettings | undefined>({
-    field: 'created_at',
-    order: 'desc',
+    field: 'id',
+    order: 'asc',
   })
   const { pagination, setPage } = usePagination()
   const { pipelines, total, isLoading, isFetching, error } = usePipelines({

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

@@ -64,20 +64,25 @@ const PipelineDetailsContent = ({
           <FormSection title={translate(STRING.SUMMARY)}>
             <FormRow>
               <InputValue
-                label={translate(STRING.FIELD_LABEL_NAME)}
-                value={pipeline.name}
+                label={translate(STRING.FIELD_LABEL_ID)}
+                value={pipeline.id}
               />
               <InputValue
-                label={translate(STRING.FIELD_LABEL_DESCRIPTION)}
-                value={pipeline.description}
+                label={translate(STRING.FIELD_LABEL_VERSION)}
+                value={pipeline.versionLabel}
               />
             </FormRow>
             <FormRow>
               <InputValue
-                label={translate(STRING.FIELD_LABEL_VERSION)}
-                value={pipeline.versionLabel}
+                label={translate(STRING.FIELD_LABEL_NAME)}
+                value={pipeline.name}
+              />
+              <InputValue
+                label={translate(STRING.FIELD_LABEL_DESCRIPTION)}
+                value={pipeline.description}
               />
             </FormRow>
+
             <FormRow>
               <InputValue
                 label={translate(STRING.FIELD_LABEL_CREATED_AT)}

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

@@ -10,6 +10,7 @@
 .dialogTrigger {
   @include paragraph-medium();
   color: $color-primary-1-600;
+  font-weight: 600;
 
   &:hover {
     cursor: pointer;