feat: standard segment page tabs for csv cohort segments

Author: Zaimwa9

frontend/common/services/useCohort.ts

@@ -67,13 +67,16 @@ export const cohortService = service
           { id: arg.segmentId, type: 'Segment' },
           { id: `LIST${arg.projectId}`, type: 'Segment' },
         ],
-        query: (query) => ({
-          body: {
-            description: query.description,
-            name: query.name,
-          },
+        query: ({
+          cohortId,
+          environmentApiKey,
+          projectId: _projectId,
+          segmentId: _segmentId,
+          ...body
+        }) => ({
+          body,
           method: 'PATCH',
-          url: `environments/${query.environmentApiKey}/cohorts/${query.cohortId}/`,
+          url: `environments/${environmentApiKey}/cohorts/${cohortId}/`,
         }),
       }),
       // END OF ENDPOINTS

frontend/common/types/requests.ts

@@ -197,6 +197,7 @@ export type Req = {
     segmentId: number
     name?: string
     description?: string
+    metadata?: Metadata[]
   }
   syncCohortCsv: {
     environmentApiKey: string

frontend/web/components/CsvPreview/CsvPreview.scss

@@ -18,17 +18,9 @@
       white-space: nowrap;
     }
 
-    thead th {
-      background: var(--color-surface-muted);
-    }
-
     tbody tr {
       border-top: 1px solid var(--color-border-default);
       color: var(--color-text-secondary);
     }
-
-    .csv-preview__cell--selected {
-      background: var(--color-surface-action-tint);
-    }
   }
 }

frontend/web/components/CsvPreview/CsvPreview.tsx

@@ -28,9 +28,12 @@ const CsvPreview: FC<CsvPreviewType> = ({
             {columns.map((column, i) => (
               <th
                 key={i}
-                className={classNames('fw-semibold', {
-                  'csv-preview__cell--selected': i === selectedColumn,
-                })}
+                className={classNames(
+                  'fw-semibold',
+                  i === selectedColumn
+                    ? 'bg-surface-action-tint'
+                    : 'bg-surface-muted',
+                )}
               >
                 {column}
               </th>
@@ -44,7 +47,7 @@ const CsvPreview: FC<CsvPreviewType> = ({
                 <td
                   key={j}
                   className={classNames({
-                    'csv-preview__cell--selected': j === selectedColumn,
+                    'bg-surface-action-tint': j === selectedColumn,
                   })}
                 >
                   {row[j]}

frontend/web/components/CsvUpload/CsvUpload.scss

@@ -2,11 +2,6 @@
   &__droparea {
     padding: 32px;
     border: 1px dashed var(--color-border-action);
-
-    &--disabled {
-      opacity: 0.5;
-      pointer-events: none;
-    }
   }
 
   &__file-card {

frontend/web/components/CsvUpload/CsvUpload.tsx

@@ -98,7 +98,7 @@ const CsvUpload: FC<CsvUploadType> = ({
             className={classNames(
               'csv-upload__droparea text-center rounded-lg',
               {
-                'csv-upload__droparea--disabled': disabled,
+                'opacity-50 pe-none': disabled,
               },
             )}
           >

frontend/web/components/modals/CreateSegment.tsx

@@ -26,6 +26,7 @@ import {
   useGetSegmentsQuery,
   useUpdateSegmentMutation,
 } from 'common/services/useSegment'
+import { useUpdateCohortMutation } from 'common/services/useCohort'
 import Utils from 'common/utils/utils'
 import AssociatedSegmentOverrides from 'components/segments/AssociatedSegmentOverrides'
 import CohortSegmentDetail from 'components/segments/CohortSegmentDetail'
@@ -146,6 +147,8 @@ const CreateSegment: FC<CreateSegmentType> = ({
   const [segment, setSegment] = useState(_segment || defaultSegment)
   // A cohort owns its segment's rules, and the API rejects updating one.
   const isCohortManaged = !!_segment?.cohort
+  // CSV cohorts swap the rules form for the synchronisation detail view.
+  const isCsvCohort = _segment?.cohort?.source_type === 'csv'
   const isReadOnly = readOnly || isCohortManaged
   const readOnlyMessage = isCohortManaged
     ? 'This segment is managed by a cohort. Its rules follow the cohort membership and cannot be edited.'
@@ -193,6 +196,8 @@ const CreateSegment: FC<CreateSegmentType> = ({
     },
   ] = useUpdateSegmentMutation()
   const [createChangeRequest] = useCreateProjectChangeRequestMutation({})
+  const [updateCohort, { isLoading: isSavingCohortMetadata }] =
+    useUpdateCohortMutation()
   const isSaving = creating || updating
   const [showDescriptions, setShowDescriptions] = useState(false)
   const [tab, setTab] = useState(UserTabs.RULES)
@@ -300,6 +305,27 @@ const CreateSegment: FC<CreateSegmentType> = ({
 
   const [valueChanged, setValueChanged] = useState(false)
   const [metadataValueChanged, setMetadataValueChanged] = useState(false)
+
+  // A managed segment rejects direct updates; its metadata is saved through
+  // the cohort instead.
+  const saveCohortMetadata = async () => {
+    if (!_segment?.cohort) {
+      return
+    }
+    try {
+      await updateCohort({
+        cohortId: _segment.cohort.id,
+        environmentApiKey: _segment.cohort.environment_api_key,
+        metadata,
+        projectId: Number(projectId),
+        segmentId: _segment.id,
+      }).unwrap()
+      setMetadataValueChanged(false)
+      toast('Updated segment')
+    } catch (error: any) {
+      toast(error?.data?.metadata?.[0] || 'Error updating segment', 'danger')
+    }
+  }
   const onClosing = useCallback(() => {
     return new Promise<boolean>((resolve) => {
       if (valueChanged) {
@@ -549,6 +575,16 @@ const CreateSegment: FC<CreateSegmentType> = ({
           />
         }
       />
+      {isCsvCohort && metadataValueChanged && !readOnly && (
+        <div className='text-right'>
+          <Button
+            disabled={isSavingCohortMetadata}
+            onClick={saveCohortMetadata}
+          >
+            {isSavingCohortMetadata ? 'Saving...' : 'Save Changes'}
+          </Button>
+        </div>
+      )}
     </FormGroup>
   )
 
@@ -570,33 +606,42 @@ const CreateSegment: FC<CreateSegmentType> = ({
         >
           <TabItem tabLabel='General' isDirty={valueChanged}>
             <div className='my-4'>
-              <CreateSegmentRulesTabForm
-                is4Eyes={is4Eyes}
-                onCreateChangeRequest={onCreateChangeRequest}
-                save={save}
-                condensed={condensed}
-                segmentsLimitAlert={segmentsLimitAlert}
-                name={name}
-                setName={setName}
-                setValueChanged={setValueChanged}
-                description={description}
-                setDescription={setDescription}
-                identity={identity}
-                readOnly={isReadOnly}
-                readOnlyMessage={readOnlyMessage}
-                showDescriptions={showDescriptions}
-                setShowDescriptions={setShowDescriptions}
-                allWarnings={allWarnings}
-                rulesEl={rulesEl}
-                isEdit={isEdit}
-                segment={segment}
-                isSaving={isSaving}
-                isValid={isValid}
-                isLimitReached={isLimitReached}
-                onCancel={handleCancel}
-                topLevelRuleType={topLevelRuleType}
-                setTopLevelRuleType={setTopLevelRuleType}
-              />
+              {isCsvCohort && _segment ? (
+                <CohortSegmentDetail
+                  hideHeader
+                  projectId={projectId}
+                  segment={_segment}
+                  readOnly={readOnly}
+                />
+              ) : (
+                <CreateSegmentRulesTabForm
+                  is4Eyes={is4Eyes}
+                  onCreateChangeRequest={onCreateChangeRequest}
+                  save={save}
+                  condensed={condensed}
+                  segmentsLimitAlert={segmentsLimitAlert}
+                  name={name}
+                  setName={setName}
+                  setValueChanged={setValueChanged}
+                  description={description}
+                  setDescription={setDescription}
+                  identity={identity}
+                  readOnly={isReadOnly}
+                  readOnlyMessage={readOnlyMessage}
+                  showDescriptions={showDescriptions}
+                  setShowDescriptions={setShowDescriptions}
+                  allWarnings={allWarnings}
+                  rulesEl={rulesEl}
+                  isEdit={isEdit}
+                  segment={segment}
+                  isSaving={isSaving}
+                  isValid={isValid}
+                  isLimitReached={isLimitReached}
+                  onCancel={handleCancel}
+                  topLevelRuleType={topLevelRuleType}
+                  setTopLevelRuleType={setTopLevelRuleType}
+                />
+              )}
             </div>
           </TabItem>
           <TabItem tabLabel={segment.feature ? 'Feature' : 'Features'}>
@@ -651,10 +696,65 @@ const CreateSegment: FC<CreateSegmentType> = ({
           >
             {/* Horizontal padding comes from the surrounding tab-item. */}
             <div className={className || 'my-3'}>
+              {isCsvCohort && _segment ? (
+                <CohortSegmentDetail
+                  projectId={projectId}
+                  segment={_segment}
+                  readOnly={readOnly}
+                />
+              ) : (
+                <CreateSegmentRulesTabForm
+                  save={save}
+                  is4Eyes={is4Eyes}
+                  onCreateChangeRequest={onCreateChangeRequest}
+                  condensed={condensed}
+                  segmentsLimitAlert={segmentsLimitAlert}
+                  name={name}
+                  setName={setName}
+                  setValueChanged={setValueChanged}
+                  description={description}
+                  setDescription={setDescription}
+                  identity={identity}
+                  readOnly={isReadOnly}
+                  readOnlyMessage={readOnlyMessage}
+                  showDescriptions={showDescriptions}
+                  setShowDescriptions={setShowDescriptions}
+                  allWarnings={allWarnings}
+                  rulesEl={rulesEl}
+                  isEdit={isEdit}
+                  segment={segment}
+                  isSaving={isSaving}
+                  isValid={isValid}
+                  isLimitReached={isLimitReached}
+                  onCancel={handleCancel}
+                  topLevelRuleType={topLevelRuleType}
+                  setTopLevelRuleType={setTopLevelRuleType}
+                />
+              )}
+            </div>
+          </TabItem>
+          <TabItem
+            tabLabelString='Custom Fields'
+            tabLabel={
+              <Row className='justify-content-center'>Custom Fields</Row>
+            }
+          >
+            <div className={className || 'my-3'}>{MetadataTab}</div>
+          </TabItem>
+        </Tabs>
+      )}
+      {!(isEdit && !condensed) &&
+        !(metadataEnable && segmentContentType?.id) && (
+          <div className={className || 'my-3 mx-4'}>
+            {isCsvCohort && _segment ? (
+              <CohortSegmentDetail
+                projectId={projectId}
+                segment={_segment}
+                readOnly={readOnly}
+              />
+            ) : (
               <CreateSegmentRulesTabForm
                 save={save}
-                is4Eyes={is4Eyes}
-                onCreateChangeRequest={onCreateChangeRequest}
                 condensed={condensed}
                 segmentsLimitAlert={segmentsLimitAlert}
                 name={name}
@@ -678,46 +778,7 @@ const CreateSegment: FC<CreateSegmentType> = ({
                 topLevelRuleType={topLevelRuleType}
                 setTopLevelRuleType={setTopLevelRuleType}
               />
-            </div>
-          </TabItem>
-          <TabItem
-            tabLabelString='Custom Fields'
-            tabLabel={
-              <Row className='justify-content-center'>Custom Fields</Row>
-            }
-          >
-            <div className={className || 'my-3'}>{MetadataTab}</div>
-          </TabItem>
-        </Tabs>
-      )}
-      {!(isEdit && !condensed) &&
-        !(metadataEnable && segmentContentType?.id) && (
-          <div className={className || 'my-3 mx-4'}>
-            <CreateSegmentRulesTabForm
-              save={save}
-              condensed={condensed}
-              segmentsLimitAlert={segmentsLimitAlert}
-              name={name}
-              setName={setName}
-              setValueChanged={setValueChanged}
-              description={description}
-              setDescription={setDescription}
-              identity={identity}
-              readOnly={isReadOnly}
-              readOnlyMessage={readOnlyMessage}
-              showDescriptions={showDescriptions}
-              setShowDescriptions={setShowDescriptions}
-              allWarnings={allWarnings}
-              rulesEl={rulesEl}
-              isEdit={isEdit}
-              segment={segment}
-              isSaving={isSaving}
-              isValid={isValid}
-              isLimitReached={isLimitReached}
-              onCancel={handleCancel}
-              topLevelRuleType={topLevelRuleType}
-              setTopLevelRuleType={setTopLevelRuleType}
-            />
+            )}
           </div>
         )}
     </>
@@ -802,17 +863,6 @@ const LoadingCreateSegment: FC<LoadingCreateSegmentType> = (props) => {
     )
   }
 
-  // CSV cohort segments have no editable rules; show the sync detail view.
-  if (segmentData?.cohort?.source_type === 'csv') {
-    return (
-      <CohortSegmentDetail
-        projectId={props.projectId}
-        segment={segmentData}
-        readOnly={props.readOnly}
-      />
-    )
-  }
-
   return (
     <CreateSegment
       {...props}

frontend/web/components/segments/CohortSegmentDetail/CohortSegmentDetail.scss

@@ -1,5 +1,7 @@
 .cohort-segment-detail {
-  border: 1px solid var(--color-border-default);
+  &--card {
+    border: 1px solid var(--color-border-default);
+  }
 
   &__header {
     border-bottom: 1px solid var(--color-border-default);
@@ -31,7 +33,6 @@
     height: 6px;
     border-radius: 3px;
     overflow: hidden;
-    background: var(--color-surface-default);
   }
 
   &__progress-bar {