chore: rtk segment identities (#5121)

Author: kyle-ssg

frontend/common/dispatcher/action-constants.js

@@ -32,7 +32,6 @@ const Actions = Object.assign({}, require('./base/_action-constants'), {
   'GET_FEATURE_USAGE': 'GET_FEATURE_USAGE',
   'GET_FLAGS': 'GET_FLAGS',
   'GET_IDENTITY': 'GET_IDENTITY',
-  'GET_IDENTITY_SEGMENTS': 'GET_IDENTITY_SEGMENTS',
   'GET_ORGANISATION': 'GET_ORGANISATION',
   'GET_PROJECT': 'GET_PROJECT',
   'INVALIDATE_INVITE_LINK': 'INVALIDATE_INVITE_LINK',

frontend/common/dispatcher/app-actions.js

@@ -260,13 +260,6 @@ const AppActions = Object.assign({}, require('./base/_app-actions'), {
       id,
     })
   },
-  getIdentitySegments(projectId, id) {
-    Dispatcher.handleViewAction({
-      actionType: Actions.GET_IDENTITY_SEGMENTS,
-      id,
-      projectId,
-    })
-  },
   getOrganisation(organisationId) {
     Dispatcher.handleViewAction({
       actionType: Actions.GET_ORGANISATION,

frontend/common/providers/IdentitySegmentsProvider.js

@@ -0,0 +1,59 @@
+import { Res } from 'common/types/responses'
+import { Req } from 'common/types/requests'
+import { service } from 'common/service'
+import Utils from 'common/utils/utils'
+import transformCorePaging from 'common/transformCorePaging'
+import { sortBy } from 'lodash'
+
+export const identitySegmentService = service
+  .enhanceEndpoints({ addTagTypes: ['IdentitySegment'] })
+  .injectEndpoints({
+    endpoints: (builder) => ({
+      getIdentitySegments: builder.query<
+        Res['identitySegments'],
+        Req['getIdentitySegments']
+      >({
+        providesTags: (res) => [{ id: res?.id, type: 'IdentitySegment' }],
+        query: ({ projectId, ...query }: Req['getIdentitySegments']) => ({
+          url: `/projects/${projectId}/segments/?${Utils.toParam(query)}`,
+        }),
+        transformResponse: (
+          res: Res['identitySegments'],
+          _,
+          req: Req['getIdentitySegments'],
+        ) =>
+          transformCorePaging(req, {
+            ...res,
+            results: sortBy(res.results, 'name'),
+          }),
+      }),
+      // END OF ENDPOINTS
+    }),
+  })
+
+export async function getIdentitySegments(
+  store: any,
+  data: Req['getIdentitySegments'],
+  options?: Parameters<
+    typeof identitySegmentService.endpoints.getIdentitySegments.initiate
+  >[1],
+) {
+  return store.dispatch(
+    identitySegmentService.endpoints.getIdentitySegments.initiate(
+      data,
+      options,
+    ),
+  )
+}
+// END OF FUNCTION_EXPORTS
+
+export const {
+  useGetIdentitySegmentsQuery,
+  // END OF EXPORTS
+} = identitySegmentService
+
+/* Usage examples:
+const { data, isLoading } = useGetIdentitySegmentsQuery({ id: 2 }, {}) //get hook
+const [createIdentitySegments, { isLoading, data, isSuccess }] = useCreateIdentitySegmentsMutation() //create hook
+identitySegmentService.endpoints.getIdentitySegments.select({id: 2})(store.getState()) //access data from any function
+*/

frontend/common/services/useIdentitySegment.ts

@@ -568,5 +568,10 @@ export type Req = {
   getAuditLogWebhooks: { organisationId: string }
   updateAuditLogWebhooks: { organisationId: string; data: Webhook }
   deleteAuditLogWebhook: { organisationId: string; id: number }
+  getIdentitySegments: PagedRequest<{
+    q?: string
+    identity: string
+    projectId: string
+  }>
   // END OF TYPES
 }

frontend/common/stores/identity-segments-store.js

@@ -795,6 +795,7 @@ export type Res = {
     metadata_xml: string
   }
   samlAttributeMapping: PagedResponse<SAMLAttributeMapping>
+  identitySegments: PagedResponse<Segment>
   organisationWebhooks: PagedResponse<Webhook>
   // END OF TYPES
 }

frontend/common/types/requests.ts

@@ -27,7 +27,12 @@ declare global {
   ) => void
   const openConfirm: (data: OpenConfirm) => void
   const Row: typeof Component
-  const toast: (value: ReactNode, theme?: string, expiry?: number, action?: { buttonText: string; onClick: () => void }) => void
+  const toast: (
+    value: ReactNode,
+    theme?: string,
+    expiry?: number,
+    action?: { buttonText: string; onClick: () => void },
+  ) => void
   const Flex: typeof Component
   const isMobile: boolean
   const FormGroup: typeof Component

frontend/common/types/responses.ts

@@ -2,7 +2,7 @@ import React, { FC, useMemo } from 'react'
 import { useGetEnvironmentsQuery } from 'common/services/useEnvironment'
 import { Props } from 'react-select/lib/Select'
 
-export type EnvironmentSelectType = Partial<Props> & {
+export type EnvironmentSelectType = Partial<Omit<Props, 'value'>> & {
   projectId: string
   value?: string
   label?: string

frontend/global.d.ts

@@ -69,7 +69,8 @@ const AuditLogWebhooks: FC<AuditLogWebhooksType> = ({ organisationId }) => {
           <h5 className='mb-2'>Audit Webhooks</h5>
           <p className='fs-small lh-sm mb-4'>
             Audit webhooks let you know when audit logs occur. You can configure
-            1 or more audit webhooks per organisation.<br/>
+            1 or more audit webhooks per organisation.
+            <br />
             <Button
               theme='text'
               href='https://docs.flagsmith.com/system-administration/webhooks'
@@ -87,7 +88,7 @@ const AuditLogWebhooks: FC<AuditLogWebhooksType> = ({ organisationId }) => {
       ) : (
         <PanelSearch
           id='webhook-list'
-          className="no-pad"
+          className='no-pad'
           items={webhooks?.results}
           renderRow={(webhook: Webhook) => (
             <Row