From 7649ca944056d4fcd25a5e44810a04da7b895cb9 Mon Sep 17 00:00:00 2001
From: Dimitri POSTOLOV <en3m@ya.ru>
Date: Sat, 15 Jun 2024 10:09:01 +0200
Subject: [PATCH] [laboratory] collections select should contain description
 (#4977)

---
 .../laboratory/create-collection-modal.tsx    |  1 -
 .../laboratory/create-operation-modal.tsx     | 31 ++++++++++++-------
 .../web/app/src/pages/target-laboratory.tsx   |  1 +
 3 files changed, 20 insertions(+), 13 deletions(-)

diff --git a/packages/web/app/src/components/target/laboratory/create-collection-modal.tsx b/packages/web/app/src/components/target/laboratory/create-collection-modal.tsx
index a6d37d5f4..303497e29 100644
--- a/packages/web/app/src/components/target/laboratory/create-collection-modal.tsx
+++ b/packages/web/app/src/components/target/laboratory/create-collection-modal.tsx
@@ -174,7 +174,6 @@ export function CreateCollectionModal(props: {
             },
             input: {
               collectionId,
-
               name: values.name,
               description: values.description,
             },
diff --git a/packages/web/app/src/components/target/laboratory/create-operation-modal.tsx b/packages/web/app/src/components/target/laboratory/create-operation-modal.tsx
index a28635953..1f8049584 100644
--- a/packages/web/app/src/components/target/laboratory/create-operation-modal.tsx
+++ b/packages/web/app/src/components/target/laboratory/create-operation-modal.tsx
@@ -4,7 +4,8 @@ import { useMutation } from 'urql';
 import * as Yup from 'yup';
 import { Button } from '@/components/ui/button';
 import { Heading } from '@/components/ui/heading';
-import { Input, Modal, Select } from '@/components/v2';
+import { Select, SelectContent, SelectItem, SelectTrigger } from '@/components/ui/select';
+import { Input, Modal } from '@/components/v2';
 import { graphql } from '@/gql';
 import { useCollections } from '@/pages/target-laboratory';
 import { useEditorContext } from '@graphiql/react';
@@ -80,6 +81,7 @@ export function CreateOperationModal(props: {
     touched,
     isSubmitting,
     resetForm,
+    setFieldValue,
   } = useFormik({
     initialValues: {
       name: '',
@@ -144,18 +146,23 @@ export function CreateOperationModal(props: {
               Which collection would you like to save this operation to?
             </label>
             <Select
-              name="collectionId"
-              placeholder="Select collection"
-              options={collections?.map(c => ({
-                value: c.id,
-                name: c.name,
-              }))}
               value={values.collectionId}
-              onChange={handleChange}
-              onBlur={handleBlur}
-              isInvalid={!!(touched.collectionId && errors.collectionId)}
-              data-cy="select.collectionId"
-            />
+              onValueChange={async v => {
+                await setFieldValue('collectionId', v);
+              }}
+            >
+              <SelectTrigger>
+                {collections.find(c => c.id === values.collectionId)?.name || 'Select collection'}
+              </SelectTrigger>
+              <SelectContent className="w-[--radix-select-trigger-width]">
+                {collections.map(c => (
+                  <SelectItem key={c.id} value={c.id}>
+                    {c.name}
+                    <div className="mt-1 line-clamp-1 text-xs opacity-50">{c.description}</div>
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
             {touched.collectionId && errors.collectionId && (
               <div className="text-sm text-red-500">{errors.collectionId}</div>
             )}
diff --git a/packages/web/app/src/pages/target-laboratory.tsx b/packages/web/app/src/pages/target-laboratory.tsx
index b2b7a2c44..3b196daff 100644
--- a/packages/web/app/src/pages/target-laboratory.tsx
+++ b/packages/web/app/src/pages/target-laboratory.tsx
@@ -302,6 +302,7 @@ export const CollectionsQuery = graphql(`
           node {
             id
             name
+            description
             operations(first: 100) {
               edges {
                 node {