Finished relation picker for companies (#305)

* Finished relation picker for companies

* Minor fixes

front/src/apollo.tsx

@@ -9,6 +9,7 @@ import { setContext } from '@apollo/client/link/context';
 import { onError } from '@apollo/client/link/error';
 import { RestLink } from 'apollo-link-rest';
 
+import { CommentThreadTarget } from './generated/graphql';
 import { refreshAccessToken } from './modules/auth/services/AuthService';
 
 const apiLink = createHttpLink({
@@ -65,7 +66,27 @@ const errorLink = onError(({ graphQLErrors, operation, forward }) => {
 
 export const apiClient = new ApolloClient({
   link: from([errorLink, withAuthHeadersLink, apiLink]),
-  cache: new InMemoryCache(),
+  cache: new InMemoryCache({
+    typePolicies: {
+      CommentThread: {
+        fields: {
+          commentThreadTargets: {
+            merge(
+              existing: CommentThreadTarget[] = [],
+              incoming: CommentThreadTarget[],
+            ) {
+              return [...incoming];
+            },
+          },
+        },
+      },
+    },
+  }),
+  defaultOptions: {
+    query: {
+      fetchPolicy: 'cache-first',
+    },
+  },
 });
 
 const authLink = new RestLink({

front/src/generated/graphql.tsx

@@ -22,6 +22,10 @@ export type AffectedRows = {
   count: Scalars['Int'];
 };
 
+export type BoolFieldUpdateOperationsInput = {
+  set?: InputMaybe<Scalars['Boolean']>;
+};
+
 export type BoolFilter = {
   equals?: InputMaybe<Scalars['Boolean']>;
   not?: InputMaybe<NestedBoolFilter>;
@@ -68,6 +72,20 @@ export type CommentCreateNestedManyWithoutCommentThreadInput = {
   createMany?: InputMaybe<CommentCreateManyCommentThreadInputEnvelope>;
 };
 
+export type CommentCreateOrConnectWithoutCommentThreadInput = {
+  create: CommentCreateWithoutCommentThreadInput;
+  where: CommentWhereUniqueInput;
+};
+
+export type CommentCreateWithoutCommentThreadInput = {
+  author: UserCreateNestedOneWithoutCommentsInput;
+  body: Scalars['String'];
+  createdAt?: InputMaybe<Scalars['DateTime']>;
+  deletedAt?: InputMaybe<Scalars['DateTime']>;
+  id: Scalars['String'];
+  updatedAt?: InputMaybe<Scalars['DateTime']>;
+};
+
 export type CommentListRelationFilter = {
   every?: InputMaybe<CommentWhereInput>;
   none?: InputMaybe<CommentWhereInput>;
@@ -78,6 +96,19 @@ export type CommentOrderByRelationAggregateInput = {
   _count?: InputMaybe<SortOrder>;
 };
 
+export type CommentScalarWhereInput = {
+  AND?: InputMaybe<Array<CommentScalarWhereInput>>;
+  NOT?: InputMaybe<Array<CommentScalarWhereInput>>;
+  OR?: InputMaybe<Array<CommentScalarWhereInput>>;
+  authorId?: InputMaybe<StringFilter>;
+  body?: InputMaybe<StringFilter>;
+  commentThreadId?: InputMaybe<StringFilter>;
+  createdAt?: InputMaybe<DateTimeFilter>;
+  deletedAt?: InputMaybe<DateTimeNullableFilter>;
+  id?: InputMaybe<StringFilter>;
+  updatedAt?: InputMaybe<DateTimeFilter>;
+};
+
 export type CommentThread = {
   __typename?: 'CommentThread';
   commentThreadTargets?: Maybe<Array<CommentThreadTarget>>;
@@ -153,6 +184,20 @@ export type CommentThreadTargetCreateNestedManyWithoutCommentThreadInput = {
   createMany?: InputMaybe<CommentThreadTargetCreateManyCommentThreadInputEnvelope>;
 };
 
+export type CommentThreadTargetCreateOrConnectWithoutCommentThreadInput = {
+  create: CommentThreadTargetCreateWithoutCommentThreadInput;
+  where: CommentThreadTargetWhereUniqueInput;
+};
+
+export type CommentThreadTargetCreateWithoutCommentThreadInput = {
+  commentableId: Scalars['String'];
+  commentableType: CommentableType;
+  createdAt?: InputMaybe<Scalars['DateTime']>;
+  deletedAt?: InputMaybe<Scalars['DateTime']>;
+  id: Scalars['String'];
+  updatedAt?: InputMaybe<Scalars['DateTime']>;
+};
+
 export type CommentThreadTargetListRelationFilter = {
   every?: InputMaybe<CommentThreadTargetWhereInput>;
   none?: InputMaybe<CommentThreadTargetWhereInput>;
@@ -163,6 +208,67 @@ export type CommentThreadTargetOrderByRelationAggregateInput = {
   _count?: InputMaybe<SortOrder>;
 };
 
+export type CommentThreadTargetScalarWhereInput = {
+  AND?: InputMaybe<Array<CommentThreadTargetScalarWhereInput>>;
+  NOT?: InputMaybe<Array<CommentThreadTargetScalarWhereInput>>;
+  OR?: InputMaybe<Array<CommentThreadTargetScalarWhereInput>>;
+  commentThreadId?: InputMaybe<StringFilter>;
+  commentableId?: InputMaybe<StringFilter>;
+  commentableType?: InputMaybe<EnumCommentableTypeFilter>;
+  createdAt?: InputMaybe<DateTimeFilter>;
+  deletedAt?: InputMaybe<DateTimeNullableFilter>;
+  id?: InputMaybe<StringFilter>;
+  updatedAt?: InputMaybe<DateTimeFilter>;
+};
+
+export type CommentThreadTargetUpdateManyMutationInput = {
+  commentableId?: InputMaybe<StringFieldUpdateOperationsInput>;
+  commentableType?: InputMaybe<EnumCommentableTypeFieldUpdateOperationsInput>;
+  createdAt?: InputMaybe<DateTimeFieldUpdateOperationsInput>;
+  deletedAt?: InputMaybe<NullableDateTimeFieldUpdateOperationsInput>;
+  id?: InputMaybe<StringFieldUpdateOperationsInput>;
+  updatedAt?: InputMaybe<DateTimeFieldUpdateOperationsInput>;
+};
+
+export type CommentThreadTargetUpdateManyWithWhereWithoutCommentThreadInput = {
+  data: CommentThreadTargetUpdateManyMutationInput;
+  where: CommentThreadTargetScalarWhereInput;
+};
+
+export type CommentThreadTargetUpdateManyWithoutCommentThreadNestedInput = {
+  connect?: InputMaybe<Array<CommentThreadTargetWhereUniqueInput>>;
+  connectOrCreate?: InputMaybe<Array<CommentThreadTargetCreateOrConnectWithoutCommentThreadInput>>;
+  create?: InputMaybe<Array<CommentThreadTargetCreateWithoutCommentThreadInput>>;
+  createMany?: InputMaybe<CommentThreadTargetCreateManyCommentThreadInputEnvelope>;
+  delete?: InputMaybe<Array<CommentThreadTargetWhereUniqueInput>>;
+  deleteMany?: InputMaybe<Array<CommentThreadTargetScalarWhereInput>>;
+  disconnect?: InputMaybe<Array<CommentThreadTargetWhereUniqueInput>>;
+  set?: InputMaybe<Array<CommentThreadTargetWhereUniqueInput>>;
+  update?: InputMaybe<Array<CommentThreadTargetUpdateWithWhereUniqueWithoutCommentThreadInput>>;
+  updateMany?: InputMaybe<Array<CommentThreadTargetUpdateManyWithWhereWithoutCommentThreadInput>>;
+  upsert?: InputMaybe<Array<CommentThreadTargetUpsertWithWhereUniqueWithoutCommentThreadInput>>;
+};
+
+export type CommentThreadTargetUpdateWithWhereUniqueWithoutCommentThreadInput = {
+  data: CommentThreadTargetUpdateWithoutCommentThreadInput;
+  where: CommentThreadTargetWhereUniqueInput;
+};
+
+export type CommentThreadTargetUpdateWithoutCommentThreadInput = {
+  commentableId?: InputMaybe<StringFieldUpdateOperationsInput>;
+  commentableType?: InputMaybe<EnumCommentableTypeFieldUpdateOperationsInput>;
+  createdAt?: InputMaybe<DateTimeFieldUpdateOperationsInput>;
+  deletedAt?: InputMaybe<NullableDateTimeFieldUpdateOperationsInput>;
+  id?: InputMaybe<StringFieldUpdateOperationsInput>;
+  updatedAt?: InputMaybe<DateTimeFieldUpdateOperationsInput>;
+};
+
+export type CommentThreadTargetUpsertWithWhereUniqueWithoutCommentThreadInput = {
+  create: CommentThreadTargetCreateWithoutCommentThreadInput;
+  update: CommentThreadTargetUpdateWithoutCommentThreadInput;
+  where: CommentThreadTargetWhereUniqueInput;
+};
+
 export type CommentThreadTargetWhereInput = {
   AND?: InputMaybe<Array<CommentThreadTargetWhereInput>>;
   NOT?: InputMaybe<Array<CommentThreadTargetWhereInput>>;
@@ -177,6 +283,19 @@ export type CommentThreadTargetWhereInput = {
   updatedAt?: InputMaybe<DateTimeFilter>;
 };
 
+export type CommentThreadTargetWhereUniqueInput = {
+  id?: InputMaybe<Scalars['String']>;
+};
+
+export type CommentThreadUpdateInput = {
+  commentThreadTargets?: InputMaybe<CommentThreadTargetUpdateManyWithoutCommentThreadNestedInput>;
+  comments?: InputMaybe<CommentUpdateManyWithoutCommentThreadNestedInput>;
+  createdAt?: InputMaybe<DateTimeFieldUpdateOperationsInput>;
+  deletedAt?: InputMaybe<NullableDateTimeFieldUpdateOperationsInput>;
+  id?: InputMaybe<StringFieldUpdateOperationsInput>;
+  updatedAt?: InputMaybe<DateTimeFieldUpdateOperationsInput>;
+};
+
 export type CommentThreadWhereInput = {
   AND?: InputMaybe<Array<CommentThreadWhereInput>>;
   NOT?: InputMaybe<Array<CommentThreadWhereInput>>;
@@ -193,6 +312,53 @@ export type CommentThreadWhereUniqueInput = {
   id?: InputMaybe<Scalars['String']>;
 };
 
+export type CommentUpdateManyMutationInput = {
+  body?: InputMaybe<StringFieldUpdateOperationsInput>;
+  createdAt?: InputMaybe<DateTimeFieldUpdateOperationsInput>;
+  deletedAt?: InputMaybe<NullableDateTimeFieldUpdateOperationsInput>;
+  id?: InputMaybe<StringFieldUpdateOperationsInput>;
+  updatedAt?: InputMaybe<DateTimeFieldUpdateOperationsInput>;
+};
+
+export type CommentUpdateManyWithWhereWithoutCommentThreadInput = {
+  data: CommentUpdateManyMutationInput;
+  where: CommentScalarWhereInput;
+};
+
+export type CommentUpdateManyWithoutCommentThreadNestedInput = {
+  connect?: InputMaybe<Array<CommentWhereUniqueInput>>;
+  connectOrCreate?: InputMaybe<Array<CommentCreateOrConnectWithoutCommentThreadInput>>;
+  create?: InputMaybe<Array<CommentCreateWithoutCommentThreadInput>>;
+  createMany?: InputMaybe<CommentCreateManyCommentThreadInputEnvelope>;
+  delete?: InputMaybe<Array<CommentWhereUniqueInput>>;
+  deleteMany?: InputMaybe<Array<CommentScalarWhereInput>>;
+  disconnect?: InputMaybe<Array<CommentWhereUniqueInput>>;
+  set?: InputMaybe<Array<CommentWhereUniqueInput>>;
+  update?: InputMaybe<Array<CommentUpdateWithWhereUniqueWithoutCommentThreadInput>>;
+  updateMany?: InputMaybe<Array<CommentUpdateManyWithWhereWithoutCommentThreadInput>>;
+  upsert?: InputMaybe<Array<CommentUpsertWithWhereUniqueWithoutCommentThreadInput>>;
+};
+
+export type CommentUpdateWithWhereUniqueWithoutCommentThreadInput = {
+  data: CommentUpdateWithoutCommentThreadInput;
+  where: CommentWhereUniqueInput;
+};
+
+export type CommentUpdateWithoutCommentThreadInput = {
+  author?: InputMaybe<UserUpdateOneRequiredWithoutCommentsNestedInput>;
+  body?: InputMaybe<StringFieldUpdateOperationsInput>;
+  createdAt?: InputMaybe<DateTimeFieldUpdateOperationsInput>;
+  deletedAt?: InputMaybe<NullableDateTimeFieldUpdateOperationsInput>;
+  id?: InputMaybe<StringFieldUpdateOperationsInput>;
+  updatedAt?: InputMaybe<DateTimeFieldUpdateOperationsInput>;
+};
+
+export type CommentUpsertWithWhereUniqueWithoutCommentThreadInput = {
+  create: CommentCreateWithoutCommentThreadInput;
+  update: CommentUpdateWithoutCommentThreadInput;
+  where: CommentWhereUniqueInput;
+};
+
 export type CommentWhereInput = {
   AND?: InputMaybe<Array<CommentWhereInput>>;
   NOT?: InputMaybe<Array<CommentWhereInput>>;
@@ -208,6 +374,10 @@ export type CommentWhereInput = {
   updatedAt?: InputMaybe<DateTimeFilter>;
 };
 
+export type CommentWhereUniqueInput = {
+  id?: InputMaybe<Scalars['String']>;
+};
+
 export enum CommentableType {
   Company = 'Company',
   Person = 'Person'
@@ -244,10 +414,50 @@ export type CompanyCreateInput = {
   updatedAt?: InputMaybe<Scalars['DateTime']>;
 };
 
+export type CompanyCreateManyAccountOwnerInput = {
+  address: Scalars['String'];
+  createdAt?: InputMaybe<Scalars['DateTime']>;
+  deletedAt?: InputMaybe<Scalars['DateTime']>;
+  domainName: Scalars['String'];
+  employees?: InputMaybe<Scalars['Int']>;
+  id: Scalars['String'];
+  name: Scalars['String'];
+  updatedAt?: InputMaybe<Scalars['DateTime']>;
+};
+
+export type CompanyCreateManyAccountOwnerInputEnvelope = {
+  data: Array<CompanyCreateManyAccountOwnerInput>;
+  skipDuplicates?: InputMaybe<Scalars['Boolean']>;
+};
+
+export type CompanyCreateNestedManyWithoutAccountOwnerInput = {
+  connect?: InputMaybe<Array<CompanyWhereUniqueInput>>;
+  connectOrCreate?: InputMaybe<Array<CompanyCreateOrConnectWithoutAccountOwnerInput>>;
+  create?: InputMaybe<Array<CompanyCreateWithoutAccountOwnerInput>>;
+  createMany?: InputMaybe<CompanyCreateManyAccountOwnerInputEnvelope>;
+};
+
 export type CompanyCreateNestedOneWithoutPeopleInput = {
   connect?: InputMaybe<CompanyWhereUniqueInput>;
 };
 
+export type CompanyCreateOrConnectWithoutAccountOwnerInput = {
+  create: CompanyCreateWithoutAccountOwnerInput;
+  where: CompanyWhereUniqueInput;
+};
+
+export type CompanyCreateWithoutAccountOwnerInput = {
+  address: Scalars['String'];
+  createdAt?: InputMaybe<Scalars['DateTime']>;
+  deletedAt?: InputMaybe<Scalars['DateTime']>;
+  domainName: Scalars['String'];
+  employees?: InputMaybe<Scalars['Int']>;
+  id: Scalars['String'];
+  name: Scalars['String'];
+  people?: InputMaybe<PersonCreateNestedManyWithoutCompanyInput>;
+  updatedAt?: InputMaybe<Scalars['DateTime']>;
+};
+
 export type CompanyListRelationFilter = {
   every?: InputMaybe<CompanyWhereInput>;
   none?: InputMaybe<CompanyWhereInput>;
@@ -290,6 +500,21 @@ export enum CompanyScalarFieldEnum {
   WorkspaceId = 'workspaceId'
 }
 
+export type CompanyScalarWhereInput = {
+  AND?: InputMaybe<Array<CompanyScalarWhereInput>>;
+  NOT?: InputMaybe<Array<CompanyScalarWhereInput>>;
+  OR?: InputMaybe<Array<CompanyScalarWhereInput>>;
+  accountOwnerId?: InputMaybe<StringNullableFilter>;
+  address?: InputMaybe<StringFilter>;
+  createdAt?: InputMaybe<DateTimeFilter>;
+  deletedAt?: InputMaybe<DateTimeNullableFilter>;
+  domainName?: InputMaybe<StringFilter>;
+  employees?: InputMaybe<IntNullableFilter>;
+  id?: InputMaybe<StringFilter>;
+  name?: InputMaybe<StringFilter>;
+  updatedAt?: InputMaybe<DateTimeFilter>;
+};
+
 export type CompanyUpdateInput = {
   accountOwner?: InputMaybe<UserUpdateOneWithoutCompaniesNestedInput>;
   address?: InputMaybe<StringFieldUpdateOperationsInput>;
@@ -303,10 +528,63 @@ export type CompanyUpdateInput = {
   updatedAt?: InputMaybe<DateTimeFieldUpdateOperationsInput>;
 };
 
+export type CompanyUpdateManyMutationInput = {
+  address?: InputMaybe<StringFieldUpdateOperationsInput>;
+  createdAt?: InputMaybe<DateTimeFieldUpdateOperationsInput>;
+  deletedAt?: InputMaybe<NullableDateTimeFieldUpdateOperationsInput>;
+  domainName?: InputMaybe<StringFieldUpdateOperationsInput>;
+  employees?: InputMaybe<NullableIntFieldUpdateOperationsInput>;
+  id?: InputMaybe<StringFieldUpdateOperationsInput>;
+  name?: InputMaybe<StringFieldUpdateOperationsInput>;
+  updatedAt?: InputMaybe<DateTimeFieldUpdateOperationsInput>;
+};
+
+export type CompanyUpdateManyWithWhereWithoutAccountOwnerInput = {
+  data: CompanyUpdateManyMutationInput;
+  where: CompanyScalarWhereInput;
+};
+
+export type CompanyUpdateManyWithoutAccountOwnerNestedInput = {
+  connect?: InputMaybe<Array<CompanyWhereUniqueInput>>;
+  connectOrCreate?: InputMaybe<Array<CompanyCreateOrConnectWithoutAccountOwnerInput>>;
+  create?: InputMaybe<Array<CompanyCreateWithoutAccountOwnerInput>>;
+  createMany?: InputMaybe<CompanyCreateManyAccountOwnerInputEnvelope>;
+  delete?: InputMaybe<Array<CompanyWhereUniqueInput>>;
+  deleteMany?: InputMaybe<Array<CompanyScalarWhereInput>>;
+  disconnect?: InputMaybe<Array<CompanyWhereUniqueInput>>;
+  set?: InputMaybe<Array<CompanyWhereUniqueInput>>;
+  update?: InputMaybe<Array<CompanyUpdateWithWhereUniqueWithoutAccountOwnerInput>>;
+  updateMany?: InputMaybe<Array<CompanyUpdateManyWithWhereWithoutAccountOwnerInput>>;
+  upsert?: InputMaybe<Array<CompanyUpsertWithWhereUniqueWithoutAccountOwnerInput>>;
+};
+
 export type CompanyUpdateOneWithoutPeopleNestedInput = {
   connect?: InputMaybe<CompanyWhereUniqueInput>;
 };
 
+export type CompanyUpdateWithWhereUniqueWithoutAccountOwnerInput = {
+  data: CompanyUpdateWithoutAccountOwnerInput;
+  where: CompanyWhereUniqueInput;
+};
+
+export type CompanyUpdateWithoutAccountOwnerInput = {
+  address?: InputMaybe<StringFieldUpdateOperationsInput>;
+  createdAt?: InputMaybe<DateTimeFieldUpdateOperationsInput>;
+  deletedAt?: InputMaybe<NullableDateTimeFieldUpdateOperationsInput>;
+  domainName?: InputMaybe<StringFieldUpdateOperationsInput>;
+  employees?: InputMaybe<NullableIntFieldUpdateOperationsInput>;
+  id?: InputMaybe<StringFieldUpdateOperationsInput>;
+  name?: InputMaybe<StringFieldUpdateOperationsInput>;
+  people?: InputMaybe<PersonUpdateManyWithoutCompanyNestedInput>;
+  updatedAt?: InputMaybe<DateTimeFieldUpdateOperationsInput>;
+};
+
+export type CompanyUpsertWithWhereUniqueWithoutAccountOwnerInput = {
+  create: CompanyCreateWithoutAccountOwnerInput;
+  update: CompanyUpdateWithoutAccountOwnerInput;
+  where: CompanyWhereUniqueInput;
+};
+
 export type CompanyWhereInput = {
   AND?: InputMaybe<Array<CompanyWhereInput>>;
   NOT?: InputMaybe<Array<CompanyWhereInput>>;
@@ -354,6 +632,10 @@ export type DateTimeNullableFilter = {
   notIn?: InputMaybe<Array<Scalars['DateTime']>>;
 };
 
+export type EnumCommentableTypeFieldUpdateOperationsInput = {
+  set?: InputMaybe<CommentableType>;
+};
+
 export type EnumCommentableTypeFilter = {
   equals?: InputMaybe<CommentableType>;
   in?: InputMaybe<Array<CommentableType>>;
@@ -409,6 +691,7 @@ export type Mutation = {
   deleteManyCompany: AffectedRows;
   deleteManyPerson: AffectedRows;
   deleteManyPipelineProgress: AffectedRows;
+  updateOneCommentThread: CommentThread;
   updateOneCompany?: Maybe<Company>;
   updateOnePerson?: Maybe<Person>;
   updateOnePipelineProgress?: Maybe<PipelineProgress>;
@@ -455,6 +738,12 @@ export type MutationDeleteManyPipelineProgressArgs = {
 };
 
 
+export type MutationUpdateOneCommentThreadArgs = {
+  data: CommentThreadUpdateInput;
+  where: CommentThreadWhereUniqueInput;
+};
+
+
 export type MutationUpdateOneCompanyArgs = {
   data: CompanyUpdateInput;
   where: CompanyWhereUniqueInput;
@@ -564,6 +853,10 @@ export type NullableIntFieldUpdateOperationsInput = {
   set?: InputMaybe<Scalars['Int']>;
 };
 
+export type NullableStringFieldUpdateOperationsInput = {
+  set?: InputMaybe<Scalars['String']>;
+};
+
 export type Person = {
   __typename?: 'Person';
   _commentCount: Scalars['Int'];
@@ -1081,6 +1374,29 @@ export type UserCreateNestedOneWithoutCompaniesInput = {
   connect?: InputMaybe<UserWhereUniqueInput>;
 };
 
+export type UserCreateOrConnectWithoutCommentsInput = {
+  create: UserCreateWithoutCommentsInput;
+  where: UserWhereUniqueInput;
+};
+
+export type UserCreateWithoutCommentsInput = {
+  avatarUrl?: InputMaybe<Scalars['String']>;
+  companies?: InputMaybe<CompanyCreateNestedManyWithoutAccountOwnerInput>;
+  createdAt?: InputMaybe<Scalars['DateTime']>;
+  deletedAt?: InputMaybe<Scalars['DateTime']>;
+  disabled?: InputMaybe<Scalars['Boolean']>;
+  displayName: Scalars['String'];
+  email: Scalars['String'];
+  emailVerified?: InputMaybe<Scalars['Boolean']>;
+  id: Scalars['String'];
+  lastSeen?: InputMaybe<Scalars['DateTime']>;
+  locale: Scalars['String'];
+  metadata?: InputMaybe<Scalars['JSON']>;
+  passwordHash?: InputMaybe<Scalars['String']>;
+  phoneNumber?: InputMaybe<Scalars['String']>;
+  updatedAt?: InputMaybe<Scalars['DateTime']>;
+};
+
 export type UserOrderByWithRelationInput = {
   avatarUrl?: InputMaybe<SortOrder>;
   comments?: InputMaybe<CommentOrderByRelationAggregateInput>;
@@ -1122,10 +1438,41 @@ export enum UserScalarFieldEnum {
   UpdatedAt = 'updatedAt'
 }
 
+export type UserUpdateOneRequiredWithoutCommentsNestedInput = {
+  connect?: InputMaybe<UserWhereUniqueInput>;
+  connectOrCreate?: InputMaybe<UserCreateOrConnectWithoutCommentsInput>;
+  create?: InputMaybe<UserCreateWithoutCommentsInput>;
+  update?: InputMaybe<UserUpdateWithoutCommentsInput>;
+  upsert?: InputMaybe<UserUpsertWithoutCommentsInput>;
+};
+
 export type UserUpdateOneWithoutCompaniesNestedInput = {
   connect?: InputMaybe<UserWhereUniqueInput>;
 };
 
+export type UserUpdateWithoutCommentsInput = {
+  avatarUrl?: InputMaybe<NullableStringFieldUpdateOperationsInput>;
+  companies?: InputMaybe<CompanyUpdateManyWithoutAccountOwnerNestedInput>;
+  createdAt?: InputMaybe<DateTimeFieldUpdateOperationsInput>;
+  deletedAt?: InputMaybe<NullableDateTimeFieldUpdateOperationsInput>;
+  disabled?: InputMaybe<BoolFieldUpdateOperationsInput>;
+  displayName?: InputMaybe<StringFieldUpdateOperationsInput>;
+  email?: InputMaybe<StringFieldUpdateOperationsInput>;
+  emailVerified?: InputMaybe<BoolFieldUpdateOperationsInput>;
+  id?: InputMaybe<StringFieldUpdateOperationsInput>;
+  lastSeen?: InputMaybe<NullableDateTimeFieldUpdateOperationsInput>;
+  locale?: InputMaybe<StringFieldUpdateOperationsInput>;
+  metadata?: InputMaybe<Scalars['JSON']>;
+  passwordHash?: InputMaybe<NullableStringFieldUpdateOperationsInput>;
+  phoneNumber?: InputMaybe<NullableStringFieldUpdateOperationsInput>;
+  updatedAt?: InputMaybe<DateTimeFieldUpdateOperationsInput>;
+};
+
+export type UserUpsertWithoutCommentsInput = {
+  create: UserCreateWithoutCommentsInput;
+  update: UserUpdateWithoutCommentsInput;
+};
+
 export type UserWhereInput = {
   AND?: InputMaybe<Array<UserWhereInput>>;
   NOT?: InputMaybe<Array<UserWhereInput>>;
@@ -1212,7 +1559,7 @@ export type GetCommentThreadsByTargetsQueryVariables = Exact<{
 }>;
 
 
-export type GetCommentThreadsByTargetsQuery = { __typename?: 'Query', findManyCommentThreads: Array<{ __typename?: 'CommentThread', id: string, comments?: Array<{ __typename?: 'Comment', id: string, body: string, createdAt: string, updatedAt: string, author: { __typename?: 'User', id: string, displayName: string, avatarUrl?: string | null } }> | null, commentThreadTargets?: Array<{ __typename?: 'CommentThreadTarget', commentableId: string, commentableType: CommentableType }> | null }> };
+export type GetCommentThreadsByTargetsQuery = { __typename?: 'Query', findManyCommentThreads: Array<{ __typename?: 'CommentThread', id: string, comments?: Array<{ __typename?: 'Comment', id: string, body: string, createdAt: string, updatedAt: string, author: { __typename?: 'User', id: string, displayName: string, avatarUrl?: string | null } }> | null, commentThreadTargets?: Array<{ __typename?: 'CommentThreadTarget', id: string, commentableId: string, commentableType: CommentableType }> | null }> };
 
 export type GetCommentThreadQueryVariables = Exact<{
   commentThreadId: Scalars['String'];
@@ -1221,6 +1568,25 @@ export type GetCommentThreadQueryVariables = Exact<{
 
 export type GetCommentThreadQuery = { __typename?: 'Query', findManyCommentThreads: Array<{ __typename?: 'CommentThread', id: string, comments?: Array<{ __typename?: 'Comment', id: string, body: string, createdAt: string, updatedAt: string, author: { __typename?: 'User', id: string, displayName: string, avatarUrl?: string | null } }> | null, commentThreadTargets?: Array<{ __typename?: 'CommentThreadTarget', commentableId: string, commentableType: CommentableType }> | null }> };
 
+export type AddCommentThreadTargetOnCommentThreadMutationVariables = Exact<{
+  commentThreadId: Scalars['String'];
+  commentThreadTargetCreationDate: Scalars['DateTime'];
+  commentThreadTargetId: Scalars['String'];
+  commentableEntityId: Scalars['String'];
+  commentableEntityType: CommentableType;
+}>;
+
+
+export type AddCommentThreadTargetOnCommentThreadMutation = { __typename?: 'Mutation', updateOneCommentThread: { __typename?: 'CommentThread', id: string, createdAt: string, updatedAt: string, commentThreadTargets?: Array<{ __typename?: 'CommentThreadTarget', id: string, createdAt: string, updatedAt: string, commentableType: CommentableType, commentableId: string }> | null } };
+
+export type RemoveCommentThreadTargetOnCommentThreadMutationVariables = Exact<{
+  commentThreadId: Scalars['String'];
+  commentThreadTargetId: Scalars['String'];
+}>;
+
+
+export type RemoveCommentThreadTargetOnCommentThreadMutation = { __typename?: 'Mutation', updateOneCommentThread: { __typename?: 'CommentThread', id: string, createdAt: string, updatedAt: string, commentThreadTargets?: Array<{ __typename?: 'CommentThreadTarget', id: string, createdAt: string, updatedAt: string, commentableType: CommentableType, commentableId: string }> | null } };
+
 export type GetCompaniesQueryVariables = Exact<{
   orderBy?: InputMaybe<Array<CompanyOrderByWithRelationInput> | CompanyOrderByWithRelationInput>;
   where?: InputMaybe<CompanyWhereInput>;
@@ -1333,6 +1699,7 @@ export type EmptyQueryQuery = { __typename?: 'Query', searchResults: Array<{ __t
 export type SearchCompanyQueryQueryVariables = Exact<{
   where?: InputMaybe<CompanyWhereInput>;
   limit?: InputMaybe<Scalars['Int']>;
+  orderBy?: InputMaybe<Array<CompanyOrderByWithRelationInput> | CompanyOrderByWithRelationInput>;
 }>;
 
 
@@ -1476,6 +1843,7 @@ export const GetCommentThreadsByTargetsDocument = gql`
       }
     }
     commentThreadTargets {
+      id
       commentableId
       commentableType
     }
@@ -1561,6 +1929,101 @@ export function useGetCommentThreadLazyQuery(baseOptions?: Apollo.LazyQueryHookO
 export type GetCommentThreadQueryHookResult = ReturnType<typeof useGetCommentThreadQuery>;
 export type GetCommentThreadLazyQueryHookResult = ReturnType<typeof useGetCommentThreadLazyQuery>;
 export type GetCommentThreadQueryResult = Apollo.QueryResult<GetCommentThreadQuery, GetCommentThreadQueryVariables>;
+export const AddCommentThreadTargetOnCommentThreadDocument = gql`
+    mutation AddCommentThreadTargetOnCommentThread($commentThreadId: String!, $commentThreadTargetCreationDate: DateTime!, $commentThreadTargetId: String!, $commentableEntityId: String!, $commentableEntityType: CommentableType!) {
+  updateOneCommentThread(
+    where: {id: $commentThreadId}
+    data: {commentThreadTargets: {connectOrCreate: {create: {id: $commentThreadTargetId, createdAt: $commentThreadTargetCreationDate, commentableType: $commentableEntityType, commentableId: $commentableEntityId}, where: {id: $commentThreadTargetId}}}}
+  ) {
+    id
+    createdAt
+    updatedAt
+    commentThreadTargets {
+      id
+      createdAt
+      updatedAt
+      commentableType
+      commentableId
+    }
+  }
+}
+    `;
+export type AddCommentThreadTargetOnCommentThreadMutationFn = Apollo.MutationFunction<AddCommentThreadTargetOnCommentThreadMutation, AddCommentThreadTargetOnCommentThreadMutationVariables>;
+
+/**
+ * __useAddCommentThreadTargetOnCommentThreadMutation__
+ *
+ * To run a mutation, you first call `useAddCommentThreadTargetOnCommentThreadMutation` within a React component and pass it any options that fit your needs.
+ * When your component renders, `useAddCommentThreadTargetOnCommentThreadMutation` returns a tuple that includes:
+ * - A mutate function that you can call at any time to execute the mutation
+ * - An object with fields that represent the current status of the mutation's execution
+ *
+ * @param baseOptions options that will be passed into the mutation, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options-2;
+ *
+ * @example
+ * const [addCommentThreadTargetOnCommentThreadMutation, { data, loading, error }] = useAddCommentThreadTargetOnCommentThreadMutation({
+ *   variables: {
+ *      commentThreadId: // value for 'commentThreadId'
+ *      commentThreadTargetCreationDate: // value for 'commentThreadTargetCreationDate'
+ *      commentThreadTargetId: // value for 'commentThreadTargetId'
+ *      commentableEntityId: // value for 'commentableEntityId'
+ *      commentableEntityType: // value for 'commentableEntityType'
+ *   },
+ * });
+ */
+export function useAddCommentThreadTargetOnCommentThreadMutation(baseOptions?: Apollo.MutationHookOptions<AddCommentThreadTargetOnCommentThreadMutation, AddCommentThreadTargetOnCommentThreadMutationVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useMutation<AddCommentThreadTargetOnCommentThreadMutation, AddCommentThreadTargetOnCommentThreadMutationVariables>(AddCommentThreadTargetOnCommentThreadDocument, options);
+      }
+export type AddCommentThreadTargetOnCommentThreadMutationHookResult = ReturnType<typeof useAddCommentThreadTargetOnCommentThreadMutation>;
+export type AddCommentThreadTargetOnCommentThreadMutationResult = Apollo.MutationResult<AddCommentThreadTargetOnCommentThreadMutation>;
+export type AddCommentThreadTargetOnCommentThreadMutationOptions = Apollo.BaseMutationOptions<AddCommentThreadTargetOnCommentThreadMutation, AddCommentThreadTargetOnCommentThreadMutationVariables>;
+export const RemoveCommentThreadTargetOnCommentThreadDocument = gql`
+    mutation RemoveCommentThreadTargetOnCommentThread($commentThreadId: String!, $commentThreadTargetId: String!) {
+  updateOneCommentThread(
+    where: {id: $commentThreadId}
+    data: {commentThreadTargets: {delete: {id: $commentThreadTargetId}}}
+  ) {
+    id
+    createdAt
+    updatedAt
+    commentThreadTargets {
+      id
+      createdAt
+      updatedAt
+      commentableType
+      commentableId
+    }
+  }
+}
+    `;
+export type RemoveCommentThreadTargetOnCommentThreadMutationFn = Apollo.MutationFunction<RemoveCommentThreadTargetOnCommentThreadMutation, RemoveCommentThreadTargetOnCommentThreadMutationVariables>;
+
+/**
+ * __useRemoveCommentThreadTargetOnCommentThreadMutation__
+ *
+ * To run a mutation, you first call `useRemoveCommentThreadTargetOnCommentThreadMutation` within a React component and pass it any options that fit your needs.
+ * When your component renders, `useRemoveCommentThreadTargetOnCommentThreadMutation` returns a tuple that includes:
+ * - A mutate function that you can call at any time to execute the mutation
+ * - An object with fields that represent the current status of the mutation's execution
+ *
+ * @param baseOptions options that will be passed into the mutation, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options-2;
+ *
+ * @example
+ * const [removeCommentThreadTargetOnCommentThreadMutation, { data, loading, error }] = useRemoveCommentThreadTargetOnCommentThreadMutation({
+ *   variables: {
+ *      commentThreadId: // value for 'commentThreadId'
+ *      commentThreadTargetId: // value for 'commentThreadTargetId'
+ *   },
+ * });
+ */
+export function useRemoveCommentThreadTargetOnCommentThreadMutation(baseOptions?: Apollo.MutationHookOptions<RemoveCommentThreadTargetOnCommentThreadMutation, RemoveCommentThreadTargetOnCommentThreadMutationVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useMutation<RemoveCommentThreadTargetOnCommentThreadMutation, RemoveCommentThreadTargetOnCommentThreadMutationVariables>(RemoveCommentThreadTargetOnCommentThreadDocument, options);
+      }
+export type RemoveCommentThreadTargetOnCommentThreadMutationHookResult = ReturnType<typeof useRemoveCommentThreadTargetOnCommentThreadMutation>;
+export type RemoveCommentThreadTargetOnCommentThreadMutationResult = Apollo.MutationResult<RemoveCommentThreadTargetOnCommentThreadMutation>;
+export type RemoveCommentThreadTargetOnCommentThreadMutationOptions = Apollo.BaseMutationOptions<RemoveCommentThreadTargetOnCommentThreadMutation, RemoveCommentThreadTargetOnCommentThreadMutationVariables>;
 export const GetCompaniesDocument = gql`
     query GetCompanies($orderBy: [CompanyOrderByWithRelationInput!], $where: CompanyWhereInput) {
   companies: findManyCompany(orderBy: $orderBy, where: $where) {
@@ -2085,8 +2548,8 @@ export type EmptyQueryQueryHookResult = ReturnType<typeof useEmptyQueryQuery>;
 export type EmptyQueryLazyQueryHookResult = ReturnType<typeof useEmptyQueryLazyQuery>;
 export type EmptyQueryQueryResult = Apollo.QueryResult<EmptyQueryQuery, EmptyQueryQueryVariables>;
 export const SearchCompanyQueryDocument = gql`
-    query SearchCompanyQuery($where: CompanyWhereInput, $limit: Int) {
+    query SearchCompanyQuery($where: CompanyWhereInput, $limit: Int, $orderBy: [CompanyOrderByWithRelationInput!]) {
-  searchResults: findManyCompany(where: $where, take: $limit) {
+  searchResults: findManyCompany(where: $where, take: $limit, orderBy: $orderBy) {
     id
     name
     domainName
@@ -2108,6 +2571,7 @@ export const SearchCompanyQueryDocument = gql`
  *   variables: {
  *      where: // value for 'where'
  *      limit: // value for 'limit'
+ *      orderBy: // value for 'orderBy'
  *   },
  * });
  */

front/src/modules/comments/components/comments/CommentThreadRelationPicker.tsx

@@ -1,15 +1,16 @@
 import { useState } from 'react';
+import { useHotkeys } from 'react-hotkeys-hook';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import {
   autoUpdate,
   flip,
   offset,
-  shift,
   size,
   useFloating,
 } from '@floating-ui/react';
 import { debounce } from 'lodash';
+import { v4 } from 'uuid';
 
 import { CommentThreadForDrawer } from '@/comments/types/CommentThreadForDrawer';
 import CompanyChip from '@/companies/components/CompanyChip';
@@ -19,17 +20,25 @@ import { DropdownMenuItem } from '@/ui/components/menu/DropdownMenuItem';
 import { DropdownMenuItemContainer } from '@/ui/components/menu/DropdownMenuItemContainer';
 import { DropdownMenuSearch } from '@/ui/components/menu/DropdownMenuSearch';
 import { DropdownMenuSeparator } from '@/ui/components/menu/DropdownMenuSeparator';
+import { useListenClickOutsideArrayOfRef } from '@/ui/hooks/useListenClickOutsideArrayOfRef';
 import { IconArrowUpRight } from '@/ui/icons';
 import { Avatar } from '@/users/components/Avatar';
 import { getLogoUrlFromDomainName } from '@/utils/utils';
-import { QueryMode, useSearchCompanyQueryQuery } from '~/generated/graphql';
+import {
+  CommentableType,
+  QueryMode,
+  SortOrder,
+  useAddCommentThreadTargetOnCommentThreadMutation,
+  useRemoveCommentThreadTargetOnCommentThreadMutation,
+  useSearchCompanyQueryQuery,
+} from '~/generated/graphql';
 
 type OwnProps = {
   commentThread: CommentThreadForDrawer;
 };
 
 const StyledContainer = styled.div`
-  align-items: center;
+  align-items: flex-start;
   display: flex;
   flex-direction: row;
   gap: ${(props) => props.theme.spacing(2)};
@@ -38,10 +47,23 @@ const StyledContainer = styled.div`
   width: 100%;
 `;
 
+const StyledLabelContainer = styled.div`
+  align-items: center;
+  display: flex;
+  flex-direction: row;
+
+  gap: ${(props) => props.theme.spacing(2)};
+
+  padding-bottom: ${(props) => props.theme.spacing(2)};
+  padding-top: ${(props) => props.theme.spacing(2)};
+`;
+
 const StyledRelationLabel = styled.div`
   color: ${(props) => props.theme.text60};
   display: flex;
   flex-direction: row;
+
+  user-select: none;
 `;
 
 const StyledRelationContainer = styled.div`
@@ -53,43 +75,23 @@ const StyledRelationContainer = styled.div`
   cursor: pointer;
 
   display: flex;
-  gap: ${(props) => props.theme.spacing(2)};
+  flex-wrap: wrap;
 
-  height: calc(32px - 2 * var(--vertical-padding));
+  gap: ${(props) => props.theme.spacing(2)};
 
   &:hover {
     background-color: ${(props) => props.theme.secondaryBackground};
     border: 1px solid ${(props) => props.theme.lightBorder};
   }
 
+  min-height: calc(32px - 2 * var(--vertical-padding));
+
   overflow: hidden;
 
   padding: var(--vertical-padding) var(--horizontal-padding);
-
   width: calc(100% - 2 * var(--horizontal-padding));
 `;
 
-// TODO: refactor icon button with new figma and merge
-// const StyledAddButton = styled.div`
-//   align-items: center;
-//   background: ${(props) => props.theme.primaryBackgroundTransparent};
-//   border-radius: ${(props) => props.theme.borderRadius};
-//   box-shadow: ${(props) => props.theme.modalBoxShadow};
-
-//   cursor: pointer;
-//   display: flex;
-//   flex-direction: row;
-
-//   &:hover {
-//     background-color: ${(props) => props.theme.tertiaryBackground};
-//   }
-
-//   height: 20px;
-//   justify-content: center;
-
-//   width: 20px;
-// `;
-
 export function CommentThreadRelationPicker({ commentThread }: OwnProps) {
   const [isMenuOpen, setIsMenuOpen] = useState(false);
   const [searchFilter, setSearchFilter] = useState('');
@@ -98,11 +100,33 @@ export function CommentThreadRelationPicker({ commentThread }: OwnProps) {
     leading: true,
   });
 
+  function exitEditMode() {
+    setIsMenuOpen(false);
+    setSearchFilter('');
+  }
+
+  useHotkeys(
+    ['esc', 'enter'],
+    () => {
+      exitEditMode();
+    },
+    {
+      enableOnContentEditable: true,
+      enableOnFormTags: true,
+    },
+    [exitEditMode],
+  );
+
   const { refs, floatingStyles } = useFloating({
-    strategy: 'fixed',
+    strategy: 'absolute',
-    middleware: [offset(), flip(), shift(), size()],
+    middleware: [offset(), flip(), size()],
     whileElementsMounted: autoUpdate,
     open: isMenuOpen,
+    placement: 'bottom-start',
+  });
+
+  useListenClickOutsideArrayOfRef([refs.floating, refs.domReference], () => {
+    exitEditMode();
   });
 
   const theme = useTheme();
@@ -111,29 +135,63 @@ export function CommentThreadRelationPicker({ commentThread }: OwnProps) {
     ?.filter((relation) => relation.commentableType === 'Company')
     .map((relation) => relation.commentableId);
 
-  // const personIds = commentThread.commentThreadTargets
+  const { data: selectedCompaniesData } = useSearchCompanyQueryQuery({
-  //   ?.filter((relation) => relation.commentableType === 'Person')
-  //   .map((relation) => relation.commentableId);
-
-  const { data: dataForChips } = useSearchCompanyQueryQuery({
     variables: {
       where: {
         id: {
           in: companyIds,
         },
       },
+      orderBy: {
+        name: SortOrder.Asc,
+      },
     },
   });
 
-  const { data: dataForSelect } = useSearchCompanyQueryQuery({
+  const { data: filteredSelectedCompaniesData } = useSearchCompanyQueryQuery({
     variables: {
       where: {
-        name: {
+        AND: [
-          contains: `%${searchFilter}%`,
+          {
-          mode: QueryMode.Insensitive,
+            name: {
-        },
+              contains: `%${searchFilter}%`,
+              mode: QueryMode.Insensitive,
+            },
+          },
+          {
+            id: {
+              in: companyIds,
+            },
+          },
+        ],
+      },
+      orderBy: {
+        name: SortOrder.Asc,
+      },
+    },
+  });
+
+  const { data: companiesToSelectData } = useSearchCompanyQueryQuery({
+    variables: {
+      where: {
+        AND: [
+          {
+            name: {
+              contains: `%${searchFilter}%`,
+              mode: QueryMode.Insensitive,
+            },
+          },
+          {
+            id: {
+              notIn: companyIds,
+            },
+          },
+        ],
+      },
+      limit: 10,
+      orderBy: {
+        name: SortOrder.Asc,
       },
-      limit: 5,
     },
   });
 
@@ -145,18 +203,65 @@ export function CommentThreadRelationPicker({ commentThread }: OwnProps) {
     setIsMenuOpen((isOpen) => !isOpen);
   }
 
-  const companiesForChips = dataForChips?.searchResults ?? [];
+  const [addCommentThreadTargetOnCommentThread] =
-  const companiesForSelect = dataForSelect?.searchResults ?? [];
+    useAddCommentThreadTargetOnCommentThreadMutation({
+      refetchQueries: ['GetCompanies'],
+    });
+
+  const [removeCommentThreadTargetOnCommentThread] =
+    useRemoveCommentThreadTargetOnCommentThreadMutation({
+      refetchQueries: ['GetCompanies'],
+    });
+
+  function handleCheckItemChange(newCheckedValue: boolean, itemId: string) {
+    if (newCheckedValue) {
+      addCommentThreadTargetOnCommentThread({
+        variables: {
+          commentableEntityId: itemId,
+          commentableEntityType: CommentableType.Company,
+          commentThreadId: commentThread.id,
+          commentThreadTargetCreationDate: new Date().toISOString(),
+          commentThreadTargetId: v4(),
+        },
+      });
+    } else {
+      const foundCorrespondingTarget = commentThread.commentThreadTargets?.find(
+        (target) => target.commentableId === itemId,
+      );
+
+      if (foundCorrespondingTarget) {
+        removeCommentThreadTargetOnCommentThread({
+          variables: {
+            commentThreadId: commentThread.id,
+            commentThreadTargetId: foundCorrespondingTarget.id,
+          },
+        });
+      }
+    }
+  }
+
+  const selectedCompanies = selectedCompaniesData?.searchResults ?? [];
+
+  const filteredSelectedCompanies =
+    filteredSelectedCompaniesData?.searchResults ?? [];
+  const companiesToSelect = companiesToSelectData?.searchResults ?? [];
+
+  const companiesInDropdown = [
+    ...filteredSelectedCompanies,
+    ...companiesToSelect,
+  ];
 
   return (
     <StyledContainer>
-      <IconArrowUpRight size={20} color={theme.text40} />
+      <StyledLabelContainer>
-      <StyledRelationLabel>Relations</StyledRelationLabel>
+        <IconArrowUpRight size={16} color={theme.text40} />
+        <StyledRelationLabel>Relations</StyledRelationLabel>
+      </StyledLabelContainer>
       <StyledRelationContainer
         ref={refs.setReference}
         onClick={handleChangeRelationsClick}
       >
-        {companiesForChips?.map((company) => (
+        {selectedCompanies?.map((company) => (
           <CompanyChip
             key={company.id}
             name={company.name}
@@ -164,9 +269,6 @@ export function CommentThreadRelationPicker({ commentThread }: OwnProps) {
           />
         ))}
       </StyledRelationContainer>
-      {/* <StyledAddButton id="add-button" onClick={handleAddButtonClick}>
-        <IconPlus size={14} color={theme.text40} strokeWidth={1.5} />
-      </StyledAddButton> */}
       {isMenuOpen && (
         <DropdownMenu ref={refs.setFloating} style={floatingStyles}>
           <DropdownMenuSearch
@@ -175,17 +277,17 @@ export function CommentThreadRelationPicker({ commentThread }: OwnProps) {
           />
           <DropdownMenuSeparator />
           <DropdownMenuItemContainer>
-            {companiesForSelect?.slice(0, 5)?.map((company) => (
+            {companiesInDropdown?.map((company) => (
               <DropdownMenuCheckableItem
+                key={company.id}
                 checked={
-                  companiesForChips
+                  selectedCompanies
-                    ?.map((companyForChip) => companyForChip.id)
+                    ?.map((selectedCompany) => selectedCompany.id)
                     ?.includes(company.id) ?? false
                 }
-                onChange={(newCheckedValue) => {
+                onChange={(newCheckedValue) =>
-                  if (newCheckedValue) {
+                  handleCheckItemChange(newCheckedValue, company.id)
-                  }
+                }
-                }}
               >
                 <Avatar
                   avatarUrl={getLogoUrlFromDomainName(company.domainName)}
@@ -195,7 +297,7 @@ export function CommentThreadRelationPicker({ commentThread }: OwnProps) {
                 {company.name}
               </DropdownMenuCheckableItem>
             ))}
-            {companiesForSelect?.length === 0 && (
+            {companiesInDropdown?.length === 0 && (
               <DropdownMenuItem>No result</DropdownMenuItem>
             )}
           </DropdownMenuItemContainer>

front/src/modules/comments/services/select.ts

@@ -26,6 +26,7 @@ export const GET_COMMENT_THREADS_BY_TARGETS = gql`
         }
       }
       commentThreadTargets {
+        id
         commentableId
         commentableType
       }

front/src/modules/comments/services/update.ts

@@ -0,0 +1,62 @@
+import { gql } from '@apollo/client';
+
+export const ADD_COMMENT_THREAD_TARGET = gql`
+  mutation AddCommentThreadTargetOnCommentThread(
+    $commentThreadId: String!
+    $commentThreadTargetCreationDate: DateTime!
+    $commentThreadTargetId: String!
+    $commentableEntityId: String!
+    $commentableEntityType: CommentableType!
+  ) {
+    updateOneCommentThread(
+      where: { id: $commentThreadId }
+      data: {
+        commentThreadTargets: {
+          connectOrCreate: {
+            create: {
+              id: $commentThreadTargetId
+              createdAt: $commentThreadTargetCreationDate
+              commentableType: $commentableEntityType
+              commentableId: $commentableEntityId
+            }
+            where: { id: $commentThreadTargetId }
+          }
+        }
+      }
+    ) {
+      id
+      createdAt
+      updatedAt
+      commentThreadTargets {
+        id
+        createdAt
+        updatedAt
+        commentableType
+        commentableId
+      }
+    }
+  }
+`;
+
+export const REMOVE_COMMENT_THREAD_TARGET = gql`
+  mutation RemoveCommentThreadTargetOnCommentThread(
+    $commentThreadId: String!
+    $commentThreadTargetId: String!
+  ) {
+    updateOneCommentThread(
+      where: { id: $commentThreadId }
+      data: { commentThreadTargets: { delete: { id: $commentThreadTargetId } } }
+    ) {
+      id
+      createdAt
+      updatedAt
+      commentThreadTargets {
+        id
+        createdAt
+        updatedAt
+        commentableType
+        commentableId
+      }
+    }
+  }
+`;

front/src/modules/companies/components/CompanyChip.tsx

@@ -14,6 +14,8 @@ const StyledContainer = styled.span`
   color: ${(props) => props.theme.text80};
   display: inline-flex;
   gap: ${(props) => props.theme.spacing(1)};
+  height: calc(20px - 2 * ${(props) => props.theme.spacing(1)});
+
   padding: ${(props) => props.theme.spacing(1)};
 
   user-select: none;

front/src/modules/search/services/search.ts

@@ -39,8 +39,16 @@ export const EMPTY_QUERY = gql`
 `;
 
 export const SEARCH_COMPANY_QUERY = gql`
-  query SearchCompanyQuery($where: CompanyWhereInput, $limit: Int) {
+  query SearchCompanyQuery(
-    searchResults: findManyCompany(where: $where, take: $limit) {
+    $where: CompanyWhereInput
+    $limit: Int
+    $orderBy: [CompanyOrderByWithRelationInput!]
+  ) {
+    searchResults: findManyCompany(
+      where: $where
+      take: $limit
+      orderBy: $orderBy
+    ) {
       id
       name
       domainName

front/src/modules/ui/components/menu/DropdownMenuItemContainer.tsx

@@ -9,6 +9,9 @@ export const DropdownMenuItemContainer = styled.div`
   flex-direction: column;
   gap: 2px;
   height: 100%;
+  max-height: 180px;
+  overflow-y: auto;
+
   padding: var(--padding);
   width: calc(100% - 2 * var(--padding));
 `;

front/src/modules/ui/hooks/useListenClickOutsideArrayOfRef.ts

@@ -2,7 +2,7 @@ import React, { useEffect } from 'react';
 
 import { isDefined } from '@/utils/type-guards/isDefined';
 
-export function useListenClickOutsideArrayOfRef<T extends HTMLElement>(
+export function useListenClickOutsideArrayOfRef<T extends Element>(
   arrayOfRef: Array<React.RefObject<T>>,
   outsideClickCallback: (event?: MouseEvent | TouchEvent) => void,
 ) {

server/src/api/resolvers/comment-thread.resolver.ts

@@ -9,6 +9,7 @@ import { CreateOneCommentThreadArgs } from '../@generated/comment-thread/create-
 import { CreateOneCommentThreadGuard } from './guards/create-one-comment-thread.guard';
 import { FindManyCommentThreadArgs } from '../@generated/comment-thread/find-many-comment-thread.args';
 import { ArgsService } from './services/args.service';
+import { UpdateOneCommentThreadArgs } from '../@generated/comment-thread/update-one-comment-thread.args';
 
 @UseGuards(JwtAuthGuard)
 @Resolver(() => CommentThread)
@@ -67,6 +68,20 @@ export class CommentThreadResolver {
     return createdCommentThread;
   }
 
+  @Mutation(() => CommentThread, {
+    nullable: false,
+  })
+  async updateOneCommentThread(
+    @Args() args: UpdateOneCommentThreadArgs,
+  ): Promise<CommentThread> {
+    const updatedCommentThread = await this.prismaService.commentThread.update({
+      data: args.data,
+      where: args.where,
+    });
+
+    return updatedCommentThread;
+  }
+
   @Query(() => [CommentThread])
   async findManyCommentThreads(
     @Args() args: FindManyCommentThreadArgs,