[Omn-190] - [Settings View] - Labels

packages/api/package.json

@@ -121,6 +121,7 @@
     "node": "14.18.x"
   },
   "volta": {
-    "node": "14.18.x"
+    "node": "14.18.1",
+    "yarn": "1.22.18"
   }
 }

packages/api/src/generated/graphql.ts

@@ -792,6 +792,7 @@ export type Mutation = {
   signup: SignupResult;
   updateHighlight: UpdateHighlightResult;
   updateHighlightReply: UpdateHighlightReplyResult;
+  updateLabel: UpdateLabelResult;
   updateLinkShareInfo: UpdateLinkShareInfoResult;
   updateReminder: UpdateReminderResult;
   updateSharedComment: UpdateSharedCommentResult;
@@ -966,6 +967,11 @@ export type MutationUpdateHighlightReplyArgs = {
 };
 
 
+export type MutationUpdateLabelArgs = {
+  input: UpdateLabelInput;
+};
+
+
 export type MutationUpdateLinkShareInfoArgs = {
   input: UpdateLinkShareInfoInput;
 };
@@ -1577,6 +1583,32 @@ export type UpdateHighlightSuccess = {
   highlight: Highlight;
 };
 
+export type UpdateLabelError = {
+  __typename?: 'UpdateLabelError';
+  errorCodes: Array<UpdateLabelErrorCode>;
+};
+
+export enum UpdateLabelErrorCode {
+  BadRequest = 'BAD_REQUEST',
+  Forbidden = 'FORBIDDEN',
+  NotFound = 'NOT_FOUND',
+  Unauthorized = 'UNAUTHORIZED'
+}
+
+export type UpdateLabelInput = {
+  color: Scalars['String'];
+  description?: InputMaybe<Scalars['String']>;
+  labelId: Scalars['ID'];
+  name: Scalars['String'];
+};
+
+export type UpdateLabelResult = UpdateLabelError | UpdateLabelSuccess;
+
+export type UpdateLabelSuccess = {
+  __typename?: 'UpdateLabelSuccess';
+  label: Label;
+};
+
 export type UpdateLinkShareInfoError = {
   __typename?: 'UpdateLinkShareInfoError';
   errorCodes: Array<UpdateLinkShareInfoErrorCode>;
@@ -2095,6 +2127,11 @@ export type ResolversTypes = {
   UpdateHighlightReplySuccess: ResolverTypeWrapper<UpdateHighlightReplySuccess>;
   UpdateHighlightResult: ResolversTypes['UpdateHighlightError'] | ResolversTypes['UpdateHighlightSuccess'];
   UpdateHighlightSuccess: ResolverTypeWrapper<UpdateHighlightSuccess>;
+  UpdateLabelError: ResolverTypeWrapper<UpdateLabelError>;
+  UpdateLabelErrorCode: UpdateLabelErrorCode;
+  UpdateLabelInput: UpdateLabelInput;
+  UpdateLabelResult: ResolversTypes['UpdateLabelError'] | ResolversTypes['UpdateLabelSuccess'];
+  UpdateLabelSuccess: ResolverTypeWrapper<UpdateLabelSuccess>;
   UpdateLinkShareInfoError: ResolverTypeWrapper<UpdateLinkShareInfoError>;
   UpdateLinkShareInfoErrorCode: UpdateLinkShareInfoErrorCode;
   UpdateLinkShareInfoInput: UpdateLinkShareInfoInput;
@@ -2326,6 +2363,10 @@ export type ResolversParentTypes = {
   UpdateHighlightReplySuccess: UpdateHighlightReplySuccess;
   UpdateHighlightResult: ResolversParentTypes['UpdateHighlightError'] | ResolversParentTypes['UpdateHighlightSuccess'];
   UpdateHighlightSuccess: UpdateHighlightSuccess;
+  UpdateLabelError: UpdateLabelError;
+  UpdateLabelInput: UpdateLabelInput;
+  UpdateLabelResult: ResolversParentTypes['UpdateLabelError'] | ResolversParentTypes['UpdateLabelSuccess'];
+  UpdateLabelSuccess: UpdateLabelSuccess;
   UpdateLinkShareInfoError: UpdateLinkShareInfoError;
   UpdateLinkShareInfoInput: UpdateLinkShareInfoInput;
   UpdateLinkShareInfoResult: ResolversParentTypes['UpdateLinkShareInfoError'] | ResolversParentTypes['UpdateLinkShareInfoSuccess'];
@@ -2937,6 +2978,7 @@ export type MutationResolvers<ContextType = ResolverContext, ParentType extends
   signup?: Resolver<ResolversTypes['SignupResult'], ParentType, ContextType, RequireFields<MutationSignupArgs, 'input'>>;
   updateHighlight?: Resolver<ResolversTypes['UpdateHighlightResult'], ParentType, ContextType, RequireFields<MutationUpdateHighlightArgs, 'input'>>;
   updateHighlightReply?: Resolver<ResolversTypes['UpdateHighlightReplyResult'], ParentType, ContextType, RequireFields<MutationUpdateHighlightReplyArgs, 'input'>>;
+  updateLabel?: Resolver<ResolversTypes['UpdateLabelResult'], ParentType, ContextType, RequireFields<MutationUpdateLabelArgs, 'input'>>;
   updateLinkShareInfo?: Resolver<ResolversTypes['UpdateLinkShareInfoResult'], ParentType, ContextType, RequireFields<MutationUpdateLinkShareInfoArgs, 'input'>>;
   updateReminder?: Resolver<ResolversTypes['UpdateReminderResult'], ParentType, ContextType, RequireFields<MutationUpdateReminderArgs, 'input'>>;
   updateSharedComment?: Resolver<ResolversTypes['UpdateSharedCommentResult'], ParentType, ContextType, RequireFields<MutationUpdateSharedCommentArgs, 'input'>>;
@@ -3257,6 +3299,20 @@ export type UpdateHighlightSuccessResolvers<ContextType = ResolverContext, Paren
   __isTypeOf?: IsTypeOfResolverFn<ParentType, ContextType>;
 };
 
+export type UpdateLabelErrorResolvers<ContextType = ResolverContext, ParentType extends ResolversParentTypes['UpdateLabelError'] = ResolversParentTypes['UpdateLabelError']> = {
+  errorCodes?: Resolver<Array<ResolversTypes['UpdateLabelErrorCode']>, ParentType, ContextType>;
+  __isTypeOf?: IsTypeOfResolverFn<ParentType, ContextType>;
+};
+
+export type UpdateLabelResultResolvers<ContextType = ResolverContext, ParentType extends ResolversParentTypes['UpdateLabelResult'] = ResolversParentTypes['UpdateLabelResult']> = {
+  __resolveType: TypeResolveFn<'UpdateLabelError' | 'UpdateLabelSuccess', ParentType, ContextType>;
+};
+
+export type UpdateLabelSuccessResolvers<ContextType = ResolverContext, ParentType extends ResolversParentTypes['UpdateLabelSuccess'] = ResolversParentTypes['UpdateLabelSuccess']> = {
+  label?: Resolver<ResolversTypes['Label'], ParentType, ContextType>;
+  __isTypeOf?: IsTypeOfResolverFn<ParentType, ContextType>;
+};
+
 export type UpdateLinkShareInfoErrorResolvers<ContextType = ResolverContext, ParentType extends ResolversParentTypes['UpdateLinkShareInfoError'] = ResolversParentTypes['UpdateLinkShareInfoError']> = {
   errorCodes?: Resolver<Array<ResolversTypes['UpdateLinkShareInfoErrorCode']>, ParentType, ContextType>;
   __isTypeOf?: IsTypeOfResolverFn<ParentType, ContextType>;
@@ -3551,6 +3607,9 @@ export type Resolvers<ContextType = ResolverContext> = {
   UpdateHighlightReplySuccess?: UpdateHighlightReplySuccessResolvers<ContextType>;
   UpdateHighlightResult?: UpdateHighlightResultResolvers<ContextType>;
   UpdateHighlightSuccess?: UpdateHighlightSuccessResolvers<ContextType>;
+  UpdateLabelError?: UpdateLabelErrorResolvers<ContextType>;
+  UpdateLabelResult?: UpdateLabelResultResolvers<ContextType>;
+  UpdateLabelSuccess?: UpdateLabelSuccessResolvers<ContextType>;
   UpdateLinkShareInfoError?: UpdateLinkShareInfoErrorResolvers<ContextType>;
   UpdateLinkShareInfoResult?: UpdateLinkShareInfoResultResolvers<ContextType>;
   UpdateLinkShareInfoSuccess?: UpdateLinkShareInfoSuccessResolvers<ContextType>;

packages/api/src/generated/schema.graphql

@@ -705,6 +705,7 @@ type Mutation {
   signup(input: SignupInput!): SignupResult!
   updateHighlight(input: UpdateHighlightInput!): UpdateHighlightResult!
   updateHighlightReply(input: UpdateHighlightReplyInput!): UpdateHighlightReplyResult!
+  updateLabel(input: UpdateLabelInput!): UpdateLabelResult!
   updateLinkShareInfo(input: UpdateLinkShareInfoInput!): UpdateLinkShareInfoResult!
   updateReminder(input: UpdateReminderInput!): UpdateReminderResult!
   updateSharedComment(input: UpdateSharedCommentInput!): UpdateSharedCommentResult!
@@ -1194,6 +1195,30 @@ type UpdateHighlightSuccess {
   highlight: Highlight!
 }
 
+type UpdateLabelError {
+  errorCodes: [UpdateLabelErrorCode!]!
+}
+
+enum UpdateLabelErrorCode {
+  BAD_REQUEST
+  FORBIDDEN
+  NOT_FOUND
+  UNAUTHORIZED
+}
+
+input UpdateLabelInput {
+  color: String!
+  description: String
+  labelId: ID!
+  name: String!
+}
+
+union UpdateLabelResult = UpdateLabelError | UpdateLabelSuccess
+
+type UpdateLabelSuccess {
+  label: Label!
+}
+
 type UpdateLinkShareInfoError {
   errorCodes: [UpdateLinkShareInfoErrorCode!]!
 }

packages/api/src/resolvers/function_resolvers.ts

@@ -71,6 +71,7 @@ import {
   updateUserResolver,
   uploadFileRequestResolver,
   validateUsernameResolver,
+  updateLabelResolver,
 } from './index'
 import { getShareInfoForArticle } from '../datalayer/links/share_info'
 import {
@@ -132,6 +133,7 @@ export const functionResolvers = {
     deleteReminder: deleteReminderResolver,
     setDeviceToken: setDeviceTokenResolver,
     createLabel: createLabelResolver,
+    updateLabel: updateLabelResolver,
     deleteLabel: deleteLabelResolver,
     login: loginResolver,
     signup: signupResolver,

packages/api/src/resolvers/labels/index.ts

@@ -12,9 +12,13 @@ import {
   MutationCreateLabelArgs,
   MutationDeleteLabelArgs,
   MutationSetLabelsArgs,
+  MutationUpdateLabelArgs,
   SetLabelsError,
   SetLabelsErrorCode,
   SetLabelsSuccess,
+  UpdateLabelError,
+  UpdateLabelErrorCode,
+  UpdateLabelSuccess,
 } from '../../generated/graphql'
 import { analytics } from '../../utils/analytics'
 import { env } from '../../env'
@@ -42,6 +46,11 @@ export const labelsResolver = authorized<LabelsSuccess, LabelsError>(
       const user = await getRepository(User).findOne({
         where: { id: uid },
         relations: ['labels'],
+        order: {
+          labels: {
+            createdAt: 'DESC',
+          },
+        },
       })
       if (!user) {
         return {
@@ -249,3 +258,67 @@ export const setLabelsResolver = authorized<
     }
   }
 })
+
+export const updateLabelResolver = authorized<
+  UpdateLabelSuccess,
+  UpdateLabelError,
+  MutationUpdateLabelArgs
+>(async (_, { input }, { claims: { uid }, log }) => {
+  log.info('updateLabelResolver')
+
+  try {
+    const { name, color, description, labelId } = input
+    const user = await getRepository(User).findOneBy({ id: uid })
+    if (!user) {
+      return {
+        errorCodes: [UpdateLabelErrorCode.Unauthorized],
+      }
+    }
+
+    const label = await getRepository(Label).findOne({
+      where: { id: labelId },
+      relations: ['user'],
+    })
+    if (!label) {
+      return {
+        errorCodes: [UpdateLabelErrorCode.NotFound],
+      }
+    }
+
+    const result = await AppDataSource.transaction(async (t) => {
+      await setClaims(t, uid)
+      return await t.getRepository(Label).update(
+        { id: labelId },
+        {
+          name: name,
+          description: description || undefined,
+          color: color,
+        }
+      )
+    })
+
+    log.info('Updating a label', {
+      result,
+      labels: {
+        source: 'resolver',
+        resolver: 'updateLabelResolver',
+      },
+    })
+
+    if (!result) {
+      log.info('failed to update')
+      return {
+        errorCodes: [UpdateLabelErrorCode.BadRequest],
+      }
+    }
+
+    log.info('updated successfully')
+
+    return { label: label }
+  } catch (error) {
+    log.error('error updating label', error)
+    return {
+      errorCodes: [UpdateLabelErrorCode.BadRequest],
+    }
+  }
+})

packages/api/src/schema.ts

@@ -1310,6 +1310,30 @@ const schema = gql`
 
   union DeleteLabelResult = DeleteLabelSuccess | DeleteLabelError
 
+  input UpdateLabelInput {
+    labelId: ID!
+    color: String!
+    description: String
+    name: String!
+  }
+
+  type UpdateLabelSuccess {
+    label: Label!
+  }
+
+  enum UpdateLabelErrorCode {
+    UNAUTHORIZED
+    BAD_REQUEST
+    NOT_FOUND
+    FORBIDDEN
+  }
+
+  type UpdateLabelError {
+    errorCodes: [UpdateLabelErrorCode!]!
+  }
+
+  union UpdateLabelResult = UpdateLabelSuccess | UpdateLabelError
+
   input LoginInput {
     password: String!
     email: String!
@@ -1410,6 +1434,7 @@ const schema = gql`
     deleteReminder(id: ID!): DeleteReminderResult!
     setDeviceToken(input: SetDeviceTokenInput!): SetDeviceTokenResult!
     createLabel(input: CreateLabelInput!): CreateLabelResult!
+    updateLabel(input: UpdateLabelInput!): UpdateLabelResult!
     deleteLabel(id: ID!): DeleteLabelResult!
     login(input: LoginInput!): LoginResult!
     signup(input: SignupInput!): SignupResult!

packages/api/test/resolvers/labels.test.ts

@@ -80,7 +80,7 @@ describe('Labels API', () => {
         user: { id: user.id },
       })
       expect(res.body.data.labels.labels).to.eql(
-        labels.map((label) => ({
+        labels.reverse().map((label) => ({
           id: label.id,
           name: label.name,
           color: label.color,

packages/web/components/elements/DropdownElements.tsx

@@ -8,6 +8,7 @@ import {
   Arrow,
   Label,
 } from '@radix-ui/react-dropdown-menu'
+import { CSS } from '@stitches/react';
 import { styled } from './../tokens/stitches.config'
 
 const itemStyles = {
@@ -43,7 +44,7 @@ const StyledTriggerItem = styled(TriggerItem, {
   ...itemStyles,
 })
 
-const DropdownContent = styled(Content, {
+export const DropdownContent = styled(Content, {
   minWidth: 130,
   backgroundColor: '$grayBg',
   borderRadius: '0.5em',
@@ -70,12 +71,16 @@ type DropdownProps = {
   showArrow?: boolean
   triggerElement: React.ReactNode
   children: React.ReactNode
+  styledArrow?: boolean
   align?: DropdownAlignment
+  disabled?: boolean
+  css?: CSS
 }
 
 export const DropdownSeparator = styled(Separator, {
-  height: 0,
+  height: '1px',
   margin: 0,
+  backgroundColor: '$grayBorder',
 })
 
 type DropdownOptionProps = {
@@ -91,6 +96,7 @@ export function DropdownOption(props: DropdownOptionProps): JSX.Element {
       <StyledItem onSelect={props.onSelect}>
         {props.title ?? props.children}
       </StyledItem>
+      {props.hideSeparator ? null : <DropdownSeparator />}
     </>
   )
 }
@@ -101,12 +107,15 @@ export function Dropdown({
   triggerElement,
   labelText,
   showArrow = true,
+  disabled = false,
+  css
 }: DropdownProps): JSX.Element {
   return (
     <Root modal={false}>
-      <DropdownTrigger>{triggerElement}</DropdownTrigger>
+      <DropdownTrigger disabled={disabled}>{triggerElement}</DropdownTrigger>
       <DropdownContent
-        onInteractOutside={() => {
+        css={css}
+        onInteractOutside={(event) => {
           // remove focus from dropdown
           ;(document.activeElement as HTMLElement).blur()
         }}