chore(ui/dashboard): add user segment uploading validation (#2057)

Author: steveninhle

ui/dashboard/src/@locales/en/table.json

@@ -118,6 +118,8 @@
     "confirm-unarchive-desc": "The goal \"<bold>{{name}}</bold>\" will be unarchived. Are you sure you want to proceed?"
   },
   "user-segment": {
+    "segment-uploading-title": "Upload in progress",
+    "segment-uploading-desc": "Segments can't be updated until the user list has been uploaded.",
     "delete-user-segment-desc": "The <bold>{{name}}</bold> is going to be deleted permanently. Are you sure you want to proceed?"
   },
   "experiment": {

ui/dashboard/src/@locales/ja/table.json

@@ -118,6 +118,8 @@
     "confirm-unarchive-desc": "ゴール「<bold>{{name}}</bold>」のアーカイブが解除されます。続行してもよろしいですか？"
   },
   "user-segment": {
+    "segment-uploading-title": "アップロード中",
+    "segment-uploading-desc": "ユーザー一覧はアップロード中のため、セグメントユーザーの更新ができません。",
     "delete-user-segment-desc": "<bold>{{name}}</bold>は完全に削除されます。続行してもよろしいですか？"
   },
   "experiment": {

ui/dashboard/src/pages/user-segments/collection-layout/data-collection.tsx

@@ -6,6 +6,7 @@ import {
 } from 'react-icons-material-design';
 import type { ColumnDef } from '@tanstack/react-table';
 import { useTranslation } from 'i18n';
+import compact from 'lodash/compact';
 import { UserSegment } from '@types';
 import { useFormatDateTime } from 'utils/date-time';
 import { cn } from 'utils/style';
@@ -41,18 +42,21 @@ export const useColumns = ({
       cell: ({ row }) => {
         const segment = row.original;
         const { id, name } = segment;
+        const isUploading = getUploadingStatus(segment);
 
         return (
           <div
-            onClick={() => onActionHandler(segment, 'EDIT')}
+            onClick={() =>
+              onActionHandler(segment, isUploading ? 'UPLOADING' : 'EDIT')
+            }
             className="flex items-center gap-x-2 cursor-pointer min-w-[300px]"
           >
             <NameWithTooltip
               id={id}
               content={<NameWithTooltip.Content content={name} id={id} />}
               trigger={<NameWithTooltip.Trigger id={id} name={name} />}
             />
-            {getUploadingStatus(segment) && <Spinner />}
+            {isUploading && <Spinner />}
           </div>
         );
       }
@@ -157,14 +161,14 @@ export const useColumns = ({
 
         return (
           <DisabledPopoverTooltip
-            options={[
+            options={compact([
               {
                 label: `${t('table:popover.download-segment')}`,
                 icon: IconCloudDownloadOutlined,
                 value: 'DOWNLOAD',
                 disabled: !Number(segment.includedUserCount)
               },
-              {
+              !getUploadingStatus(segment) && {
                 label: `${t('table:popover.edit-segment')}`,
                 icon: IconEditOutlined,
                 value: 'EDIT'
@@ -174,7 +178,7 @@ export const useColumns = ({
                 icon: IconDeleteOutlined,
                 value: 'DELETE'
               }
-            ]}
+            ])}
             onClick={value =>
               onActionHandler(segment, value as UserSegmentsActionsType)
             }

ui/dashboard/src/pages/user-segments/page-loader.tsx

@@ -16,6 +16,7 @@ import { UserSegmentsActionsType } from './types';
 import DeleteUserSegmentModal from './user-segment-modal/delete-segment-modal';
 import FlagsConnectedModal from './user-segment-modal/flags-connected-modal';
 import SegmentCreateUpdateModal from './user-segment-modal/segment-create-update-form';
+import SegmentUploadingModal from './user-segment-modal/segment-uploading-modal';
 
 const PageLoader = () => {
   const { t } = useTranslation(['common', 'message']);
@@ -38,6 +39,8 @@ const PageLoader = () => {
     useToggleOpen(false);
   const [isOpenDeleteModal, onOpenDeleteModal, onCloseDeleteModal] =
     useToggleOpen(false);
+  const [isOpenUploadingModal, onOpenUploadingdModal, onCloseUploadingdModal] =
+    useToggleOpen(false);
   const [selectedSegment, setSelectedSegment] = useState<UserSegment>();
   const [segmentUploading, setSegmentUploading] = useState<UserSegment | null>(
     null
@@ -99,6 +102,8 @@ const PageLoader = () => {
           return onOpenFlagModal();
         case 'DELETE':
           return onOpenDeleteModal();
+        case 'UPLOADING':
+          return onOpenUploadingdModal();
         default:
           return onBulkDownloadSegment(segment);
       }
@@ -186,6 +191,12 @@ const PageLoader = () => {
           onSubmit={onDeleteSegment}
         />
       )}
+      {isOpenUploadingModal && (
+        <SegmentUploadingModal
+          isOpen={isOpenUploadingModal}
+          onClose={onCloseUploadingdModal}
+        />
+      )}
     </>
   );
 };

ui/dashboard/src/pages/user-segments/types.ts

@@ -19,7 +19,12 @@ export interface CollectionProps {
   projects: Account[];
 }
 
-export type UserSegmentsActionsType = 'EDIT' | 'DELETE' | 'DOWNLOAD' | 'FLAG';
+export type UserSegmentsActionsType =
+  | 'EDIT'
+  | 'DELETE'
+  | 'DOWNLOAD'
+  | 'FLAG'
+  | 'UPLOADING';
 
 export type UserSegmentForm = {
   id?: string;

ui/dashboard/src/pages/user-segments/user-segment-modal/segment-uploading-modal/index.tsx

@@ -0,0 +1,41 @@
+import { useTranslation } from 'i18n';
+import Button from 'components/button';
+import { ButtonBar } from 'components/button-bar';
+import DialogModal from 'components/modal/dialog';
+
+export type SegmentUploadingModalProps = {
+  isOpen: boolean;
+  onClose: () => void;
+};
+
+const SegmentUploadingModal = ({
+  isOpen,
+  onClose
+}: SegmentUploadingModalProps) => {
+  const { t } = useTranslation(['common', 'table']);
+
+  return (
+    <DialogModal
+      className="w-[500px]"
+      title={t('table:user-segment.segment-uploading-title')}
+      isOpen={isOpen}
+      onClose={onClose}
+    >
+      <div className="flex flex-col w-full items-start px-5 py-8">
+        <div className="typo-para-medium text-gray-700 w-full">
+          {t('table:user-segment.segment-uploading-desc')}
+        </div>
+      </div>
+
+      <ButtonBar
+        primaryButton={
+          <Button onClick={onClose} variant="secondary">
+            {t(`close`)}
+          </Button>
+        }
+      />
+    </DialogModal>
+  );
+};
+
+export default SegmentUploadingModal;