feat: update goal management

ui/dashboard/public/locales/en/common.json

@@ -139,7 +139,6 @@
   "new-push-subtitle": "Every time a feature flag is updated, a push notification is sent to the SDK client allowing you to update the SDK cache in real-time.",
   "tags": "Tags",
   "fcm-api-key": "Firebase Service Account",
-<<<<<<< HEAD
   "goals": "Goals",
   "goals-subtitle": "You can set goals and use them to start experiments within your feature flags",
   "new-goal": "New Goal",
@@ -151,8 +150,7 @@
   "archive-goal": "Archive Goal",
   "delete-goal": "Delete Goal",
   "goal-connections": "Goal Connections",
-  "in-use": "In Use"
-=======
+  "in-use": "In Use",
   "user-segments": "User Segments",
   "user-segments-subtitle": "You can create segments to help you start testing feature flags for specifics type of users",
   "new-user-segment": "New User Segment",
@@ -161,7 +159,5 @@
   "connections": "Connections",
   "status": "Status",
   "flags-connected": "Flags Connected",
-  "flags-connected-desc": "This user segment is currently connected to the following feature flags:",
-  "close": "Close"
->>>>>>> main
+  "flags-connected-desc": "This user segment is currently connected to the following feature flags:"
 }

ui/dashboard/public/locales/en/form.json

@@ -46,28 +46,29 @@
     "account": "Get notified when someone adds or updates an account",
     "notification": "Get notified when someone adds or updates a notification"
   },
-<<<<<<< HEAD
   "upload-files": "Drop your file here, or <underline>{{text}}</underline>",
   "accept-file-types": "{{type}}",
   "goal-id": "Goal ID",
   "placeholder-goal-id": "Enter Goal ID",
   "connections": "Connections",
   "experiments": "Experiments",
   "operations": "Operations",
+  "experiment_one": "{{count}} Experiment",
+  "experiment_other": "{{count}} Experiments",
+  "operation_one": "{{count}} Operation",
+  "operation_other": "{{count}} Operations",
   "goal-details": {
     "archive-desc": "This goal will be archived across all environments and will only appear in your list when filtered for",
     "delete-desc": "Permanently delete this goal across all environments in this project",
-    "delete-warning-desc": "You cannot delete a goal when your goal has connections"
-  }
-=======
+    "delete-warning-desc": "You cannot delete a goal when it has connections.",
+    "archive-warning-desc": "You cannot archive a goal when it has connections.",
+    "archive-info-desc": "This goal will be archived and will only show on the list page when clicking on the Archived tab"
+  },
   "placeholder-search-user-segments": "Search user segment",
   "list-of-users-ids": "List Of Users IDs",
   "browse-files": "Browse files",
   "enter-user-ids": "Enter user IDs",
-  "upload-files": "Drop your files here, or <underline>{{text}}</underline>",
   "update-user-segment": "Updating this field will replace the current list with the new one.",
   "update-user-segment-warning": "<p>The user ID list can't be updated because {{count}} flag is using it. Remove the segment from the flag before updating it.</p>",
-  "placeholder-enter-user-ids": "Enter IDs separated by commas (E.g., userId1, userId2, userId3,...)",
-  "accept-file-types": "{{type}}"
->>>>>>> main
+  "placeholder-enter-user-ids": "Enter IDs separated by commas (E.g., userId1, userId2, userId3,...)"
 }

ui/dashboard/public/locales/en/table.json

@@ -25,15 +25,12 @@
     "edit-push": "Edit Push",
     "disable-push": "Disable Push",
     "enable-push": "Enable Push",
-<<<<<<< HEAD
     "delete-goal": "Delete Goal",
     "archive-goal": "Archive Goal",
-    "unarchive-goal": "Unarchive Goal"
-=======
+    "unarchive-goal": "Unarchive Goal",
     "edit-segment": "Edit User Segment",
     "delete-segment": "Delete User Segment",
     "download-segment": "Download User Segment"
->>>>>>> main
   },
   "empty": {
     "project-title": "No registered projects",
@@ -51,13 +48,10 @@
     "notification-desc": "There are no registered notifications. Add a new one to start managing.",
     "push-title": "No registered pushes",
     "push-desc": "There are no registered pushes. Add a new one to start managing.",
-<<<<<<< HEAD
     "goal-title": "No registered goals",
-    "goal-desc": "There are no registered goals. Add a new one to start managing."
-=======
+    "goal-desc": "There are no registered goals. Add a new one to start managing.",
     "user-segments-title": "No registered user segments",
     "user-segments-desc": "There are no registered user segments. Add a new one to start managing."
->>>>>>> main
   },
   "organization": {
     "confirm-archive-desc": "The organization \"<bold>{{name}}</bold>\" will be archived. Are you sure you want to proceed?",
@@ -84,7 +78,6 @@
     "confirm-enable-desc": "The Push \"<bold>{{name}}</bold>\" will be enabled. Are you sure you want to proceed?",
     "confirm-disable-desc": "The Push \"<bold>{{name}}</bold>\" will be disabled. Are you sure you want to proceed?"
   },
-<<<<<<< HEAD
   "goals": {
     "connections": "Connections",
     "experiment": "Experiment",
@@ -93,9 +86,8 @@
     "delete-goal-desc": "The goal \"<bold>{{name}}</bold>\" will be deleted permanently. Are you sure you want to proceed?",
     "confirm-archive-desc": "The goal \"<bold>{{name}}</bold>\" will be archived. Are you sure you want to proceed?",
     "confirm-unarchive-desc": "The goal \"<bold>{{name}}</bold>\" will be unarchived. Are you sure you want to proceed?"
-=======
+  },
   "user-segment": {
     "delete-user-segment-desc": "The <bold>{{name}}</bold> is going to be deleted permanently. Are you sure you want to proceed?"
->>>>>>> main
   }
 }

ui/dashboard/public/locales/ja/common.json

@@ -139,7 +139,6 @@
   "new-push-subtitle": "Every time a feature flag is updated, a push notification is sent to the SDK client allowing you to update the SDK cache in real-time.",
   "tags": "Tags",
   "fcm-api-key": "Firebase Service Account",
-<<<<<<< HEAD
   "goals": "Goals",
   "goals-subtitle": "You can set goals and use them to start experiments within your feature flags",
   "new-goal": "New Goal",
@@ -151,8 +150,7 @@
   "archive-goal": "Archive Goal",
   "delete-goal": "Delete Goal",
   "goal-connections": "Goal Connections",
-  "in-use": "In Use"
-=======
+  "in-use": "In Use",
   "user-segments": "User Segments",
   "user-segments-subtitle": "You can create segments to help you start testing feature flags for specifics type of users",
   "new-user-segment": "New User Segment",
@@ -161,7 +159,5 @@
   "connections": "Connections",
   "status": "Status",
   "flags-connected": "Flags Connected",
-  "flags-connected-desc": "This user segment is currently connected to the following feature flags:",
-  "close": "Close"
->>>>>>> main
+  "flags-connected-desc": "This user segment is currently connected to the following feature flags:"
 }

ui/dashboard/public/locales/ja/form.json

@@ -46,28 +46,29 @@
     "account": "Get notified when someone adds or updates an account",
     "notification": "Get notified when someone adds or updates a notification"
   },
-<<<<<<< HEAD
   "upload-files": "Drop your file here, or <underline>{{text}}</underline>",
   "accept-file-types": "{{type}}",
   "goal-id": "Goal ID",
   "placeholder-goal-id": "Enter Goal ID",
   "connections": "Connections",
   "experiments": "Experiments",
   "operations": "Operations",
+  "experiment_one": "{{count}} Experiment",
+  "experiment_other": "{{count}} Experiments",
+  "operation_one": "{{count}} Operation",
+  "operation_other": "{{count}} Operations",
   "goal-details": {
     "archive-desc": "This goal will be archived across all environments and will only appear in your list when filtered for",
     "delete-desc": "Permanently delete this goal across all environments in this project",
-    "delete-warning-desc": "You cannot delete a goal when your goal has connections"
-  }
-=======
+    "delete-warning-desc": "You cannot delete a goal when it has connections.",
+    "archive-warning-desc": "You cannot archive a goal when it has connections.",
+    "archive-info-desc": "This goal will be archived and will only show on the list page when clicking on the Archived tab"
+  },
   "placeholder-search-user-segments": "Search user segment",
   "list-of-users-ids": "List Of Users IDs",
   "browse-files": "Browse files",
   "enter-user-ids": "Enter user IDs",
-  "upload-files": "Drop your files here, or <underline>{{text}}</underline>",
   "update-user-segment": "Updating this field will replace the current list with the new one.",
   "update-user-segment-warning": "<p>The user ID list can't be updated because {{count}} flag is using it. Remove the segment from the flag before updating it.</p>",
-  "placeholder-enter-user-ids": "Enter IDs separated by commas (E.g., userId1, userId2, userId3,...)",
-  "accept-file-types": "{{type}}"
->>>>>>> main
+  "placeholder-enter-user-ids": "Enter IDs separated by commas (E.g., userId1, userId2, userId3,...)"
 }

ui/dashboard/public/locales/ja/table.json

@@ -25,13 +25,12 @@
     "edit-push": "Edit Push",
     "disable-push": "Disable Push",
     "enable-push": "Enable Push",
-<<<<<<< HEAD
-    "delete-goal": "Delete Goal"
-=======
+    "delete-goal": "Delete Goal",
+    "archive-goal": "Archive Goal",
+    "unarchive-goal": "Unarchive Goal",
     "edit-segment": "Edit User Segment",
     "delete-segment": "Delete User Segment",
     "download-segment": "Download User Segment"
->>>>>>> main
   },
   "empty": {
     "project-title": "No registered projects",
@@ -49,13 +48,10 @@
     "notification-desc": "There are no registered notifications. Add a new one to start managing.",
     "push-title": "No registered pushes",
     "push-desc": "There are no registered pushes. Add a new one to start managing.",
-<<<<<<< HEAD
     "goal-title": "No registered goals",
-    "goal-desc": "There are no registered goals. Add a new one to start managing."
-=======
+    "goal-desc": "There are no registered goals. Add a new one to start managing.",
     "user-segments-title": "No registered user segments",
     "user-segments-desc": "There are no registered user segments. Add a new one to start managing."
->>>>>>> main
   },
   "organization": {
     "confirm-archive-desc": "The organization \"<bold>{{name}}</bold>\" will be archived. Are you sure you want to proceed?",
@@ -82,7 +78,6 @@
     "confirm-enable-desc": "The Push \"<bold>{{name}}</bold>\" will be enabled. Are you sure you want to proceed?",
     "confirm-disable-desc": "The Push \"<bold>{{name}}</bold>\" will be disabled. Are you sure you want to proceed?"
   },
-<<<<<<< HEAD
   "goals": {
     "connections": "Connections",
     "experiment": "Experiment",
@@ -91,9 +86,8 @@
     "delete-goal-desc": "The goal \"<bold>{{name}}</bold>\" will be deleted permanently. Are you sure you want to proceed?",
     "confirm-archive-desc": "The goal \"<bold>{{name}}</bold>\" will be archived. Are you sure you want to proceed?",
     "confirm-unarchive-desc": "The goal \"<bold>{{name}}</bold>\" will be unarchived. Are you sure you want to proceed?"
-=======
+  },
   "user-segment": {
     "delete-user-segment-desc": "The <bold>{{name}}</bold> is going to be deleted permanently. Are you sure you want to proceed?"
->>>>>>> main
   }
 }

ui/dashboard/src/@api/goal/goal-deleter.ts

@@ -0,0 +1,17 @@
+import axiosClient from '@api/axios-client';
+import { pickBy } from 'lodash';
+import { isNotEmpty } from 'utils/data-type';
+import { stringifyParams } from 'utils/search-params';
+
+export interface GoalDeleterParams {
+  id: string;
+  environmentId: string;
+}
+
+export const goalDeleter = async (_params?: GoalDeleterParams) => {
+  const params = pickBy(_params, v => isNotEmpty(v));
+
+  return axiosClient
+    .delete(`/v1/goal?${stringifyParams(params)}`)
+    .then(response => response.data);
+};

ui/dashboard/src/@api/goal/index.ts

@@ -1,3 +1,5 @@
 export * from './goal-creator';
 export * from './goal-details-fetcher';
 export * from './goals-fetcher';
+export * from './goal-deleter';
+export * from './goal-updater';

ui/dashboard/src/@icons/index.tsx

@@ -1,3 +1,4 @@
+import IconArrowDown from './customized-icons/arrow-down.svg?react';
 import IconBackspace from './customized-icons/backspace.svg?react';
 import IconChecked from './customized-icons/checked.svg?react';
 import IconChevronRight from './customized-icons/chevron-right.svg?react';
@@ -84,6 +85,7 @@ export {
   IconCopy,
   IconUpload,
   IconInfoFilled,
+  IconArrowDown,
   // Special icons
   IconGoal,
   IconGoogle,

ui/dashboard/src/pages/goal-details/elements/delete-warning.tsx → ui/dashboard/src/components/info-message/index.tsx

@@ -1,18 +1,15 @@
-import { useTranslation } from 'i18n';
 import { IconInfoFilled } from '@icons';
 import Icon from 'components/icon';
 
-const DeleteWarning = () => {
-  const { t } = useTranslation(['form']);
-
+const InfoMessage = ({ description }: { description: string }) => {
   return (
     <div className="flex items-center w-full p-4 gap-x-2 rounded border-l-4 border-accent-blue-500 bg-accent-blue-50">
       <Icon icon={IconInfoFilled} size={'xxs'} />
       <p className="typo-para-small leading-[14px] text-accent-blue-500">
-        {t('goal-details.delete-warning-desc')}
+        {description}
       </p>
     </div>
   );
 };
 
-export default DeleteWarning;
+export default InfoMessage;

ui/dashboard/src/components/popover/index.tsx

@@ -9,6 +9,7 @@ import * as PopoverPrimitive from '@radix-ui/react-popover';
 import type { PopoverContentProps } from '@radix-ui/react-popover';
 import { AddonSlot } from '@types';
 import { cn } from 'utils/style';
+import { Tooltip } from 'components/tooltip';
 import PopoverItem from './popover-item';
 
 export type PopoverOption<PopoverValue> = {
@@ -17,6 +18,7 @@ export type PopoverOption<PopoverValue> = {
   label: string;
   description?: string;
   disabled?: boolean;
+  tooltip?: string;
 };
 
 export type PopoverValue = number | string;
@@ -115,14 +117,22 @@ const Popover = forwardRef(
           >
             <PopoverClose ref={popoverCloseRef} className="hidden" />
             {options.map((item, index) => (
-              <PopoverItem
-                type="item"
+              <Tooltip
                 key={index}
-                addonSlot={addonSlot}
-                icon={item.icon}
-                label={item.label}
-                disabled={item?.disabled}
-                onClick={() => onClick && handleSelectItem(item.value)}
+                trigger={
+                  <div>
+                    <PopoverItem
+                      type="item"
+                      addonSlot={addonSlot}
+                      icon={item.icon}
+                      label={item.label}
+                      disabled={item?.disabled}
+                      onClick={() => onClick && handleSelectItem(item.value)}
+                    />
+                  </div>
+                }
+                content={item.tooltip}
+                className="bg-gray-800"
               />
             ))}
           </PopoverContent>

ui/dashboard/src/components/popover/popover-item.tsx

@@ -65,8 +65,8 @@ const PopoverItem = ({
       {icon && (
         <span
           className={cn(
-            'flex size-5 items-center justify-center text-gray-600',
-            { 'text-gray-400': disabled }
+            'flex size-5 items-center justify-center',
+            disabled ? 'text-gray-400' : 'text-gray-600'
           )}
         >
           <Icon icon={icon} size={type === 'item' ? 'xxs' : 'sm'} />