feat: cohort segment detail view with CSV re-synchronisation (#8387)

Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com>
Co-authored-by: flagsmith-engineering[bot] <flagsmith-engineering[bot]@users.noreply.github.com>

Author: 3 people

frontend/common/services/useCohort.ts

@@ -32,6 +32,12 @@ export const cohortService = service
           url: `environments/${query.environmentApiKey}/cohorts/${query.cohortId}/`,
         }),
       }),
+      getCohort: builder.query<Res['cohort'], Req['getCohort']>({
+        providesTags: (res, e, arg) => [{ id: arg.cohortId, type: 'Cohort' }],
+        query: (query) => ({
+          url: `environments/${query.environmentApiKey}/cohorts/${query.cohortId}/`,
+        }),
+      }),
       syncCohortCsv: builder.mutation<
         Res['cohortCsvSync'],
         Req['syncCohortCsv']
@@ -55,6 +61,24 @@ export const cohortService = service
           }
         },
       }),
+      updateCohort: builder.mutation<Res['cohort'], Req['updateCohort']>({
+        invalidatesTags: (q, e, arg) => [
+          { id: arg.cohortId, type: 'Cohort' },
+          { id: arg.segmentId, type: 'Segment' },
+          { id: `LIST${arg.projectId}`, type: 'Segment' },
+        ],
+        query: ({
+          cohortId,
+          environmentApiKey,
+          projectId: _projectId,
+          segmentId: _segmentId,
+          ...body
+        }) => ({
+          body,
+          method: 'PATCH',
+          url: `environments/${environmentApiKey}/cohorts/${cohortId}/`,
+        }),
+      }),
       // END OF ENDPOINTS
     }),
   })
@@ -72,7 +96,9 @@ export async function deleteCohort(
 export const {
   useCreateCohortMutation,
   useDeleteCohortMutation,
+  useGetCohortQuery,
   useSyncCohortCsvMutation,
+  useUpdateCohortMutation,
   // END OF EXPORTS
 } = cohortService
 

frontend/common/types/requests.ts

@@ -186,6 +186,19 @@ export type Req = {
     cohortId: number
     projectId: number
   }
+  getCohort: {
+    environmentApiKey: string
+    cohortId: number
+  }
+  updateCohort: {
+    environmentApiKey: string
+    cohortId: number
+    projectId: number
+    segmentId: number
+    name?: string
+    description?: string
+    metadata?: Metadata[]
+  }
   syncCohortCsv: {
     environmentApiKey: string
     cohortId: number

frontend/common/types/responses.ts

@@ -174,12 +174,14 @@ export type SegmentMembersResponse = PagedResponse<SegmentMember> & {
   // Pass as `cursor` to fetch the next page; null when there are no more rows.
   next_cursor: string | null
 }
+export type CohortSourceType = 'csv' | 'amplitude' | 'mixpanel'
+
 export type SegmentCohort = {
   id: number
   environment: number
   environment_api_key: string
   environment_name: string
-  source_type: 'csv'
+  source_type: CohortSourceType
   version: number
   deletion_requested_at: string | null
 }
@@ -1016,15 +1018,23 @@ export type Metadata = {
   field_value: string
 }
 
+export type CohortMembershipCounts = {
+  applied: number
+  pending_add: number
+  pending_remove: number
+}
+
 export type Cohort = {
   id: number
   uuid: string
   name: string
   description: string | null
   segment: number
-  source_type: 'csv'
+  source_type: CohortSourceType
   version: number
   created_at: string
+  last_synced_at: string | null
+  membership_counts: CohortMembershipCounts
 }
 
 export type CohortCsvSyncResult = {

frontend/common/utils/csv.ts

@@ -14,6 +14,9 @@ export type ExtractedIdentifiers = {
 // DynamoDB sort keys, capped at 1024 bytes).
 export const MAX_IDENTIFIER_BYTES = 1024
 
+// Mirrors the API's COHORT_CSV_MAX_FILE_SIZE_BYTES.
+export const MAX_CSV_FILE_SIZE_BYTES = 10 * 1024 * 1024
+
 export function parseCsvText(text: string): string[][] {
   const rows: string[][] = []
   let row: string[] = []

frontend/web/components/CsvPreview/CsvPreview.scss

@@ -0,0 +1,26 @@
+.csv-preview {
+  &__section-label {
+    font-size: 12px;
+    letter-spacing: 0.05em;
+  }
+
+  &__table {
+    border: 1px solid var(--color-border-default);
+
+    table {
+      border-collapse: collapse;
+    }
+
+    th,
+    td {
+      padding: 12px 16px;
+      text-align: left;
+      white-space: nowrap;
+    }
+
+    tbody tr {
+      border-top: 1px solid var(--color-border-default);
+      color: var(--color-text-secondary);
+    }
+  }
+}

frontend/web/components/CsvPreview/CsvPreview.tsx

@@ -0,0 +1,64 @@
+import { FC } from 'react'
+import classNames from 'classnames'
+import './CsvPreview.scss'
+
+const DEFAULT_ROW_COUNT = 5
+
+export type CsvPreviewType = {
+  columns: string[]
+  rows: string[][]
+  selectedColumn: number | null
+  rowCount?: number
+}
+
+const CsvPreview: FC<CsvPreviewType> = ({
+  columns,
+  rowCount = DEFAULT_ROW_COUNT,
+  rows,
+  selectedColumn,
+}) => (
+  <div>
+    <div className='csv-preview__section-label fw-semibold text-secondary text-uppercase mb-2'>
+      Preview (first {rowCount} rows)
+    </div>
+    <div className='csv-preview__table rounded-lg overflow-auto'>
+      <table className='mb-0 w-100 fs-small'>
+        <thead>
+          <tr>
+            {columns.map((column, i) => (
+              <th
+                key={i}
+                className={classNames(
+                  'fw-semibold',
+                  i === selectedColumn
+                    ? 'bg-surface-action-tint'
+                    : 'bg-surface-muted',
+                )}
+              >
+                {column}
+              </th>
+            ))}
+          </tr>
+        </thead>
+        <tbody>
+          {rows.slice(0, rowCount).map((row, i) => (
+            <tr key={i}>
+              {columns.map((_, j) => (
+                <td
+                  key={j}
+                  className={classNames({
+                    'bg-surface-action-tint': j === selectedColumn,
+                  })}
+                >
+                  {row[j]}
+                </td>
+              ))}
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  </div>
+)
+
+export default CsvPreview

frontend/web/components/CsvPreview/index.ts

@@ -0,0 +1 @@
+export { default } from './CsvPreview'

frontend/web/components/CsvUpload/CsvUpload.tsx

@@ -1,4 +1,5 @@
 import { FC, useCallback, useState } from 'react'
+import classNames from 'classnames'
 import { useDropzone } from 'react-dropzone'
 import { colorIconAction } from 'common/theme/tokens'
 import DropIcon from 'components/icons/DropIcon'
@@ -11,6 +12,7 @@ export type CsvUploadType = {
   value: File | null
   maxSizeBytes?: number
   rowCount?: number
+  disabled?: boolean
   onChange: (file: File, text: string) => void
 }
 
@@ -22,6 +24,7 @@ const formatFileSize = (bytes: number) => {
 }
 
 const CsvUpload: FC<CsvUploadType> = ({
+  disabled,
   maxSizeBytes,
   onChange,
   rowCount,
@@ -52,6 +55,7 @@ const CsvUpload: FC<CsvUploadType> = ({
     accept: {
       'text/csv': ['.csv'],
     },
+    disabled,
     maxSize: maxSizeBytes,
     multiple: false,
     noClick: true,
@@ -90,15 +94,24 @@ const CsvUpload: FC<CsvUploadType> = ({
             </Button>
           </div>
         ) : (
-          <div className='csv-upload__droparea text-center rounded-lg'>
+          <div
+            className={classNames(
+              'csv-upload__droparea text-center rounded-lg',
+              {
+                'opacity-50 pe-none': disabled,
+              },
+            )}
+          >
             <DropIcon />
             <div className='mt-2 mb-2'>
               <strong>Drag and drop your CSV here</strong>
             </div>
             <div className='text-secondary fs-small mb-3'>
               or browse it from your computer
             </div>
-            <Button onClick={open}>Select file</Button>
+            <Button disabled={disabled} onClick={open}>
+              Select file
+            </Button>
           </div>
         )}
       </div>

frontend/web/components/SegmentSelect.tsx

@@ -6,6 +6,7 @@ import { Req } from 'common/types/requests'
 import { components } from 'react-select'
 import Utils from 'common/utils/utils'
 import Button from './base/forms/Button'
+import Chip from './base/Chip'
 
 type SegmentSelectType = {
   disabled: boolean
@@ -31,12 +32,19 @@ const SegmentSelect: FC<SegmentSelectType> = ({
 
   let filteredResults: Res['segments']['results'] = []
   if (data) {
-    filteredResults = filter
-      ? (data.results.filter(filter) as Res['segments']['results'])
-      : data.results
+    // A cohort awaiting deletion is already gone from the user's point of view.
+    filteredResults = data.results.filter(
+      (segment) => !segment.cohort?.deletion_requested_at,
+    )
+    if (filter) {
+      filteredResults = filteredResults.filter(
+        filter,
+      ) as Res['segments']['results']
+    }
   }
   const options = filteredResults.map(
-    ({ feature, id: value, name: label }) => ({
+    ({ cohort, feature, id: value, name: label }) => ({
+      cohort,
       feature,
       label,
       value,
@@ -84,6 +92,11 @@ const SegmentSelect: FC<SegmentSelectType> = ({
             {!!data.feature && (
               <div className='unread ml-2 px-2'>Feature-Specific</div>
             )}
+            {!!data.cohort && (
+              <Chip className='ml-2' size='xs' variant='accent'>
+                {data.cohort.source_type.toUpperCase()}
+              </Chip>
+            )}
           </div>
         ),
       }}