diff --git a/front/src/App.tsx b/front/src/App.tsx index 3d8dd82dd2c..6287f28d8ae 100644 --- a/front/src/App.tsx +++ b/front/src/App.tsx @@ -18,6 +18,8 @@ import { Opportunities } from '~/pages/opportunities/Opportunities'; import { People } from '~/pages/people/People'; import { SettingsProfile } from '~/pages/settings/SettingsProfile'; +import { CompanyShow } from './pages/companies/CompanyShow'; + /** * AuthRoutes is used to allow transitions between auth pages with framer-motion. */ @@ -60,6 +62,7 @@ export function App() { } /> } /> } /> + } /> } /> ; }; +export type ClientConfig = { + __typename?: 'ClientConfig'; + display_google_login: Scalars['Boolean']; + prefill_login_with_seed: Scalars['Boolean']; +}; + export type Comment = { __typename?: 'Comment'; author: User; @@ -129,18 +136,24 @@ export type CommentScalarWhereInput = { export type CommentThread = { __typename?: 'CommentThread'; + authorId?: Maybe; + body?: Maybe; commentThreadTargets?: Maybe>; comments?: Maybe>; createdAt: Scalars['DateTime']; id: Scalars['ID']; + title?: Maybe; updatedAt: Scalars['DateTime']; }; export type CommentThreadCreateInput = { + authorId?: InputMaybe; + body?: InputMaybe; commentThreadTargets?: InputMaybe; comments?: InputMaybe; createdAt?: InputMaybe; id?: InputMaybe; + title?: InputMaybe; updatedAt?: InputMaybe; }; @@ -149,10 +162,13 @@ export type CommentThreadCreateNestedOneWithoutCommentsInput = { }; export type CommentThreadOrderByWithRelationInput = { + authorId?: InputMaybe; + body?: InputMaybe; commentThreadTargets?: InputMaybe; comments?: InputMaybe; createdAt?: InputMaybe; id?: InputMaybe; + title?: InputMaybe; updatedAt?: InputMaybe; }; @@ -162,9 +178,12 @@ export type CommentThreadRelationFilter = { }; export enum CommentThreadScalarFieldEnum { + AuthorId = 'authorId', + Body = 'body', CreatedAt = 'createdAt', DeletedAt = 'deletedAt', Id = 'id', + Title = 'title', UpdatedAt = 'updatedAt', WorkspaceId = 'workspaceId' } @@ -296,10 +315,13 @@ export type CommentThreadTargetWhereUniqueInput = { }; export type CommentThreadUpdateInput = { + authorId?: InputMaybe; + body?: InputMaybe; commentThreadTargets?: InputMaybe; comments?: InputMaybe; createdAt?: InputMaybe; id?: InputMaybe; + title?: InputMaybe; updatedAt?: InputMaybe; }; @@ -307,10 +329,13 @@ export type CommentThreadWhereInput = { AND?: InputMaybe>; NOT?: InputMaybe>; OR?: InputMaybe>; + authorId?: InputMaybe; + body?: InputMaybe; commentThreadTargets?: InputMaybe; comments?: InputMaybe; createdAt?: InputMaybe; id?: InputMaybe; + title?: InputMaybe; updatedAt?: InputMaybe; }; @@ -647,6 +672,10 @@ export type EnumPipelineProgressableTypeFilter = { notIn?: InputMaybe>; }; +export enum FileFolder { + ProfilePicture = 'ProfilePicture' +} + export type IntNullableFilter = { equals?: InputMaybe; gt?: InputMaybe; @@ -697,6 +726,8 @@ export type Mutation = { updateOneCompany?: Maybe; updateOnePerson?: Maybe; updateOnePipelineProgress?: Maybe; + uploadFile: Scalars['String']; + uploadImage: Scalars['String']; verify: Verify; }; @@ -787,6 +818,18 @@ export type MutationUpdateOnePipelineProgressArgs = { }; +export type MutationUploadFileArgs = { + file: Scalars['Upload']; + fileFolder?: InputMaybe; +}; + + +export type MutationUploadImageArgs = { + file: Scalars['Upload']; + fileFolder?: InputMaybe; +}; + + export type MutationVerifyArgs = { loginToken: Scalars['String']; }; @@ -1230,6 +1273,7 @@ export type PipelineWhereUniqueInput = { export type Query = { __typename?: 'Query'; + clientConfig: ClientConfig; findManyCommentThreads: Array; findManyCompany: Array; findManyPerson: Array; @@ -1237,6 +1281,7 @@ export type Query = { findManyPipelineProgress: Array; findManyPipelineStage: Array; findManyUser: Array; + findUniqueCompany: Company; }; @@ -1309,6 +1354,11 @@ export type QueryFindManyUserArgs = { where?: InputMaybe; }; + +export type QueryFindUniqueCompanyArgs = { + id: Scalars['String']; +}; + export enum QueryMode { Default = 'default', Insensitive = 'insensitive' @@ -1392,7 +1442,6 @@ export type UserCreateWithoutCommentsInput = { companies?: InputMaybe; createdAt?: InputMaybe; disabled?: InputMaybe; - displayName?: InputMaybe; email: Scalars['String']; emailVerified?: InputMaybe; firstName: Scalars['String']; @@ -1411,7 +1460,6 @@ export type UserOrderByWithRelationInput = { companies?: InputMaybe; createdAt?: InputMaybe; disabled?: InputMaybe; - displayName?: InputMaybe; email?: InputMaybe; emailVerified?: InputMaybe; firstName?: InputMaybe; @@ -1434,7 +1482,6 @@ export enum UserScalarFieldEnum { CreatedAt = 'createdAt', DeletedAt = 'deletedAt', Disabled = 'disabled', - DisplayName = 'displayName', Email = 'email', EmailVerified = 'emailVerified', FirstName = 'firstName', @@ -1465,7 +1512,6 @@ export type UserUpdateWithoutCommentsInput = { companies?: InputMaybe; createdAt?: InputMaybe; disabled?: InputMaybe; - displayName?: InputMaybe; email?: InputMaybe; emailVerified?: InputMaybe; firstName?: InputMaybe; @@ -1492,7 +1538,6 @@ export type UserWhereInput = { companies?: InputMaybe; createdAt?: InputMaybe; disabled?: InputMaybe; - displayName?: InputMaybe; email?: InputMaybe; emailVerified?: InputMaybe; firstName?: InputMaybe; @@ -1552,6 +1597,11 @@ export type CreateEventMutationVariables = Exact<{ export type CreateEventMutation = { __typename?: 'Mutation', createEvent: { __typename?: 'Analytics', success: boolean } }; +export type GetClientConfigQueryVariables = Exact<{ [key: string]: never; }>; + + +export type GetClientConfigQuery = { __typename?: 'Query', clientConfig: { __typename?: 'ClientConfig', display_google_login: boolean, prefill_login_with_seed: boolean } }; + export type ChallengeMutationVariables = Exact<{ email: Scalars['String']; password: Scalars['String']; @@ -1565,7 +1615,7 @@ export type VerifyMutationVariables = Exact<{ }>; -export type VerifyMutation = { __typename?: 'Mutation', verify: { __typename?: 'Verify', user: { __typename?: 'User', id: string, email: string, displayName: string, workspaceMember?: { __typename?: 'WorkspaceMember', id: string, workspace: { __typename?: 'Workspace', id: string, domainName: string, displayName: string, logo?: string | null } } | null }, tokens: { __typename?: 'AuthTokenPair', accessToken: { __typename?: 'AuthToken', token: string, expiresAt: string }, refreshToken: { __typename?: 'AuthToken', token: string, expiresAt: string } } } }; +export type VerifyMutation = { __typename?: 'Mutation', verify: { __typename?: 'Verify', user: { __typename?: 'User', id: string, email: string, displayName: string, firstName: string, lastName: string, workspaceMember?: { __typename?: 'WorkspaceMember', id: string, workspace: { __typename?: 'Workspace', id: string, domainName: string, displayName: string, logo?: string | null } } | null }, tokens: { __typename?: 'AuthTokenPair', accessToken: { __typename?: 'AuthToken', token: string, expiresAt: string }, refreshToken: { __typename?: 'AuthToken', token: string, expiresAt: string } } } }; export type RenewTokenMutationVariables = Exact<{ refreshToken: Scalars['String']; @@ -1590,7 +1640,6 @@ export type CreateCommentThreadWithCommentMutationVariables = Exact<{ commentText: Scalars['String']; authorId: Scalars['String']; createdAt: Scalars['DateTime']; - commentId: Scalars['String']; commentThreadTargetArray: Array | CommentThreadTargetCreateManyCommentThreadInput; }>; @@ -1603,7 +1652,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, firstName: string, lastName: string, avatarUrl?: string | null } }> | null, commentThreadTargets?: Array<{ __typename?: 'CommentThreadTarget', id: string, commentableId: string, commentableType: CommentableType }> | null }> }; +export type GetCommentThreadsByTargetsQuery = { __typename?: 'Query', findManyCommentThreads: Array<{ __typename?: 'CommentThread', id: string, title?: string | null, body?: string | null, authorId?: string | null, comments?: Array<{ __typename?: 'Comment', id: string, body: string, createdAt: string, updatedAt: string, author: { __typename?: 'User', id: string, displayName: string, firstName: string, lastName: string, avatarUrl?: string | null } }> | null, commentThreadTargets?: Array<{ __typename?: 'CommentThreadTarget', id: string, commentableId: string, commentableType: CommentableType }> | null }> }; export type GetCommentThreadQueryVariables = Exact<{ commentThreadId: Scalars['String']; @@ -1646,6 +1695,13 @@ export type GetCompaniesQueryVariables = Exact<{ export type GetCompaniesQuery = { __typename?: 'Query', companies: Array<{ __typename?: 'Company', id: string, domainName: string, name: string, createdAt: string, address: string, employees?: number | null, _commentCount: number, accountOwner?: { __typename?: 'User', id: string, email: string, displayName: string, firstName: string, lastName: string } | null }> }; +export type GetCompanyQueryVariables = Exact<{ + id: Scalars['String']; +}>; + + +export type GetCompanyQuery = { __typename?: 'Query', findUniqueCompany: { __typename?: 'Company', id: string, domainName: string, name: string, createdAt: string, address: string, employees?: number | null, _commentCount: number, accountOwner?: { __typename?: 'User', id: string, email: string, displayName: string } | null } }; + export type UpdateCompanyMutationVariables = Exact<{ id?: InputMaybe; name?: InputMaybe; @@ -1678,39 +1734,6 @@ export type DeleteCompaniesMutationVariables = Exact<{ export type DeleteCompaniesMutation = { __typename?: 'Mutation', deleteManyCompany: { __typename?: 'AffectedRows', count: number } }; -export type GetPipelinesQueryVariables = Exact<{ - where?: InputMaybe; -}>; - - -export type GetPipelinesQuery = { __typename?: 'Query', findManyPipeline: Array<{ __typename?: 'Pipeline', id: string, name: string, pipelineProgressableType: PipelineProgressableType, pipelineStages?: Array<{ __typename?: 'PipelineStage', id: string, name: string, color: string, pipelineProgresses?: Array<{ __typename?: 'PipelineProgress', id: string, progressableType: PipelineProgressableType, progressableId: string }> | null }> | null }> }; - -export type UpdateOnePipelineProgressMutationVariables = Exact<{ - id?: InputMaybe; - pipelineStageId?: InputMaybe; -}>; - - -export type UpdateOnePipelineProgressMutation = { __typename?: 'Mutation', updateOnePipelineProgress?: { __typename?: 'PipelineProgress', id: string } | null }; - -export type CreateOnePipelineProgressMutationVariables = Exact<{ - uuid: Scalars['String']; - entityType: PipelineProgressableType; - entityId: Scalars['String']; - pipelineId: Scalars['String']; - pipelineStageId: Scalars['String']; -}>; - - -export type CreateOnePipelineProgressMutation = { __typename?: 'Mutation', createOnePipelineProgress: { __typename?: 'PipelineProgress', id: string } }; - -export type DeleteManyPipelineProgressMutationVariables = Exact<{ - ids?: InputMaybe | Scalars['String']>; -}>; - - -export type DeleteManyPipelineProgressMutation = { __typename?: 'Mutation', deleteManyPipelineProgress: { __typename?: 'AffectedRows', count: number } }; - export type GetPeopleQueryVariables = Exact<{ orderBy?: InputMaybe | PersonOrderByWithRelationInput>; where?: InputMaybe; @@ -1754,6 +1777,39 @@ export type DeletePeopleMutationVariables = Exact<{ export type DeletePeopleMutation = { __typename?: 'Mutation', deleteManyPerson: { __typename?: 'AffectedRows', count: number } }; +export type GetPipelinesQueryVariables = Exact<{ + where?: InputMaybe; +}>; + + +export type GetPipelinesQuery = { __typename?: 'Query', findManyPipeline: Array<{ __typename?: 'Pipeline', id: string, name: string, pipelineProgressableType: PipelineProgressableType, pipelineStages?: Array<{ __typename?: 'PipelineStage', id: string, name: string, color: string, pipelineProgresses?: Array<{ __typename?: 'PipelineProgress', id: string, progressableType: PipelineProgressableType, progressableId: string }> | null }> | null }> }; + +export type UpdateOnePipelineProgressMutationVariables = Exact<{ + id?: InputMaybe; + pipelineStageId?: InputMaybe; +}>; + + +export type UpdateOnePipelineProgressMutation = { __typename?: 'Mutation', updateOnePipelineProgress?: { __typename?: 'PipelineProgress', id: string } | null }; + +export type CreateOnePipelineProgressMutationVariables = Exact<{ + uuid: Scalars['String']; + entityType: PipelineProgressableType; + entityId: Scalars['String']; + pipelineId: Scalars['String']; + pipelineStageId: Scalars['String']; +}>; + + +export type CreateOnePipelineProgressMutation = { __typename?: 'Mutation', createOnePipelineProgress: { __typename?: 'PipelineProgress', id: string } }; + +export type DeleteManyPipelineProgressMutationVariables = Exact<{ + ids?: InputMaybe | Scalars['String']>; +}>; + + +export type DeleteManyPipelineProgressMutation = { __typename?: 'Mutation', deleteManyPipelineProgress: { __typename?: 'AffectedRows', count: number } }; + export type SearchPeopleQueryVariables = Exact<{ where?: InputMaybe; limit?: InputMaybe; @@ -1798,15 +1854,6 @@ export type GetUsersQueryVariables = Exact<{ [key: string]: never; }>; export type GetUsersQuery = { __typename?: 'Query', findManyUser: Array<{ __typename?: 'User', id: string, email: string, displayName: string, firstName: string, lastName: string }> }; -export type GetClientConfigQuery = { - __typename?: 'Query'; - clientConfig: { - __typename?: 'ClientConfig'; - display_google_login: boolean; - prefill_login_with_seed: boolean; - }; -}; -export type GetClientConfigQueryVariables = {}; export const CreateEventDocument = gql` mutation CreateEvent($type: String!, $data: JSON!) { @@ -1842,6 +1889,41 @@ export function useCreateEventMutation(baseOptions?: Apollo.MutationHookOptions< export type CreateEventMutationHookResult = ReturnType; export type CreateEventMutationResult = Apollo.MutationResult; export type CreateEventMutationOptions = Apollo.BaseMutationOptions; +export const GetClientConfigDocument = gql` + query GetClientConfig { + clientConfig { + display_google_login + prefill_login_with_seed + } +} + `; + +/** + * __useGetClientConfigQuery__ + * + * To run a query within a React component, call `useGetClientConfigQuery` and pass it any options that fit your needs. + * When your component renders, `useGetClientConfigQuery` returns an object from Apollo Client that contains loading, error, and data properties + * you can use to render your UI. + * + * @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options; + * + * @example + * const { data, loading, error } = useGetClientConfigQuery({ + * variables: { + * }, + * }); + */ +export function useGetClientConfigQuery(baseOptions?: Apollo.QueryHookOptions) { + const options = {...defaultOptions, ...baseOptions} + return Apollo.useQuery(GetClientConfigDocument, options); + } +export function useGetClientConfigLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions) { + const options = {...defaultOptions, ...baseOptions} + return Apollo.useLazyQuery(GetClientConfigDocument, options); + } +export type GetClientConfigQueryHookResult = ReturnType; +export type GetClientConfigLazyQueryHookResult = ReturnType; +export type GetClientConfigQueryResult = Apollo.QueryResult; export const ChallengeDocument = gql` mutation Challenge($email: String!, $password: String!) { challenge(email: $email, password: $password) { @@ -1886,6 +1968,8 @@ export const VerifyDocument = gql` id email displayName + firstName + lastName workspaceMember { id workspace { @@ -2027,9 +2111,9 @@ export type CreateCommentMutationHookResult = ReturnType; export type CreateCommentMutationOptions = Apollo.BaseMutationOptions; export const CreateCommentThreadWithCommentDocument = gql` - mutation CreateCommentThreadWithComment($commentThreadId: String!, $commentText: String!, $authorId: String!, $createdAt: DateTime!, $commentId: String!, $commentThreadTargetArray: [CommentThreadTargetCreateManyCommentThreadInput!]!) { + mutation CreateCommentThreadWithComment($commentThreadId: String!, $commentText: String!, $authorId: String!, $createdAt: DateTime!, $commentThreadTargetArray: [CommentThreadTargetCreateManyCommentThreadInput!]!) { createOneCommentThread( - data: {id: $commentThreadId, createdAt: $createdAt, updatedAt: $createdAt, comments: {createMany: {data: {authorId: $authorId, id: $commentId, createdAt: $createdAt, body: $commentText}}}, commentThreadTargets: {createMany: {data: $commentThreadTargetArray, skipDuplicates: true}}} + data: {id: $commentThreadId, createdAt: $createdAt, updatedAt: $createdAt, authorId: $authorId, body: $commentText, commentThreadTargets: {createMany: {data: $commentThreadTargetArray, skipDuplicates: true}}} ) { id createdAt @@ -2073,7 +2157,6 @@ export type CreateCommentThreadWithCommentMutationFn = Apollo.MutationFunction; export type GetCompaniesLazyQueryHookResult = ReturnType; export type GetCompaniesQueryResult = Apollo.QueryResult; +export const GetCompanyDocument = gql` + query GetCompany($id: String!) { + findUniqueCompany(id: $id) { + id + domainName + name + createdAt + address + employees + _commentCount + accountOwner { + id + email + displayName + } + } +} + `; + +/** + * __useGetCompanyQuery__ + * + * To run a query within a React component, call `useGetCompanyQuery` and pass it any options that fit your needs. + * When your component renders, `useGetCompanyQuery` returns an object from Apollo Client that contains loading, error, and data properties + * you can use to render your UI. + * + * @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options; + * + * @example + * const { data, loading, error } = useGetCompanyQuery({ + * variables: { + * id: // value for 'id' + * }, + * }); + */ +export function useGetCompanyQuery(baseOptions: Apollo.QueryHookOptions) { + const options = {...defaultOptions, ...baseOptions} + return Apollo.useQuery(GetCompanyDocument, options); + } +export function useGetCompanyLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions) { + const options = {...defaultOptions, ...baseOptions} + return Apollo.useLazyQuery(GetCompanyDocument, options); + } +export type GetCompanyQueryHookResult = ReturnType; +export type GetCompanyLazyQueryHookResult = ReturnType; +export type GetCompanyQueryResult = Apollo.QueryResult; export const UpdateCompanyDocument = gql` mutation UpdateCompany($id: String, $name: String, $domainName: String, $accountOwnerId: String, $createdAt: DateTime, $address: String, $employees: Int) { updateOneCompany( @@ -2503,162 +2635,6 @@ export function useDeleteCompaniesMutation(baseOptions?: Apollo.MutationHookOpti export type DeleteCompaniesMutationHookResult = ReturnType; export type DeleteCompaniesMutationResult = Apollo.MutationResult; export type DeleteCompaniesMutationOptions = Apollo.BaseMutationOptions; -export const GetPipelinesDocument = gql` - query GetPipelines($where: PipelineWhereInput) { - findManyPipeline(where: $where) { - id - name - pipelineProgressableType - pipelineStages { - id - name - color - pipelineProgresses { - id - progressableType - progressableId - } - } - } -} - `; - -/** - * __useGetPipelinesQuery__ - * - * To run a query within a React component, call `useGetPipelinesQuery` and pass it any options that fit your needs. - * When your component renders, `useGetPipelinesQuery` returns an object from Apollo Client that contains loading, error, and data properties - * you can use to render your UI. - * - * @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options; - * - * @example - * const { data, loading, error } = useGetPipelinesQuery({ - * variables: { - * where: // value for 'where' - * }, - * }); - */ -export function useGetPipelinesQuery(baseOptions?: Apollo.QueryHookOptions) { - const options = {...defaultOptions, ...baseOptions} - return Apollo.useQuery(GetPipelinesDocument, options); - } -export function useGetPipelinesLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions) { - const options = {...defaultOptions, ...baseOptions} - return Apollo.useLazyQuery(GetPipelinesDocument, options); - } -export type GetPipelinesQueryHookResult = ReturnType; -export type GetPipelinesLazyQueryHookResult = ReturnType; -export type GetPipelinesQueryResult = Apollo.QueryResult; -export const UpdateOnePipelineProgressDocument = gql` - mutation UpdateOnePipelineProgress($id: String, $pipelineStageId: String) { - updateOnePipelineProgress( - where: {id: $id} - data: {pipelineStage: {connect: {id: $pipelineStageId}}} - ) { - id - } -} - `; -export type UpdateOnePipelineProgressMutationFn = Apollo.MutationFunction; - -/** - * __useUpdateOnePipelineProgressMutation__ - * - * To run a mutation, you first call `useUpdateOnePipelineProgressMutation` within a React component and pass it any options that fit your needs. - * When your component renders, `useUpdateOnePipelineProgressMutation` 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 [updateOnePipelineProgressMutation, { data, loading, error }] = useUpdateOnePipelineProgressMutation({ - * variables: { - * id: // value for 'id' - * pipelineStageId: // value for 'pipelineStageId' - * }, - * }); - */ -export function useUpdateOnePipelineProgressMutation(baseOptions?: Apollo.MutationHookOptions) { - const options = {...defaultOptions, ...baseOptions} - return Apollo.useMutation(UpdateOnePipelineProgressDocument, options); - } -export type UpdateOnePipelineProgressMutationHookResult = ReturnType; -export type UpdateOnePipelineProgressMutationResult = Apollo.MutationResult; -export type UpdateOnePipelineProgressMutationOptions = Apollo.BaseMutationOptions; -export const CreateOnePipelineProgressDocument = gql` - mutation CreateOnePipelineProgress($uuid: String!, $entityType: PipelineProgressableType!, $entityId: String!, $pipelineId: String!, $pipelineStageId: String!) { - createOnePipelineProgress( - data: {id: $uuid, progressableType: $entityType, progressableId: $entityId, pipeline: {connect: {id: $pipelineId}}, pipelineStage: {connect: {id: $pipelineStageId}}} - ) { - id - } -} - `; -export type CreateOnePipelineProgressMutationFn = Apollo.MutationFunction; - -/** - * __useCreateOnePipelineProgressMutation__ - * - * To run a mutation, you first call `useCreateOnePipelineProgressMutation` within a React component and pass it any options that fit your needs. - * When your component renders, `useCreateOnePipelineProgressMutation` 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 [createOnePipelineProgressMutation, { data, loading, error }] = useCreateOnePipelineProgressMutation({ - * variables: { - * uuid: // value for 'uuid' - * entityType: // value for 'entityType' - * entityId: // value for 'entityId' - * pipelineId: // value for 'pipelineId' - * pipelineStageId: // value for 'pipelineStageId' - * }, - * }); - */ -export function useCreateOnePipelineProgressMutation(baseOptions?: Apollo.MutationHookOptions) { - const options = {...defaultOptions, ...baseOptions} - return Apollo.useMutation(CreateOnePipelineProgressDocument, options); - } -export type CreateOnePipelineProgressMutationHookResult = ReturnType; -export type CreateOnePipelineProgressMutationResult = Apollo.MutationResult; -export type CreateOnePipelineProgressMutationOptions = Apollo.BaseMutationOptions; -export const DeleteManyPipelineProgressDocument = gql` - mutation DeleteManyPipelineProgress($ids: [String!]) { - deleteManyPipelineProgress(where: {id: {in: $ids}}) { - count - } -} - `; -export type DeleteManyPipelineProgressMutationFn = Apollo.MutationFunction; - -/** - * __useDeleteManyPipelineProgressMutation__ - * - * To run a mutation, you first call `useDeleteManyPipelineProgressMutation` within a React component and pass it any options that fit your needs. - * When your component renders, `useDeleteManyPipelineProgressMutation` 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 [deleteManyPipelineProgressMutation, { data, loading, error }] = useDeleteManyPipelineProgressMutation({ - * variables: { - * ids: // value for 'ids' - * }, - * }); - */ -export function useDeleteManyPipelineProgressMutation(baseOptions?: Apollo.MutationHookOptions) { - const options = {...defaultOptions, ...baseOptions} - return Apollo.useMutation(DeleteManyPipelineProgressDocument, options); - } -export type DeleteManyPipelineProgressMutationHookResult = ReturnType; -export type DeleteManyPipelineProgressMutationResult = Apollo.MutationResult; -export type DeleteManyPipelineProgressMutationOptions = Apollo.BaseMutationOptions; export const GetPeopleDocument = gql` query GetPeople($orderBy: [PersonOrderByWithRelationInput!], $where: PersonWhereInput, $limit: Int) { people: findManyPerson(orderBy: $orderBy, where: $where, take: $limit) { @@ -2847,6 +2823,162 @@ export function useDeletePeopleMutation(baseOptions?: Apollo.MutationHookOptions export type DeletePeopleMutationHookResult = ReturnType; export type DeletePeopleMutationResult = Apollo.MutationResult; export type DeletePeopleMutationOptions = Apollo.BaseMutationOptions; +export const GetPipelinesDocument = gql` + query GetPipelines($where: PipelineWhereInput) { + findManyPipeline(where: $where) { + id + name + pipelineProgressableType + pipelineStages { + id + name + color + pipelineProgresses { + id + progressableType + progressableId + } + } + } +} + `; + +/** + * __useGetPipelinesQuery__ + * + * To run a query within a React component, call `useGetPipelinesQuery` and pass it any options that fit your needs. + * When your component renders, `useGetPipelinesQuery` returns an object from Apollo Client that contains loading, error, and data properties + * you can use to render your UI. + * + * @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options; + * + * @example + * const { data, loading, error } = useGetPipelinesQuery({ + * variables: { + * where: // value for 'where' + * }, + * }); + */ +export function useGetPipelinesQuery(baseOptions?: Apollo.QueryHookOptions) { + const options = {...defaultOptions, ...baseOptions} + return Apollo.useQuery(GetPipelinesDocument, options); + } +export function useGetPipelinesLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions) { + const options = {...defaultOptions, ...baseOptions} + return Apollo.useLazyQuery(GetPipelinesDocument, options); + } +export type GetPipelinesQueryHookResult = ReturnType; +export type GetPipelinesLazyQueryHookResult = ReturnType; +export type GetPipelinesQueryResult = Apollo.QueryResult; +export const UpdateOnePipelineProgressDocument = gql` + mutation UpdateOnePipelineProgress($id: String, $pipelineStageId: String) { + updateOnePipelineProgress( + where: {id: $id} + data: {pipelineStage: {connect: {id: $pipelineStageId}}} + ) { + id + } +} + `; +export type UpdateOnePipelineProgressMutationFn = Apollo.MutationFunction; + +/** + * __useUpdateOnePipelineProgressMutation__ + * + * To run a mutation, you first call `useUpdateOnePipelineProgressMutation` within a React component and pass it any options that fit your needs. + * When your component renders, `useUpdateOnePipelineProgressMutation` 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 [updateOnePipelineProgressMutation, { data, loading, error }] = useUpdateOnePipelineProgressMutation({ + * variables: { + * id: // value for 'id' + * pipelineStageId: // value for 'pipelineStageId' + * }, + * }); + */ +export function useUpdateOnePipelineProgressMutation(baseOptions?: Apollo.MutationHookOptions) { + const options = {...defaultOptions, ...baseOptions} + return Apollo.useMutation(UpdateOnePipelineProgressDocument, options); + } +export type UpdateOnePipelineProgressMutationHookResult = ReturnType; +export type UpdateOnePipelineProgressMutationResult = Apollo.MutationResult; +export type UpdateOnePipelineProgressMutationOptions = Apollo.BaseMutationOptions; +export const CreateOnePipelineProgressDocument = gql` + mutation CreateOnePipelineProgress($uuid: String!, $entityType: PipelineProgressableType!, $entityId: String!, $pipelineId: String!, $pipelineStageId: String!) { + createOnePipelineProgress( + data: {id: $uuid, progressableType: $entityType, progressableId: $entityId, pipeline: {connect: {id: $pipelineId}}, pipelineStage: {connect: {id: $pipelineStageId}}} + ) { + id + } +} + `; +export type CreateOnePipelineProgressMutationFn = Apollo.MutationFunction; + +/** + * __useCreateOnePipelineProgressMutation__ + * + * To run a mutation, you first call `useCreateOnePipelineProgressMutation` within a React component and pass it any options that fit your needs. + * When your component renders, `useCreateOnePipelineProgressMutation` 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 [createOnePipelineProgressMutation, { data, loading, error }] = useCreateOnePipelineProgressMutation({ + * variables: { + * uuid: // value for 'uuid' + * entityType: // value for 'entityType' + * entityId: // value for 'entityId' + * pipelineId: // value for 'pipelineId' + * pipelineStageId: // value for 'pipelineStageId' + * }, + * }); + */ +export function useCreateOnePipelineProgressMutation(baseOptions?: Apollo.MutationHookOptions) { + const options = {...defaultOptions, ...baseOptions} + return Apollo.useMutation(CreateOnePipelineProgressDocument, options); + } +export type CreateOnePipelineProgressMutationHookResult = ReturnType; +export type CreateOnePipelineProgressMutationResult = Apollo.MutationResult; +export type CreateOnePipelineProgressMutationOptions = Apollo.BaseMutationOptions; +export const DeleteManyPipelineProgressDocument = gql` + mutation DeleteManyPipelineProgress($ids: [String!]) { + deleteManyPipelineProgress(where: {id: {in: $ids}}) { + count + } +} + `; +export type DeleteManyPipelineProgressMutationFn = Apollo.MutationFunction; + +/** + * __useDeleteManyPipelineProgressMutation__ + * + * To run a mutation, you first call `useDeleteManyPipelineProgressMutation` within a React component and pass it any options that fit your needs. + * When your component renders, `useDeleteManyPipelineProgressMutation` 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 [deleteManyPipelineProgressMutation, { data, loading, error }] = useDeleteManyPipelineProgressMutation({ + * variables: { + * ids: // value for 'ids' + * }, + * }); + */ +export function useDeleteManyPipelineProgressMutation(baseOptions?: Apollo.MutationHookOptions) { + const options = {...defaultOptions, ...baseOptions} + return Apollo.useMutation(DeleteManyPipelineProgressDocument, options); + } +export type DeleteManyPipelineProgressMutationHookResult = ReturnType; +export type DeleteManyPipelineProgressMutationResult = Apollo.MutationResult; +export type DeleteManyPipelineProgressMutationOptions = Apollo.BaseMutationOptions; export const SearchPeopleDocument = gql` query SearchPeople($where: PersonWhereInput, $limit: Int, $orderBy: [PersonOrderByWithRelationInput!]) { searchResults: findManyPerson(where: $where, take: $limit, orderBy: $orderBy) { @@ -3089,39 +3221,4 @@ export function useGetUsersLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions; export type GetUsersLazyQueryHookResult = ReturnType; -export type GetUsersQueryResult = Apollo.QueryResult; - -export const GET_CLIENT_CONFIG = gql` - query GetClientConfig { - clientConfig { - display_google_login - prefill_login_with_seed - } - } -`; - -export function useGetClientConfigQuery( - baseOptions?: Apollo.QueryHookOptions< - GetClientConfigQuery, - GetClientConfigQueryVariables - >, -) { - const options = { ...defaultOptions, ...baseOptions }; - return Apollo.useQuery( - GET_CLIENT_CONFIG, - options, - ); -} - -export function useGetClientConfigLazyQuery( - baseOptions?: Apollo.LazyQueryHookOptions< - GetClientConfigQuery, - GetClientConfigQueryVariables - >, -) { - const options = { ...defaultOptions, ...baseOptions }; - return Apollo.useLazyQuery< - GetClientConfigQuery, - GetClientConfigQueryVariables - >(GET_CLIENT_CONFIG, options); -} \ No newline at end of file +export type GetUsersQueryResult = Apollo.QueryResult; \ No newline at end of file diff --git a/front/src/modules/comments/components/CommentThreadCreateMode.tsx b/front/src/modules/comments/components/CommentThreadCreateMode.tsx index 98ba4c611a4..787f96382ee 100644 --- a/front/src/modules/comments/components/CommentThreadCreateMode.tsx +++ b/front/src/modules/comments/components/CommentThreadCreateMode.tsx @@ -91,7 +91,6 @@ export function CommentThreadCreateMode() { createCommentThreadWithComment({ variables: { authorId: currentUser.id, - commentId: v4(), commentText: commentText, commentThreadId: v4(), createdAt: new Date().toISOString(), diff --git a/front/src/modules/comments/components/CommentThreadRelationPicker.tsx b/front/src/modules/comments/components/CommentThreadRelationPicker.tsx index 66ad701e9e3..704375d24b5 100644 --- a/front/src/modules/comments/components/CommentThreadRelationPicker.tsx +++ b/front/src/modules/comments/components/CommentThreadRelationPicker.tsx @@ -216,6 +216,7 @@ export function CommentThreadRelationPicker({ commentThread }: OwnProps) { entity.entityType === CommentableType.Company ? ( diff --git a/front/src/modules/comments/components/RightDrawerCreateCommentThread.tsx b/front/src/modules/comments/components/RightDrawerCreateCommentThread.tsx index d099851a487..f1bfd3c5664 100644 --- a/front/src/modules/comments/components/RightDrawerCreateCommentThread.tsx +++ b/front/src/modules/comments/components/RightDrawerCreateCommentThread.tsx @@ -7,7 +7,7 @@ import { CommentThreadCreateMode } from './CommentThreadCreateMode'; export function RightDrawerCreateCommentThread() { return ( - + diff --git a/front/src/modules/comments/components/ShowPageComments.tsx b/front/src/modules/comments/components/ShowPageComments.tsx new file mode 100644 index 00000000000..eac1e19f8e9 --- /dev/null +++ b/front/src/modules/comments/components/ShowPageComments.tsx @@ -0,0 +1,65 @@ +import styled from '@emotion/styled'; + +import { CommentThreadForDrawer } from '@/comments/types/CommentThreadForDrawer'; +import { RightDrawerBody } from '@/ui/layout/right-drawer/components/RightDrawerBody'; +import { RightDrawerPage } from '@/ui/layout/right-drawer/components/RightDrawerPage'; +import { + SortOrder, + useGetCommentThreadsByTargetsQuery, +} from '~/generated/graphql'; + +import { CommentableEntity } from '../types/CommentableEntity'; + +import { CommentThread } from './CommentThread'; + +const StyledTopBar = styled.div` + align-items: center; + border-bottom: 1px solid ${({ theme }) => theme.border.color.light}; + color: ${({ theme }) => theme.font.color.secondary}; + display: flex; + flex-direction: row; + font-size: 13px; + justify-content: space-between; + min-height: 40px; + padding-left: 8px; + padding-right: 8px; +`; + +const StyledTopBarTitle = styled.div` + align-items: center; + font-weight: 500; + margin-right: ${({ theme }) => theme.spacing(1)}; +`; + +export function ShowPageComments({ + commentableEntity, +}: { + commentableEntity?: CommentableEntity; +}) { + const { data: queryResult } = useGetCommentThreadsByTargetsQuery({ + variables: { + commentThreadTargetIds: commentableEntity ? [commentableEntity.id] : [], + orderBy: [ + { + createdAt: SortOrder.Desc, + }, + ], + }, + }); + + const commentThreads: CommentThreadForDrawer[] = + queryResult?.findManyCommentThreads ?? []; + + return ( + + + Timeline + + + {commentThreads.map((commentThread) => ( + + ))} + + + ); +} diff --git a/front/src/modules/comments/services/create.ts b/front/src/modules/comments/services/create.ts index 83b721ab811..88b7b1029d7 100644 --- a/front/src/modules/comments/services/create.ts +++ b/front/src/modules/comments/services/create.ts @@ -38,7 +38,6 @@ export const CREATE_COMMENT_THREAD_WITH_COMMENT = gql` $commentText: String! $authorId: String! $createdAt: DateTime! - $commentId: String! $commentThreadTargetArray: [CommentThreadTargetCreateManyCommentThreadInput!]! ) { createOneCommentThread( @@ -46,16 +45,8 @@ export const CREATE_COMMENT_THREAD_WITH_COMMENT = gql` id: $commentThreadId createdAt: $createdAt updatedAt: $createdAt - comments: { - createMany: { - data: { - authorId: $authorId - id: $commentId - createdAt: $createdAt - body: $commentText - } - } - } + authorId: $authorId + body: $commentText commentThreadTargets: { createMany: { data: $commentThreadTargetArray, skipDuplicates: true } } diff --git a/front/src/modules/comments/services/select.ts b/front/src/modules/comments/services/select.ts index 694d1b15591..5653d3ca124 100644 --- a/front/src/modules/comments/services/select.ts +++ b/front/src/modules/comments/services/select.ts @@ -14,6 +14,9 @@ export const GET_COMMENT_THREADS_BY_TARGETS = gql` } ) { id + title + body + authorId comments { id body diff --git a/front/src/modules/companies/components/CompanyChip.tsx b/front/src/modules/companies/components/CompanyChip.tsx index a0f6a389cc6..9ae05d56efe 100644 --- a/front/src/modules/companies/components/CompanyChip.tsx +++ b/front/src/modules/companies/components/CompanyChip.tsx @@ -1,13 +1,15 @@ +import { Link } from 'react-router-dom'; import styled from '@emotion/styled'; import { Avatar } from '@/users/components/Avatar'; export type CompanyChipPropsType = { + id: string; name: string; picture?: string; }; -const StyledContainer = styled.span` +const StyledContainer = styled(Link)` align-items: center; background-color: ${({ theme }) => theme.background.tertiary}; border-radius: ${({ theme }) => theme.spacing(1)}; @@ -16,9 +18,10 @@ const StyledContainer = styled.span` gap: ${({ theme }) => theme.spacing(1)}; height: calc(20px - 2 * ${({ theme }) => theme.spacing(1)}); overflow: hidden; - padding: ${({ theme }) => theme.spacing(1)}; + text-decoration: none; + user-select: none; :hover { @@ -38,9 +41,9 @@ const StyledName = styled.span` white-space: nowrap; `; -function CompanyChip({ name, picture }: CompanyChipPropsType) { +function CompanyChip({ id, name, picture }: CompanyChipPropsType) { return ( - + {picture && ( { updateCompany({ variables: { diff --git a/front/src/modules/companies/components/__stories__/CompanyChip.stories.tsx b/front/src/modules/companies/components/__stories__/CompanyChip.stories.tsx index 0d5439a0a8d..6f5a50feff4 100644 --- a/front/src/modules/companies/components/__stories__/CompanyChip.stories.tsx +++ b/front/src/modules/companies/components/__stories__/CompanyChip.stories.tsx @@ -33,7 +33,8 @@ export const SmallName: Story = { render: getRenderWrapperForComponent( , @@ -44,6 +45,7 @@ export const BigName: Story = { render: getRenderWrapperForComponent( diff --git a/front/src/modules/companies/services/index.ts b/front/src/modules/companies/services/index.ts index 18c6c2f7dd7..41161a6b18a 100644 --- a/front/src/modules/companies/services/index.ts +++ b/front/src/modules/companies/services/index.ts @@ -1,2 +1,3 @@ export * from './select'; +export * from './show'; export * from './update'; diff --git a/front/src/modules/companies/services/show.ts b/front/src/modules/companies/services/show.ts new file mode 100644 index 00000000000..1370b760b83 --- /dev/null +++ b/front/src/modules/companies/services/show.ts @@ -0,0 +1,26 @@ +import { gql } from '@apollo/client'; + +import { useGetCompanyQuery } from '~/generated/graphql'; + +export const GET_COMPANY = gql` + query GetCompany($id: String!) { + findUniqueCompany(id: $id) { + id + domainName + name + createdAt + address + employees + _commentCount + accountOwner { + id + email + displayName + } + } + } +`; + +export function useCompanyQuery(id: string) { + return useGetCompanyQuery({ variables: { id } }); +} diff --git a/front/src/modules/people/components/PeopleCompanyCell.tsx b/front/src/modules/people/components/PeopleCompanyCell.tsx index 6b34efba714..c55625831f6 100644 --- a/front/src/modules/people/components/PeopleCompanyCell.tsx +++ b/front/src/modules/people/components/PeopleCompanyCell.tsx @@ -28,6 +28,7 @@ export function PeopleCompanyCell({ people }: OwnProps) { } nonEditModeContent={ diff --git a/front/src/modules/ui/components/editable-cell/types/EditableChip.tsx b/front/src/modules/ui/components/editable-cell/types/EditableChip.tsx index 3c228b28016..70341cf78c6 100644 --- a/front/src/modules/ui/components/editable-cell/types/EditableChip.tsx +++ b/front/src/modules/ui/components/editable-cell/types/EditableChip.tsx @@ -6,12 +6,14 @@ import { textInputStyle } from '@/ui/themes/effects'; import { EditableCell } from '../EditableCell'; export type EditableChipProps = { + id: string; placeholder?: string; value: string; picture: string; changeHandler: (updated: string) => void; editModeHorizontalAlign?: 'left' | 'right'; ChipComponent: ComponentType<{ + id: string; name: string; picture: string; isOverlapped?: boolean; @@ -40,6 +42,7 @@ const RightContainer = styled.div` `; function EditableChip({ + id, value, placeholder, changeHandler, @@ -74,7 +77,7 @@ function EditableChip({ } nonEditModeContent={ - + {rightEndContents && rightEndContents.length > 0 && diff --git a/front/src/modules/ui/components/property-box/PropertyBox.tsx b/front/src/modules/ui/components/property-box/PropertyBox.tsx new file mode 100644 index 00000000000..87d675f26f7 --- /dev/null +++ b/front/src/modules/ui/components/property-box/PropertyBox.tsx @@ -0,0 +1,32 @@ +import styled from '@emotion/styled'; + +const StyledCompanyPropertyBox = styled.div` + align-items: flex-start; + align-self: stretch; + display: flex; + flex-direction: column; + gap: 8px; + padding: 0px 12px; +`; + +const StyledCompanyPropertyBoxContainer = styled.div` + align-items: flex-start; + align-self: stretch; + background: ${({ theme }) => theme.background.secondary}; + border: 1px solid ${({ theme }) => theme.border.color.medium}; + border-radius: 4px; + display: flex; + flex-direction: column; + gap: 2px; + padding: 4px 12px; +`; + +export function PropertyBox({ children }: { children: JSX.Element }) { + return ( + + + {children} + + + ); +} diff --git a/front/src/modules/ui/components/property-box/PropertyBoxItem.tsx b/front/src/modules/ui/components/property-box/PropertyBoxItem.tsx new file mode 100644 index 00000000000..1cbcb2ab391 --- /dev/null +++ b/front/src/modules/ui/components/property-box/PropertyBoxItem.tsx @@ -0,0 +1,73 @@ +import { ReactNode } from 'react'; +import styled from '@emotion/styled'; + +const StyledPropertyBoxItem = styled.div` + align-items: flex-start; + align-self: stretch; + display: flex; + gap: 4px; +`; + +const StyledIconContainer = styled.div` + align-items: center; + display: flex; + gap: 4px; + min-height: 32px; + + svg { + align-items: center; + color: ${({ theme }) => theme.font.color.tertiary}; + display: flex; + gap: 10px; + height: 16px; + justify-content: center; + width: 16px; + } +`; + +const StyledLabelContainer = styled.div` + align-content: flex-start; + align-items: center; + color: ${({ theme }) => theme.font.color.primary}; + display: flex; + flex: 1 0 0; + flex-wrap: wrap; + gap: 4px; + padding: 6px; + + div { + display: flex; + height: 20px; + padding: 0px 4px; + align-items: center; + gap: 4px; + } + + a { + color: ${({ theme }) => theme.font.color.primary}; + } +`; + +export function PropertyBoxItem({ + icon, + label, + value, + link, +}: { + icon: ReactNode; + label?: string; + value: string; + link?: string; +}) { + return ( + +
+ {icon} + {label} +
+ +
{link ? {value} : <>{value}}
+ + + ); +} diff --git a/front/src/modules/ui/icons/index.ts b/front/src/modules/ui/icons/index.ts index 94af123f820..e580d2e4c00 100644 --- a/front/src/modules/ui/icons/index.ts +++ b/front/src/modules/ui/icons/index.ts @@ -30,3 +30,4 @@ export { IconArrowUpRight } from '@tabler/icons-react'; export { IconBrandGoogle } from '@tabler/icons-react'; export { IconUpload } from '@tabler/icons-react'; export { IconFileUpload } from '@tabler/icons-react'; +export { IconChevronsRight } from '@tabler/icons-react'; diff --git a/front/src/modules/ui/layout/containers/ContentContainer.tsx b/front/src/modules/ui/layout/containers/ContentContainer.tsx index 4cbb3a0f0d6..304db8a6c10 100644 --- a/front/src/modules/ui/layout/containers/ContentContainer.tsx +++ b/front/src/modules/ui/layout/containers/ContentContainer.tsx @@ -30,13 +30,7 @@ type LeftContainerProps = { const LeftContainer = styled.div` display: flex; position: relative; - width: calc( - 100% - - ${(props) => - props.isRightDrawerOpen - ? `${props.theme.rightDrawerWidth} - ${props.theme.spacing(2)}` - : '0px'} - ); + width: 100%; `; export function ContentContainer({ children, topMargin }: OwnProps) { diff --git a/front/src/modules/ui/layout/right-drawer/components/RightDrawer.tsx b/front/src/modules/ui/layout/right-drawer/components/RightDrawer.tsx index 78292cff5c7..b358776b41a 100644 --- a/front/src/modules/ui/layout/right-drawer/components/RightDrawer.tsx +++ b/front/src/modules/ui/layout/right-drawer/components/RightDrawer.tsx @@ -11,17 +11,40 @@ import { rightDrawerPageState } from '../states/rightDrawerPageState'; import { RightDrawerRouter } from './RightDrawerRouter'; +const ClickableBackground = styled.div` + backdrop-filter: blur(1px); + height: 100%; + left: 0; + position: fixed; + top: 0; + width: 100%; + z-index: 9999; +`; + +const StyledContainer = styled.div` + background: white; + height: 100%; + overflow-x: hidden; + position: fixed; + right: 0; + top: 0; + transition: width 0.5s; + width: ${({ theme }) => theme.rightDrawerWidth}; + z-index: 10000; +`; const StyledRightDrawer = styled.div` display: flex; flex-direction: row; - width: ${({ theme }) => theme.rightDrawerWidth}; + width: 100%; `; export function RightDrawer() { const [, setCaptureHotkeyTypeInFocus] = useRecoilState( captureHotkeyTypeInFocusState, ); - const [isRightDrawerOpen] = useRecoilState(isRightDrawerOpenState); + const [isRightDrawerOpen, setIsRightDrawerOpen] = useRecoilState( + isRightDrawerOpenState, + ); const [rightDrawerPage] = useRecoilState(rightDrawerPageState); useEffect(() => { setCaptureHotkeyTypeInFocus(isRightDrawerOpen); @@ -31,10 +54,15 @@ export function RightDrawer() { } return ( - - - - - + <> + setIsRightDrawerOpen(false)} /> + + + + + + + + ); } diff --git a/front/src/modules/ui/layout/right-drawer/components/RightDrawerTopBar.tsx b/front/src/modules/ui/layout/right-drawer/components/RightDrawerTopBar.tsx index 2eb4ea65067..b89dede43a2 100644 --- a/front/src/modules/ui/layout/right-drawer/components/RightDrawerTopBar.tsx +++ b/front/src/modules/ui/layout/right-drawer/components/RightDrawerTopBar.tsx @@ -1,5 +1,7 @@ import styled from '@emotion/styled'; +import { Button } from '@/ui/components/buttons/Button'; + import { RightDrawerTopBarCloseButton } from './RightDrawerTopBarCloseButton'; const StyledRightDrawerTopBar = styled.div` @@ -28,8 +30,9 @@ export function RightDrawerTopBar({ }) { return ( - {title} + {title} +