feat: rename comment thread into activity (#939)

* feat: rename commentThread into activity server

* feat: rename commentThread into activity front

* feat: migration only create tables


feat: migration only create tables

* Update activities

* fix: rebase partial fix

* fix: all rebase problems and drop activity target alter

* fix: lint

* Update migration

* Update migration

* Fix conflicts

* Fix conflicts

---------

Co-authored-by: Charles Bochet <charles@twenty.com>

front/src/modules/ui/button/components/DropdownButton.tsx

@@ -0,0 +1,144 @@
+import React, { useEffect, useState } from 'react';
+import styled from '@emotion/styled';
+
+import { IconChevronDown } from '@/ui/icon/index';
+
+type ButtonProps = React.ComponentProps<'button'>;
+
+export type DropdownOptionType = {
+  key: string;
+  label: string;
+  icon: React.ReactNode;
+};
+
+type OwnProps = {
+  options: DropdownOptionType[];
+  selectedOptionKey?: string;
+  onSelection: (value: DropdownOptionType) => void;
+} & ButtonProps;
+
+const StyledButton = styled.button<ButtonProps & { isOpen: boolean }>`
+  align-items: center;
+  background: ${({ theme }) => theme.background.tertiary};
+  border: 1px solid ${({ theme }) => theme.border.color.medium};
+  border-bottom-left-radius: ${({ isOpen, theme }) =>
+    isOpen ? 0 : theme.border.radius.sm};
+  border-bottom-right-radius: ${({ isOpen, theme }) =>
+    isOpen ? 0 : theme.border.radius.sm};
+  border-top-left-radius: ${({ theme }) => theme.border.radius.sm};
+  border-top-right-radius: ${({ theme }) => theme.border.radius.sm};
+  color: ${({ theme }) => theme.font.color.secondary};
+  cursor: pointer;
+  display: flex;
+  gap: ${({ theme }) => theme.spacing(2)};
+  padding: ${({ theme }) => theme.spacing(1)} ${({ theme }) => theme.spacing(2)};
+
+  svg {
+    align-items: center;
+    display: flex;
+    height: 14px;
+    justify-content: center;
+    width: 14px;
+  }
+`;
+
+const StyledDropdownItem = styled.button<ButtonProps>`
+  align-items: center;
+  background: ${({ theme }) => theme.background.tertiary};
+  border: 1px solid ${({ theme }) => theme.border.color.medium};
+  border-radius: ${({ theme }) => theme.border.radius.sm};
+  border-top: none;
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+  color: ${({ theme }) => theme.font.color.secondary};
+  cursor: pointer;
+  display: flex;
+  gap: ${({ theme }) => theme.spacing(2)};
+  padding: ${({ theme }) => theme.spacing(1)} ${({ theme }) => theme.spacing(2)};
+
+  svg {
+    align-items: center;
+    display: flex;
+    height: 14px;
+    justify-content: center;
+    width: 14px;
+  }
+`;
+
+const DropdownContainer = styled.div`
+  position: relative;
+`;
+
+const DropdownMenu = styled.div`
+  display: flex;
+  flex-direction: column;
+  position: absolute;
+  width: 100%;
+`;
+
+export function DropdownButton({
+  options,
+  selectedOptionKey,
+  onSelection,
+  ...buttonProps
+}: OwnProps) {
+  const [isOpen, setIsOpen] = useState(false);
+  const [selectedOption, setSelectedOption] = useState<
+    DropdownOptionType | undefined
+  >(undefined);
+
+  useEffect(() => {
+    if (selectedOptionKey) {
+      const option = options.find((option) => option.key === selectedOptionKey);
+      setSelectedOption(option);
+    } else {
+      setSelectedOption(options[0]);
+    }
+  }, [selectedOptionKey, options]);
+
+  if (!options.length) {
+    throw new Error('You must provide at least one option.');
+  }
+
+  const handleSelect =
+    (option: DropdownOptionType) =>
+    (event: React.MouseEvent<HTMLButtonElement>) => {
+      event.preventDefault();
+      onSelection(option);
+      setSelectedOption(option);
+      setIsOpen(false);
+    };
+
+  return (
+    <>
+      {selectedOption && (
+        <DropdownContainer>
+          <StyledButton
+            onClick={() => setIsOpen(!isOpen)}
+            {...buttonProps}
+            isOpen={isOpen}
+          >
+            {selectedOption.icon}
+            {selectedOption.label}
+            {options.length > 1 && <IconChevronDown />}
+          </StyledButton>
+          {isOpen && (
+            <DropdownMenu>
+              {options
+                .filter((option) => option.label !== selectedOption.label)
+                .map((option, index) => (
+                  <StyledDropdownItem
+                    key={index}
+                    onClick={handleSelect(option)}
+                  >
+                    {option.icon}
+                    {option.label}
+                  </StyledDropdownItem>
+                ))}
+            </DropdownMenu>
+          )}
+        </DropdownContainer>
+      )}
+    </>
+  );
+}

front/src/modules/ui/right-drawer/components/RightDrawerRouter.tsx

@@ -1,7 +1,7 @@
 import { useRecoilState } from 'recoil';
 
-import { RightDrawerCreateCommentThread } from '@/activities/right-drawer/components/create/RightDrawerCreateCommentThread';
-import { RightDrawerEditCommentThread } from '@/activities/right-drawer/components/edit/RightDrawerEditCommentThread';
+import { RightDrawerCreateActivity } from '@/activities/right-drawer/components/create/RightDrawerCreateActivity';
+import { RightDrawerEditActivity } from '@/activities/right-drawer/components/edit/RightDrawerEditActivity';
 import { RightDrawerTimeline } from '@/activities/right-drawer/components/RightDrawerTimeline';
 import { isDefined } from '~/utils/isDefined';
 
@@ -18,10 +18,10 @@ export function RightDrawerRouter() {
   switch (rightDrawerPage) {
     case RightDrawerPages.Timeline:
       return <RightDrawerTimeline />;
-    case RightDrawerPages.CreateCommentThread:
-      return <RightDrawerCreateCommentThread />;
-    case RightDrawerPages.EditCommentThread:
-      return <RightDrawerEditCommentThread />;
+    case RightDrawerPages.CreateActivity:
+      return <RightDrawerCreateActivity />;
+    case RightDrawerPages.EditActivity:
+      return <RightDrawerEditActivity />;
     default:
       return <></>;
   }

front/src/modules/ui/right-drawer/types/RightDrawerPages.ts

@@ -1,5 +1,5 @@
 export enum RightDrawerPages {
   Timeline = 'timeline',
-  CreateCommentThread = 'create-comment-thread',
-  EditCommentThread = 'edit-comment-thread',
+  CreateActivity = 'create-activity',
+  EditActivity = 'edit-activity',
 }

front/src/modules/ui/table/editable-cell/types/EditableChip.tsx

@@ -9,7 +9,7 @@ export type EditableChipProps = {
   value: string;
   editModeHorizontalAlign?: 'left' | 'right';
   ChipComponent: React.ReactNode;
-  commentThreadCount?: number;
+  activityCount?: number;
   onCommentClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
   rightEndContents?: ReactNode[];
   onSubmit?: (newValue: string) => void;