feat: Compare identities (#2616)

frontend/.eslintrc.js

@@ -29,9 +29,8 @@ module.exports = {
     'CodeHelp': true,
     'Column': true,
     'Cookies': true,
-    'Dispatcher': true,
     'DYNATRACE_URL': true,
-    'dtrum': true,
+    'Dispatcher': true,
     'E2E': true,
     'ES6Component': true,
     'FB': true,
@@ -52,6 +51,7 @@ module.exports = {
     'OptionalNumber': true,
     'OptionalObject': true,
     'OptionalString': true,
+    'dtrum': true,
     'OrganisationProvider': true,
     'OrganisationSelect': true,
     'Paging': true,

frontend/common/services/useIdentity.ts

@@ -58,12 +58,13 @@ export const identityService = service
             page_size = 10,
             pageType,
             pages,
+            q,
             search,
           } = baseQuery
           let url = `${getIdentityEndpoint(
             environmentId,
             isEdge,
-          )}/?q=${encodeURIComponent(search || '')}&page_size=${page_size}`
+          )}/?q=${encodeURIComponent(search || q || '')}&page_size=${page_size}`
           let last_evaluated_key = null
           if (!isEdge) {
             url += `&page=${page}`

frontend/common/services/useIdentityFeatureState.ts

@@ -0,0 +1,54 @@
+import { Res } from 'common/types/responses'
+import { Req } from 'common/types/requests'
+import { service } from 'common/service'
+import Utils from 'common/utils/utils'
+
+export const identityFeatureStateService = service
+  .enhanceEndpoints({ addTagTypes: ['IdentityFeatureState'] })
+  .injectEndpoints({
+    endpoints: (builder) => ({
+      getIdentityFeatureStates: builder.query<
+        Res['identityFeatureStates'],
+        Req['getIdentityFeatureStates']
+      >({
+        providesTags: (res, _, req) => [
+          { id: req.user, type: 'IdentityFeatureState' },
+        ],
+        query: (query: Req['getIdentityFeatureStates']) => ({
+          url: `environments/${
+            query.environment
+          }/${Utils.getIdentitiesEndpoint()}/${
+            query.user
+          }/${Utils.getFeatureStatesEndpoint()}/all/`,
+        }),
+      }),
+      // END OF ENDPOINTS
+    }),
+  })
+
+export async function getIdentityFeatureStates(
+  store: any,
+  data: Req['getIdentityFeatureStates'],
+  options?: Parameters<
+    typeof identityFeatureStateService.endpoints.getIdentityFeatureStates.initiate
+  >[1],
+) {
+  return store.dispatch(
+    identityFeatureStateService.endpoints.getIdentityFeatureStates.initiate(
+      data,
+      options,
+    ),
+  )
+}
+// END OF FUNCTION_EXPORTS
+
+export const {
+  useGetIdentityFeatureStatesQuery,
+  // END OF EXPORTS
+} = identityFeatureStateService
+
+/* Usage examples:
+const { data, isLoading } = useGetIdentityFeatureStatesQuery({ id: 2 }, {}) //get hook
+const [createIdentityFeatureStates, { isLoading, data, isSuccess }] = useCreateIdentityFeatureStatesMutation() //create hook
+identityFeatureStateService.endpoints.getIdentityFeatureStates.select({id: 2})(store.getState()) //access data from any function
+*/

frontend/common/services/useProjectFlag.ts

@@ -0,0 +1,76 @@
+import { PagedResponse, ProjectFlag, Res } from 'common/types/responses'
+import { Req } from 'common/types/requests'
+import { service } from 'common/service'
+import data from 'common/data/base/_data'
+import { BaseQueryFn } from '@reduxjs/toolkit/query'
+
+function recursivePageGet(
+  url: string,
+  parentRes: null | PagedResponse<ProjectFlag>,
+  baseQuery: (arg: unknown) => any, // matches rtk types,
+) {
+  return baseQuery({
+    method: 'GET',
+    url,
+  }).then((res: Res['projectFlags']) => {
+    let response
+    if (parentRes) {
+      response = {
+        ...parentRes,
+        results: parentRes.results.concat(res.results),
+      }
+    } else {
+      response = res
+    }
+    if (res.next) {
+      return recursivePageGet(res.next, response, baseQuery)
+    }
+    return Promise.resolve(response)
+  })
+}
+export const projectFlagService = service
+  .enhanceEndpoints({ addTagTypes: ['ProjectFlag'] })
+  .injectEndpoints({
+    endpoints: (builder) => ({
+      getProjectFlags: builder.query<
+        Res['projectFlags'],
+        Req['getProjectFlags']
+      >({
+        providesTags: (res, _, req) => [
+          { id: req?.project, type: 'ProjectFlag' },
+        ],
+        queryFn: async (args, _, _2, baseQuery) => {
+          return await recursivePageGet(
+            `projects/${args.project}/features/?page_size=999`,
+            null,
+            baseQuery,
+          )
+        },
+      }),
+      // END OF ENDPOINTS
+    }),
+  })
+
+export async function getProjectFlags(
+  store: any,
+  data: Req['getProjectFlags'],
+  options?: Parameters<
+    typeof projectFlagService.endpoints.getProjectFlags.initiate
+  >[1],
+) {
+  return store.dispatch(
+    projectFlagService.endpoints.getProjectFlags.initiate(data, options),
+  )
+}
+// END OF FUNCTION_EXPORTS
+
+export const {
+  useGetProjectFlagsQuery,
+  // END OF EXPORTS
+} = projectFlagService
+
+/* Usage examples:
+const { data, isLoading } = useGetProjectFlagsQuery({ id: 2 }, {}) //get hook
+const [createProjectFlags, { isLoading, data, isSuccess }] = useCreateProjectFlagsMutation() //create hook
+projectFlagService.endpoints.getProjectFlags.select({id: 2})(store.getState()) //access data from any function
+*/

frontend/common/stores/feature-list-store.js

@@ -214,9 +214,9 @@ const controller = {
           return createSegmentOverride(
             getStore(),
             {
+              enabled: !!v.enabled,
               environmentId,
               featureId: featureFlagId,
-              enabled: !!v.enabled,
               feature_segment: {
                 segment: v.segment,
               },
@@ -235,10 +235,6 @@ const controller = {
             const newValue = {
               environment: segmentOverride.data.environment,
               feature: featureFlagId,
-              id: segmentOverride.data.feature_segment.id,
-              priority: segmentOverride.data.feature_segment.priority,
-              segment: segmentOverride.data.feature_segment.segment,
-              uuid: segmentOverride.data.feature_segment.uuid,
               feature_segment_value: {
                 change_request: segmentOverride.data.change_request,
                 created_at: segmentOverride.data.created_at,
@@ -253,8 +249,12 @@ const controller = {
                 updated_at: segmentOverride.data.updated_at,
                 uuid: segmentOverride.data.uuid,
               },
+              id: segmentOverride.data.feature_segment.id,
               multivariate_options: segmentOverrides[i].multivariate_options,
+              priority: segmentOverride.data.feature_segment.priority,
+              segment: segmentOverride.data.feature_segment.segment,
               segment_name: v.segment_name,
+              uuid: segmentOverride.data.feature_segment.uuid,
               value: segmentOverrides[i].value,
             }
             segmentOverrides[i] = newValue

frontend/common/types/requests.ts

@@ -3,6 +3,7 @@ import { Account, Segment, Tag, FeatureStateValue } from './responses'
 export type PagedRequest<T> = T & {
   page?: number
   page_size?: number
+  q?: string
 }
 export type OAuthType = 'github' | 'saml' | 'google'
 export type PermissionLevel = 'organisation' | 'project' | 'environment'
@@ -99,5 +100,10 @@ export type Req = {
     feature_segment: featureSegment
     feature_state_value: FeatureStateValue
   }
+  getIdentityFeatureStates: {
+    environment: string
+    user: string
+  }
+  getProjectFlags: { project: string }
   // END OF TYPES
 }

frontend/common/types/responses.ts

@@ -1,6 +1,4 @@
 // eslint-disable-next-line @typescript-eslint/no-empty-interface
-import { type } from 'common/data/base/_data'
-import UserGroupList from 'components/UserGroupList'
 
 export type EdgePagedResponse<T> = PagedResponse<T> & {
   last_evaluated_key?: string
@@ -188,6 +186,25 @@ export type MultivariateOption = {
   default_percentage_allocation: number
 }
 
+export type FeatureType = 'STANDARD' | 'MULTIVARIATE'
+
+export type IdentityFeatureState = {
+  feature: {
+    id: number
+    name: string
+    type: FeatureType
+  }
+  enabled: boolean
+  feature_state_value: FlagsmithValue
+  segment: null
+  multivariate_feature_state_values?: {
+    multivariate_feature_option: {
+      value: number
+    }
+    percentage_allocation: number
+  }[]
+}
+
 export type FeatureState = {
   id: number
   feature_state_value: string
@@ -316,5 +333,8 @@ export type Res = {
     }
     value: string
   }
+
+  projectFlags: PagedResponse<ProjectFlag>
+  identityFeatureStates: IdentityFeatureState[]
   // END OF TYPES
 }

frontend/web/components/AlertBar.js

@@ -1,5 +1,5 @@
 import React from 'react'
-import ModalClose from './modals/base/ModalClose';
+import ModalClose from './modals/base/ModalClose'
 
 const AlertBar = class extends React.Component {
   state = {}

frontend/web/components/CompareEnvironments.js

@@ -8,6 +8,8 @@ import FeatureListStore from 'common/stores/feature-list-store'
 import ConfigProvider from 'common/providers/ConfigProvider'
 import Permission from 'common/providers/Permission'
 import Tag from './tags/Tag'
+import { getProjectFlags } from 'common/services/useProjectFlag'
+import { getStore } from 'common/store'
 
 const featureNameWidth = 300
 
@@ -45,8 +47,8 @@ class CompareEnvironments extends Component {
     return Promise.all([
       this.state.projectFlags
         ? Promise.resolve({ results: this.state.projectFlags })
-        : data.get(
-            `${Project.api}projects/${this.props.projectId}/features/?page_size=999`,
+        : getProjectFlags(getStore(), { project: this.props.projectId }).then(
+            (res) => res.data,
           ),
       data.get(
         `${Project.api}environments/${this.state.environmentLeft}/featurestates/?page_size=999`,
@@ -122,7 +124,12 @@ class CompareEnvironments extends Component {
           <Row>
             <div style={{ width: featureNameWidth }}>
               <EnvironmentSelect
-                ignoreAPIKey={this.state.environmentRight}
+                ignoreAPIKey={
+                  this.state.environmentRight
+                    ? [this.state.environmentRight]
+                    : undefined
+                }
+                projectId={this.props.projectId}
                 onChange={(environmentLeft) =>
                   this.setState({ environmentLeft })
                 }
@@ -136,7 +143,12 @@ class CompareEnvironments extends Component {
 
             <div style={{ width: featureNameWidth }}>
               <EnvironmentSelect
-                ignoreAPIKey={this.state.environmentLeft}
+                projectId={this.props.projectId}
+                ignore={
+                  this.state.environmentLeft
+                    ? [this.state.environmentLeft]
+                    : undefined
+                }
                 onChange={(environmentRight) =>
                   this.setState({ environmentRight })
                 }