feat: Flag group owners

frontend/common/services/useProjectFlag.ts

@@ -32,6 +32,12 @@ export const projectFlagService = service
   .enhanceEndpoints({ addTagTypes: ['ProjectFlag'] })
   .injectEndpoints({
     endpoints: (builder) => ({
+      getProjectFlag: builder.query<Res['projectFlag'], Req['getProjectFlag']>({
+        providesTags: (res) => [{ id: res?.id, type: 'ProjectFlag' }],
+        query: (query: Req['getProjectFlag']) => ({
+          url: `projects/${query.project}/features/${query.id}/`,
+        }),
+      }),
       getProjectFlags: builder.query<
         Res['projectFlags'],
         Req['getProjectFlags']
@@ -62,9 +68,21 @@ export async function getProjectFlags(
     projectFlagService.endpoints.getProjectFlags.initiate(data, options),
   )
 }
+export async function getProjectFlag(
+  store: any,
+  data: Req['getProjectFlag'],
+  options?: Parameters<
+    typeof projectFlagService.endpoints.getProjectFlag.initiate
+  >[1],
+) {
+  return store.dispatch(
+    projectFlagService.endpoints.getProjectFlag.initiate(data, options),
+  )
+}
 // END OF FUNCTION_EXPORTS
 
 export const {
+  useGetProjectFlagQuery,
   useGetProjectFlagsQuery,
   // END OF EXPORTS
 } = projectFlagService

frontend/common/types/requests.ts

@@ -114,6 +114,7 @@ export type Req = {
     user: string
   }
   getProjectFlags: { project: string }
+  getProjectFlag: { project: string; id: string }
   getRolesPermissionUsers: { organisation_id: string; role_id: string }
   deleteRolesPermissionUsers: {
     organisation_id: string

frontend/common/types/responses.ts

@@ -78,11 +78,11 @@ export type LaunchDarklyProjectImport = {
   updated_at: string
   completed_at: string
   status: {
-      requested_environment_count: number
-      requested_flag_count: number
-      result: string || null
-      error_message: string || null
-  },
+    requested_environment_count: number
+    requested_flag_count: number
+    result: string | null
+    error_message: string | null
+  }
   project: number
 }
 
@@ -257,6 +257,7 @@ export type ProjectFlag = {
   num_identity_overrides: number | null
   num_segment_overrides: number | null
   owners: User[]
+  owner_groups: UserGroupSummary[]
   project: number
   tags: number[]
   type: string
@@ -371,6 +372,7 @@ export type Res = {
   rolePermission: { id: string }
 
   projectFlags: PagedResponse<ProjectFlag>
+  projectFlag: ProjectFlag
   identityFeatureStates: IdentityFeatureState[]
   rolesPermissionUsers: RolePermissionUser
   rolePermissionGroup: { id: string }

frontend/web/components/FlagOwnerGroups.js

@@ -0,0 +1,122 @@
+import React, { Component } from 'react'
+import data from 'common/data/base/_data'
+import UserSelect from './UserSelect'
+import ConfigProvider from 'common/providers/ConfigProvider'
+import Icon from './Icon'
+import { close } from 'ionicons/icons'
+import { IonIcon } from '@ionic/react'
+import GroupSelect from './GroupSelect'
+import { getProjectFlag } from 'common/services/useProjectFlag'
+import { getStore } from 'common/store'
+
+class TheComponent extends Component {
+  state = {}
+  componentDidMount() {
+    this.getData()
+  }
+
+  getData = () => {
+    getProjectFlag(getStore(), {
+      id: this.props.id,
+      project: this.props.projectId,
+    }).then((res) => {
+      const groupOwners = (res.data.group_owners || []).map((v) => v.id)
+      this.setState({ groupOwners })
+    })
+  }
+
+  addOwner = (id) => {
+    this.setState({ groupOwners: (this.state.groupOwners || []).concat(id) })
+    data.post(
+      `${Project.api}projects/${this.props.projectId}/features/${this.props.id}/add-group-owners/`,
+      {
+        group_ids: [id],
+      },
+    )
+  }
+
+  removeOwner = (id) => {
+    this.setState({
+      groupOwners: (this.state.groupOwners || []).filter((v) => v !== id),
+    })
+    data.post(
+      `${Project.api}projects/${this.props.projectId}/features/${this.props.id}/remove-group-owners/`,
+      {
+        group_ids: [id],
+      },
+    )
+  }
+
+  getGroupOwners = (users, groupOwners) =>
+    users ? users.filter((v) => groupOwners.includes(v.id)) : []
+
+  render() {
+    const hasPermission = Utils.getPlansPermission('FLAG_OWNERS')
+
+    return (
+      <OrganisationProvider>
+        {({ groups }) => {
+          const ownerUsers = this.getGroupOwners(
+            groups,
+            this.state.groupOwners || [],
+          )
+          const res = (
+            <div>
+              <Row
+                className='clickable'
+                onClick={() => {
+                  if (hasPermission) this.setState({ showUsers: true })
+                }}
+              >
+                <label className='cols-sm-2 control-label'>
+                  Assigned groups{' '}
+                  <Icon name='setting' width={20} fill={'#656D7B'} />
+                </label>
+              </Row>
+              <Row style={{ rowGap: '12px' }}>
+                {hasPermission &&
+                  ownerUsers.map((u) => (
+                    <Row
+                      key={u.id}
+                      onClick={() => this.removeOwner(u.id)}
+                      className='chip mr-2'
+                    >
+                      <span className='font-weight-bold'>{u.name}</span>
+                      <span className='chip-icon ion'>
+                        <IonIcon icon={close} />
+                      </span>
+                    </Row>
+                  ))}
+                {!ownerUsers.length && (
+                  <div>This flag has no assigned groups</div>
+                )}
+              </Row>
+              <GroupSelect
+                groups={groups}
+                value={this.state.groupOwners}
+                isOpen={this.state.showUsers}
+                size={null}
+                onAdd={this.addOwner}
+                onRemove={this.removeOwner}
+                onToggle={() =>
+                  this.setState({ showUsers: !this.state.showUsers })
+                }
+              />
+            </div>
+          )
+          return hasPermission ? (
+            res
+          ) : (
+            <div>
+              {res}
+              The add flag assignees feature is available with our{' '}
+              <strong>Scale-up</strong> plan.
+            </div>
+          )
+        }}
+      </OrganisationProvider>
+    )
+  }
+}
+
+export default ConfigProvider(TheComponent)

frontend/web/components/FlagOwners.js

@@ -5,6 +5,8 @@ import ConfigProvider from 'common/providers/ConfigProvider'
 import Icon from './Icon'
 import { close } from 'ionicons/icons'
 import { IonIcon } from '@ionic/react'
+import { getProjectFlag } from 'common/services/useProjectFlag'
+import { getStore } from 'common/store'
 
 class TheComponent extends Component {
   state = {}
@@ -13,14 +15,13 @@ class TheComponent extends Component {
   }
 
   getData = () => {
-    data
-      .get(
-        `${Project.api}projects/${this.props.projectId}/features/${this.props.id}/`,
-      )
-      .then((res) => {
-        const owners = (res.owners || []).map((v) => v.id)
-        this.setState({ owners })
-      })
+    getProjectFlag(getStore(), {
+      id: this.props.id,
+      project: this.props.projectId,
+    }).then((res) => {
+      const owners = (res.data.owners || []).map((v) => v.id)
+      this.setState({ owners })
+    })
   }
 
   addOwner = (id) => {
@@ -62,7 +63,8 @@ class TheComponent extends Component {
                 }}
               >
                 <label className='cols-sm-2 control-label'>
-                  Assignees <Icon name='setting' width={20} fill={'#656D7B'} />
+                  Assigned users{' '}
+                  <Icon name='setting' width={20} fill={'#656D7B'} />
                 </label>
               </Row>
               <Row style={{ rowGap: '12px' }}>
@@ -81,7 +83,9 @@ class TheComponent extends Component {
                       </span>
                     </Row>
                   ))}
-                {!ownerUsers.length && <div>This flag has no assignees</div>}
+                {!ownerUsers.length && (
+                  <div>This flag has no assigned users</div>
+                )}
               </Row>
 
               <UserSelect

frontend/web/components/modals/CreateFlag.js

@@ -31,6 +31,7 @@ import { setInterceptClose } from './base/ModalDefault'
 import Icon from 'components/Icon'
 import ModalHR from './ModalHR'
 import FeatureValue from 'components/FeatureValue'
+import FlagOwnerGroups from 'components/FlagOwnerGroups'
 
 const CreateFlag = class extends Component {
   static displayName = 'CreateFlag'
@@ -518,12 +519,20 @@ const CreateFlag = class extends Component {
           >
             {({ permission: projectAdmin }) =>
               projectAdmin && (
-                <FormGroup className='mb-5 setting'>
-                  <FlagOwners
-                    projectId={this.props.projectId}
-                    id={projectFlag.id}
-                  />
-                </FormGroup>
+                <>
+                  <FormGroup className='mb-5 setting'>
+                    <FlagOwners
+                      projectId={this.props.projectId}
+                      id={projectFlag.id}
+                    />
+                  </FormGroup>
+                  <FormGroup className='mb-5 setting'>
+                    <FlagOwnerGroups
+                      projectId={this.props.projectId}
+                      id={projectFlag.id}
+                    />
+                  </FormGroup>
+                </>
               )
             }
           </Permission>