[] => {
+ const { t } = useTranslation(['common', 'table']);
+ const formatDateTime = useFormatDateTime();
+
+ const getUploadingStatus = useCallback(
+ (segment: UserSegment) => {
+ if (segment.status === 'UPLOADING') return true;
+ if (segmentUploading?.id === segment.id) return true;
+ },
+ [segmentUploading]
+ );
+
+ return [
+ {
+ accessorKey: 'name',
+ header: `${t('name')}`,
+ size: 350,
+ cell: ({ row }) => {
+ const segment = row.original;
+ return (
+ onActionHandler(segment, 'EDIT')}
+ className="flex items-center gap-x-2 cursor-pointer"
+ >
+
+ {segment.name}
+
+ {getUploadingStatus(segment) &&
}
+
+ {segment.includedUserCount}
+
+ );
+ }
+ },
+ {
+ accessorKey: 'connections',
+ header: `${t('connections')}`,
+ size: 200,
+ cell: ({ row }) => {
+ const segment = row.original;
+ return (
+
+ segment?.features?.length && onActionHandler(segment, 'FLAG')
+ }
+ >
+ {segment?.features?.length}
+ {` ${segment?.features?.length === 1 ? 'Flag' : 'Flags'}`}
+
+ );
+ }
+ },
+ {
+ accessorKey: 'status',
+ header: `${t('status')}`,
+ size: 150,
+ cell: ({ row }) => {
+ const segment = row.original;
+ const isUploading = getUploadingStatus(segment);
+ return (
+
+ {isUploading
+ ? 'Uploading'
+ : segment.isInUseStatus
+ ? 'In Use'
+ : 'Not In Use'}
+
+ );
+ }
+ },
+ {
+ accessorKey: 'updatedAt',
+ header: t('table:updated-at'),
+ size: 200,
+ cell: ({ row }) => {
+ const segment = row.original;
+ return (
+
+ {Number(segment.updatedAt) === 0
+ ? t('never')
+ : formatDateTime(segment.updatedAt)}
+
+ );
+ }
+ },
+ {
+ accessorKey: 'action',
+ size: 60,
+ header: '',
+ meta: {
+ align: 'center',
+ style: { textAlign: 'center', fitContent: true }
+ },
+ enableSorting: false,
+ cell: ({ row }) => {
+ const segment = row.original;
+
+ return (
+
+ onActionHandler(segment, value as UserSegmentsActionsType)
+ }
+ align="end"
+ />
+ );
+ }
+ }
+ ];
+};
diff --git a/ui/dashboard/src/pages/user-segments/collection-layout/empty-collection.tsx b/ui/dashboard/src/pages/user-segments/collection-layout/empty-collection.tsx
new file mode 100644
index 0000000000..e2c11d84ab
--- /dev/null
+++ b/ui/dashboard/src/pages/user-segments/collection-layout/empty-collection.tsx
@@ -0,0 +1,27 @@
+import { IconAddOutlined } from 'react-icons-material-design';
+import { useTranslation } from 'i18n';
+import EmptyState from 'elements/empty-state';
+
+export const EmptyCollection = ({ onAdd }: { onAdd?: () => void }) => {
+ const { t } = useTranslation(['common', 'table']);
+
+ return (
+
+
+
+
+ {t(`table:empty.user-segments-title`)}
+
+
+ {t(`table:empty.user-segments-desc`)}
+
+
+
+
+
+ {t(`new-user-segment`)}
+
+
+
+ );
+};
diff --git a/ui/dashboard/src/pages/user-segments/collection-loader/index.tsx b/ui/dashboard/src/pages/user-segments/collection-loader/index.tsx
new file mode 100644
index 0000000000..782f64bab9
--- /dev/null
+++ b/ui/dashboard/src/pages/user-segments/collection-loader/index.tsx
@@ -0,0 +1,89 @@
+import { SortingState } from '@tanstack/react-table';
+import { getCurrentEnvironment, useAuth } from 'auth';
+import { LIST_PAGE_SIZE } from 'constants/app';
+import { sortingListFields } from 'constants/collection';
+import { UserSegment } from '@types';
+import Pagination from 'components/pagination';
+import CollectionEmpty from 'elements/collection/collection-empty';
+import { DataTable } from 'elements/data-table';
+import PageLayout from 'elements/page-layout';
+import { useColumns } from '../collection-layout/data-collection';
+import { EmptyCollection } from '../collection-layout/empty-collection';
+import { UserSegmentsActionsType, UserSegmentsFilters } from '../types';
+import { useFetchSegments } from './use-fetch-segment';
+
+const CollectionLoader = ({
+ segmentUploading,
+ onAdd,
+ filters,
+ setFilters,
+ onActionHandler
+}: {
+ segmentUploading: UserSegment | null;
+ onAdd?: () => void;
+ filters: UserSegmentsFilters;
+ setFilters: (values: Partial) => void;
+ organizationIds?: string[];
+ onActionHandler: (value: UserSegment, type: UserSegmentsActionsType) => void;
+}) => {
+ const columns = useColumns({ segmentUploading, onActionHandler });
+ const { consoleAccount } = useAuth();
+ const currenEnvironment = getCurrentEnvironment(consoleAccount!);
+
+ const {
+ data: collection,
+ isLoading,
+ refetch,
+ isError
+ } = useFetchSegments({
+ ...filters,
+ environmentId: currenEnvironment.id
+ });
+
+ const onSortingChangeHandler = (sorting: SortingState) => {
+ const updateOrderBy =
+ sorting.length > 0
+ ? sortingListFields[sorting[0].id]
+ : sortingListFields.default;
+
+ setFilters({
+ orderBy: updateOrderBy,
+ orderDirection: sorting[0]?.desc ? 'DESC' : 'ASC'
+ });
+ };
+
+ const userSegments = collection?.segments || [];
+ const totalCount = Number(collection?.totalCount) || 0;
+
+ const emptyState = (
+ setFilters({ searchQuery: '' })}
+ empty={}
+ />
+ );
+
+ return isError ? (
+
+ ) : (
+ <>
+
+ {totalCount > LIST_PAGE_SIZE && !isLoading && (
+ setFilters({ page })}
+ />
+ )}
+
+ );
+};
+
+export default CollectionLoader;
diff --git a/ui/dashboard/src/pages/user-segments/collection-loader/use-fetch-segment.ts b/ui/dashboard/src/pages/user-segments/collection-loader/use-fetch-segment.ts
new file mode 100644
index 0000000000..3afd1dd3b7
--- /dev/null
+++ b/ui/dashboard/src/pages/user-segments/collection-loader/use-fetch-segment.ts
@@ -0,0 +1,39 @@
+import { useQueryUserSegments } from '@queries/user-segments';
+import { LIST_PAGE_SIZE } from 'constants/app';
+import { FeatureSegmentStatus, OrderBy, OrderDirection } from '@types';
+
+export const useFetchSegments = ({
+ page = 1,
+ pageSize,
+ orderBy,
+ searchQuery,
+ orderDirection,
+ status,
+ isInUseStatus,
+ environmentId
+}: {
+ pageSize?: number;
+ page?: number;
+ searchQuery?: string;
+ orderBy?: OrderBy;
+ orderDirection?: OrderDirection;
+ disabled?: boolean;
+ status?: FeatureSegmentStatus;
+ isInUseStatus?: boolean;
+ environmentId: string;
+}) => {
+ const cursor = (page - 1) * LIST_PAGE_SIZE;
+
+ return useQueryUserSegments({
+ params: {
+ pageSize: pageSize || LIST_PAGE_SIZE,
+ cursor: String(cursor),
+ orderBy,
+ orderDirection,
+ searchKeyword: searchQuery,
+ status,
+ isInUseStatus,
+ environmentId
+ }
+ });
+};
diff --git a/ui/dashboard/src/pages/user-segments/constants.ts b/ui/dashboard/src/pages/user-segments/constants.ts
new file mode 100644
index 0000000000..4eab98d33f
--- /dev/null
+++ b/ui/dashboard/src/pages/user-segments/constants.ts
@@ -0,0 +1,2 @@
+export const SEGMENT_MAX_FILE_SIZE = 2097152;
+export const SEGMENT_SUPPORTED_FORMATS = ['text/csv', 'text/plain'];
diff --git a/ui/dashboard/src/pages/user-segments/form-schema.ts b/ui/dashboard/src/pages/user-segments/form-schema.ts
new file mode 100644
index 0000000000..1d99402c9b
--- /dev/null
+++ b/ui/dashboard/src/pages/user-segments/form-schema.ts
@@ -0,0 +1,21 @@
+import * as yup from 'yup';
+import {
+ SEGMENT_MAX_FILE_SIZE,
+ SEGMENT_SUPPORTED_FORMATS
+} from 'pages/user-segments/constants';
+
+export const formSchema = yup.object().shape({
+ name: yup.string().required(),
+ description: yup.string(),
+ id: yup.string(),
+ userIds: yup.string(),
+ file: yup
+ .mixed()
+ .nullable()
+ .test('fileSize', 'The maximum size of the file is 2MB', value => {
+ return !value || (value as File)?.size <= SEGMENT_MAX_FILE_SIZE;
+ })
+ .test('fileType', 'The file format is not supported', value => {
+ return !value || SEGMENT_SUPPORTED_FORMATS.includes((value as File).type);
+ })
+});
diff --git a/ui/dashboard/src/pages/user-segments/index.tsx b/ui/dashboard/src/pages/user-segments/index.tsx
new file mode 100644
index 0000000000..c647a87bcc
--- /dev/null
+++ b/ui/dashboard/src/pages/user-segments/index.tsx
@@ -0,0 +1,20 @@
+import { useTranslation } from 'i18n';
+import PageHeader from 'elements/page-header';
+import PageLayout from 'elements/page-layout';
+import PageLoader from './page-loader';
+
+const UserSegmentsPage = () => {
+ const { t } = useTranslation(['common']);
+
+ return (
+
+
+
+
+ );
+};
+
+export default UserSegmentsPage;
diff --git a/ui/dashboard/src/pages/user-segments/page-content.tsx b/ui/dashboard/src/pages/user-segments/page-content.tsx
new file mode 100644
index 0000000000..97f9821537
--- /dev/null
+++ b/ui/dashboard/src/pages/user-segments/page-content.tsx
@@ -0,0 +1,120 @@
+import { useEffect } from 'react';
+import { IconAddOutlined } from 'react-icons-material-design';
+import { getCurrentEnvironment, useAuth } from 'auth';
+import { usePartialState, useToggleOpen } from 'hooks';
+import { useTranslation } from 'i18n';
+import pickBy from 'lodash/pickBy';
+import { UserSegment } from '@types';
+import { isEmptyObject, isNotEmpty } from 'utils/data-type';
+import { useSearchParams } from 'utils/search-params';
+import Button from 'components/button';
+import Icon from 'components/icon';
+import Filter from 'elements/filter';
+import PageLayout from 'elements/page-layout';
+import CollectionLoader from './collection-loader';
+import { UserSegmentsActionsType, UserSegmentsFilters } from './types';
+import FilterUserSegmentModal from './user-segment-modal/filter-segment-modal';
+
+const PageContent = ({
+ segmentUploading,
+ onAdd,
+ onEdit,
+ onOpenFlagModal,
+ onDelete,
+ onDownload
+}: {
+ segmentUploading: UserSegment | null;
+ onAdd: () => void;
+ onEdit: (v: UserSegment) => void;
+ onOpenFlagModal: (v: UserSegment) => void;
+ onDelete: (v: UserSegment) => void;
+ onDownload: (v: UserSegment) => void;
+}) => {
+ const { t } = useTranslation(['common']);
+ const { consoleAccount } = useAuth();
+ const currentEnvironment = getCurrentEnvironment(consoleAccount!);
+
+ const { searchOptions, onChangSearchParams } = useSearchParams();
+ const searchFilters: Partial = searchOptions;
+
+ const defaultFilters = {
+ page: 1,
+ orderBy: 'CREATED_AT',
+ orderDirection: 'DESC',
+ ...searchFilters
+ } as UserSegmentsFilters;
+
+ const [openFilterModal, onOpenFilterModal, onCloseFilterModal] =
+ useToggleOpen(false);
+
+ const [filters, setFilters] =
+ usePartialState(defaultFilters);
+
+ const onChangeFilters = (values: Partial) => {
+ const options = pickBy({ ...filters, ...values }, v => isNotEmpty(v));
+ onChangSearchParams(options);
+ setFilters({ ...values });
+ };
+
+ const onActionHandler = (
+ segment: UserSegment,
+ type: UserSegmentsActionsType
+ ) => {
+ if (type === 'EDIT') return onEdit(segment);
+ if (type === 'FLAG') return onOpenFlagModal(segment);
+ if (type === 'DELETE') return onDelete(segment);
+ onDownload(segment);
+ };
+
+ useEffect(() => {
+ if (isEmptyObject(searchOptions)) {
+ setFilters({ ...defaultFilters });
+ }
+ }, [searchOptions]);
+
+ return (
+
+
+
+ {t(`new-user-segment`)}
+
+ }
+ searchValue={filters.searchQuery as string}
+ filterCount={
+ isNotEmpty(filters.isInUseStatus as boolean) ? 1 : undefined
+ }
+ onSearchChange={searchQuery => onChangeFilters({ searchQuery })}
+ />
+ {openFilterModal && (
+ {
+ onChangeFilters(value);
+ onCloseFilterModal();
+ }}
+ onClearFilters={() => {
+ onChangeFilters({ isInUseStatus: undefined });
+ onCloseFilterModal();
+ }}
+ />
+ )}
+
+
+
+
+ );
+};
+
+export default PageContent;
diff --git a/ui/dashboard/src/pages/user-segments/page-loader.tsx b/ui/dashboard/src/pages/user-segments/page-loader.tsx
new file mode 100644
index 0000000000..4a506e65a3
--- /dev/null
+++ b/ui/dashboard/src/pages/user-segments/page-loader.tsx
@@ -0,0 +1,167 @@
+import { useState } from 'react';
+import { userSegmentBulkDownload } from '@api/user-segment';
+import { userSegmentDelete } from '@api/user-segment/user-segment-delete';
+import { invalidateUserSegments } from '@queries/user-segments';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { getCurrentEnvironment, useAuth } from 'auth';
+import { useToast } from 'hooks';
+import { useToggleOpen } from 'hooks/use-toggle-open';
+import { UserSegment } from '@types';
+import PageLayout from 'elements/page-layout';
+import { EmptyCollection } from './collection-layout/empty-collection';
+import { useFetchSegments } from './collection-loader/use-fetch-segment';
+import PageContent from './page-content';
+import AddUserSegmentModal from './user-segment-modal/add-segment-modal';
+import DeleteUserSegmentModal from './user-segment-modal/delete-segment-modal';
+import EditUserSegmentModal from './user-segment-modal/edit-segment-modal';
+import FlagsConnectedModal from './user-segment-modal/flags-connected-modal';
+
+const PageLoader = () => {
+ const [selectedSegment, setSelectedSegment] = useState();
+ const [segmentUploading, setSegmentUploading] = useState(
+ null
+ );
+
+ const [isOpenAddModal, onOpenAddModal, onCloseAddModal] =
+ useToggleOpen(false);
+ const [isOpenEditModal, onOpenEditModal, onCloseEditModal] =
+ useToggleOpen(false);
+ const [isOpenFlagModal, onOpenFlagModal, onCloseFlagModal] =
+ useToggleOpen(false);
+ const [isOpenDeleteModal, onOpenDeleteModal, onCloseDeleteModal] =
+ useToggleOpen(false);
+
+ const { consoleAccount } = useAuth();
+ const currentEnvironment = getCurrentEnvironment(consoleAccount!);
+ const { notify } = useToast();
+ const queryClient = useQueryClient();
+
+ const {
+ data: collection,
+ isLoading,
+ refetch,
+ isError
+ } = useFetchSegments({
+ pageSize: 1,
+ environmentId: currentEnvironment.id
+ });
+
+ const isEmpty = collection?.segments.length === 0;
+
+ const mutation = useMutation({
+ mutationFn: async (selectedSegment: UserSegment) => {
+ return userSegmentDelete({
+ id: selectedSegment.id,
+ environmentId: currentEnvironment.id
+ });
+ },
+ onSuccess: () => {
+ onCloseDeleteModal();
+ invalidateUserSegments(queryClient);
+ notify({
+ toastType: 'toast',
+ messageType: 'success',
+ message: (
+
+ {selectedSegment?.name}
+ {` has been deleted successfully!`}
+
+ )
+ });
+ mutation.reset();
+ }
+ });
+
+ const onDeleteSegment = () => {
+ if (selectedSegment) {
+ mutation.mutate(selectedSegment);
+ }
+ };
+
+ const onBulkDownloadSegment = async (segment: UserSegment) => {
+ const resp = await userSegmentBulkDownload({
+ segmentId: segment.id,
+ environmentId: currentEnvironment.id
+ });
+ if (resp.data) {
+ const url = window.URL.createObjectURL(
+ new Blob([atob(String(resp.data))])
+ );
+ const link = window.document.createElement('a');
+ link.href = url;
+ link.setAttribute(
+ 'download',
+ `${currentEnvironment.name}-${segment.name}.csv`
+ );
+ window.document.body.appendChild(link);
+ link.click();
+ if (link.parentNode) {
+ link.parentNode.removeChild(link);
+ }
+ }
+ };
+
+ return (
+ <>
+ {isLoading ? (
+
+ ) : isError ? (
+
+ ) : isEmpty ? (
+
+
+
+ ) : (
+ {
+ setSelectedSegment(segment);
+ onOpenEditModal();
+ }}
+ onOpenFlagModal={segment => {
+ setSelectedSegment(segment);
+ onOpenFlagModal();
+ }}
+ onDelete={segment => {
+ setSelectedSegment(segment);
+ onOpenDeleteModal();
+ }}
+ onDownload={onBulkDownloadSegment}
+ />
+ )}
+ {isOpenAddModal && (
+
+ )}
+ {isOpenEditModal && selectedSegment && (
+
+ )}
+ {isOpenFlagModal && selectedSegment && (
+
+ )}
+ {isOpenDeleteModal && selectedSegment && (
+
+ )}
+
+ );
+};
+
+export default PageLoader;
diff --git a/ui/dashboard/src/pages/user-segments/types.ts b/ui/dashboard/src/pages/user-segments/types.ts
new file mode 100644
index 0000000000..56787dd6d3
--- /dev/null
+++ b/ui/dashboard/src/pages/user-segments/types.ts
@@ -0,0 +1,30 @@
+import { SortingState } from '@tanstack/react-table';
+import { OrderBy, OrderDirection, Account, FeatureSegmentStatus } from '@types';
+
+export interface UserSegmentsFilters {
+ pageSize?: number;
+ page?: number;
+ searchQuery?: string;
+ orderBy?: OrderBy;
+ orderDirection?: OrderDirection;
+ disabled?: boolean;
+ status?: FeatureSegmentStatus;
+ isInUseStatus?: boolean;
+ environmentId: string;
+}
+
+export interface CollectionProps {
+ isLoading?: boolean;
+ onSortingChange: (v: SortingState) => void;
+ projects: Account[];
+}
+
+export type UserSegmentsActionsType = 'EDIT' | 'DELETE' | 'DOWNLOAD' | 'FLAG';
+
+export type UserSegmentForm = {
+ id?: string;
+ name: string;
+ description?: string;
+ userIds?: string;
+ file?: unknown;
+};
diff --git a/ui/dashboard/src/pages/user-segments/user-segment-modal/add-segment-modal/index.tsx b/ui/dashboard/src/pages/user-segments/user-segment-modal/add-segment-modal/index.tsx
new file mode 100644
index 0000000000..6dda0e2afa
--- /dev/null
+++ b/ui/dashboard/src/pages/user-segments/user-segment-modal/add-segment-modal/index.tsx
@@ -0,0 +1,273 @@
+import { useState } from 'react';
+import { FormProvider, SubmitHandler, useForm } from 'react-hook-form';
+import { userSegmentBulkUpload, userSegmentCreator } from '@api/user-segment';
+import { yupResolver } from '@hookform/resolvers/yup';
+import { invalidateUserSegments } from '@queries/user-segments';
+import { useQueryClient } from '@tanstack/react-query';
+import { getCurrentEnvironment, useAuth } from 'auth';
+import { useToast } from 'hooks';
+import { useTranslation } from 'i18n';
+import { covertFileToUint8ToBase64 } from 'utils/converts';
+import { UserSegmentForm } from 'pages/user-segments/types';
+import Button from 'components/button';
+import { ButtonBar } from 'components/button-bar';
+import Divider from 'components/divider';
+import Form from 'components/form';
+import Input from 'components/input';
+import SlideModal from 'components/modal/slide';
+import { RadioGroup, RadioGroupItem } from 'components/radio';
+import TextArea from 'components/textarea';
+import Upload from 'components/upload-files';
+import { formSchema } from '../../form-schema';
+
+interface AddUserSegmentModalProps {
+ isOpen: boolean;
+ onClose: () => void;
+}
+
+const AddUserSegmentModal = ({ isOpen, onClose }: AddUserSegmentModalProps) => {
+ const { t } = useTranslation(['common', 'form']);
+ const { consoleAccount } = useAuth();
+ const currentEnvironment = getCurrentEnvironment(consoleAccount!);
+ const { notify } = useToast();
+ const queryClient = useQueryClient();
+
+ const [userIdsType, setUserIdsType] = useState('upload');
+ const [files, setFiles] = useState([]);
+
+ const form = useForm({
+ resolver: yupResolver(formSchema),
+ defaultValues: {
+ id: '',
+ name: '',
+ description: '',
+ userIds: '',
+ file: null
+ }
+ });
+
+ const {
+ formState: { isValid, isDirty, isSubmitting },
+ trigger
+ } = form;
+
+ const addSuccess = (name: string, isUpload = false) => {
+ if (!isUpload) {
+ notify({
+ toastType: 'toast',
+ messageType: 'success',
+ message: (
+
+ {name} {` has been successfully created!`}
+
+ )
+ });
+ onClose();
+ }
+ invalidateUserSegments(queryClient);
+ };
+
+ const onAddSuccess = (name: string, isUpload = false) => {
+ let timerId: NodeJS.Timeout | null = null;
+ if (timerId) clearTimeout(timerId);
+ if (isUpload)
+ return (timerId = setTimeout(() => addSuccess(name, isUpload), 10000));
+ return addSuccess(name, isUpload);
+ };
+
+ const onSubmit: SubmitHandler = async values => {
+ try {
+ const resp = await userSegmentCreator({
+ environmentId: currentEnvironment.id,
+ name: values.name,
+ description: values.description
+ });
+
+ if (resp) {
+ let file: File | null = null;
+ if (values.file || files.length) {
+ file = (values.file as File) || files[0];
+ } else if (values.userIds?.length) {
+ file = new File([values.userIds], 'filename.txt', {
+ type: 'text/plain'
+ });
+ }
+ if (file) {
+ covertFileToUint8ToBase64(file, async base64String => {
+ const uploadResp = await userSegmentBulkUpload({
+ segmentId: resp.segment.id,
+ environmentId: currentEnvironment.id,
+ state: 'INCLUDED',
+ data: base64String
+ });
+ onAddSuccess(values.name);
+ if (uploadResp) onAddSuccess(values.name, true);
+ });
+ } else onAddSuccess(values.name, false);
+ }
+ } catch (error) {
+ notify({
+ toastType: 'toast',
+ messageType: 'error',
+ message: (error as Error)?.message || 'Something went wrong.'
+ });
+ }
+ };
+
+ return (
+
+
+
+ {t('form:general-info')}
+
+
+