refactor: create feature migration

frontend/common/ES6Component.js

@@ -1,4 +1,4 @@
-module.exports = function es6Component(context, onUnmount) {
+function es6Component(context, onUnmount) {
   context._listeners = []
 
   context.listenTo = function listenTo(store, event, callback) {
@@ -55,3 +55,5 @@ module.exports = function es6Component(context, onUnmount) {
     }
   }
 }
+
+export default es6Component

frontend/common/dispatcher/action-constants.js

@@ -48,4 +48,4 @@ const Actions = Object.assign({}, require('./base/_action-constants'), {
 })
 
 window.Actions = Actions
-module.exports = Actions
+export default Actions

frontend/common/dispatcher/app-actions.js

@@ -376,5 +376,4 @@ const AppActions = Object.assign({}, require('./base/_app-actions'), {
   },
 })
 
-module.exports = AppActions
-window.AppActions = AppActions
+export default AppActions

frontend/common/hooks/useHasGithubIntegration.ts

@@ -0,0 +1,16 @@
+import AccountStore from 'common/stores/account-store'
+import { useGetGithubIntegrationQuery } from 'common/services/useGithubIntegration'
+
+export function useHasGithubIntegration() {
+  const organisationId = AccountStore.getOrganisation()?.id
+  const { data } = useGetGithubIntegrationQuery(
+    { organisation_id: organisationId },
+    { skip: !organisationId },
+  )
+
+  return {
+    githubId: data?.results?.[0]?.id ?? '',
+    hasIntegration: !!data?.results?.length,
+    organisationId,
+  }
+}

frontend/common/providers/FeatureListProvider.js

@@ -264,4 +264,4 @@ FeatureListProvider.propTypes = {
   onSave: OptionalFunc,
 }
 
-module.exports = FeatureListProvider
+export default FeatureListProvider

frontend/common/types/requests.ts

@@ -250,7 +250,10 @@ export type Req = {
   getTags: {
     projectId: number
   }
-  createTag: { projectId: number; tag: Omit<Tag, 'id'> }
+  createTag: {
+    projectId: number
+    tag: Omit<Tag, 'id' | 'project' | 'type' | 'is_system_tag' | 'is_permanent'>
+  }
   getSegment: { projectId: number; id: number }
   updateAccount: Account
   deleteAccount: {

frontend/web/components/base/grid/Column.js

@@ -24,4 +24,4 @@ Column.propTypes = {
   value: OptionalNumber,
 }
 
-module.exports = Column
+export default Column

frontend/web/components/base/grid/Flex.js

@@ -24,4 +24,4 @@ Flex.propTypes = {
   value: OptionalNumber,
 }
 
-module.exports = Flex
+export default Flex

frontend/web/components/feature-summary/FeatureRow.tsx

@@ -206,7 +206,6 @@ const FeatureRow: FC<FeatureRowProps> = (props) => {
       ? {
           environmentFlag,
           environmentId,
-          flagId: environmentFlag?.id,
           history,
           noPermissions: !permission,
           projectFlag,
@@ -216,7 +215,6 @@ const FeatureRow: FC<FeatureRowProps> = (props) => {
       : {
           environmentFlag,
           environmentId,
-          flagId: environmentFlag?.id,
           hasUnhealthyEvents:
             isFeatureHealthEnabled && !!featureUnhealthyEvents?.length,
           hideTagsByType: ['UNHEALTHY'],

frontend/web/components/modals/AuditLogWebhooks.tsx

@@ -23,7 +23,10 @@ type AuditLogWebhooksType = {
 
 const AuditLogWebhooks: FC<AuditLogWebhooksType> = ({ organisationId }) => {
   const { data: webhooks, isLoading: webhooksLoading } =
-    useGetAuditLogWebhooksQuery({ organisationId }, { skip: !organisationId })
+    useGetAuditLogWebhooksQuery(
+      { organisationId: parseInt(organisationId) },
+      { skip: !organisationId },
+    )
   const createWebhook = () => {
     openModal(
       'New Webhook',

frontend/web/components/modals/create-experiment/index.js

@@ -19,11 +19,11 @@ import { saveFeatureWithValidation } from 'components/saveFeatureWithValidation'
 import { FlagValueFooter } from 'components/modals/FlagValueFooter'
 import { getChangeRequests } from 'common/services/useChangeRequest'
 import ProjectProvider from 'common/providers/ProjectProvider'
-import CreateFeature from 'components/modals/create-feature/tabs/CreateFeature'
-import FeatureValueTab from 'components/modals/create-feature/tabs/FeatureValue'
-import FeatureLimitAlert from 'components/modals/create-feature/FeatureLimitAlert'
-import FeatureUpdateSummary from 'components/modals/create-feature/FeatureUpdateSummary'
-import FeatureNameInput from 'components/modals/create-feature/FeatureNameInput'
+import CreateFeature from 'components/modals/create-feature/tabs/CreateFeatureTab'
+import FeatureValueTab from 'components/modals/create-feature/tabs/FeatureValueTab'
+import FeatureLimitAlert from 'components/modals/create-feature/components/FeatureLimitAlert'
+import FeatureUpdateSummary from 'components/modals/create-feature/components/FeatureUpdateSummary'
+import FeatureNameInput from 'components/modals/create-feature/components/FeatureNameInput'
 import ExperimentResultsTab from './ExperimentResultsTab'
 import moment from 'moment'
 

frontend/web/components/modals/create-feature/FeatureLimitAlert.tsx → frontend/web/components/modals/create-feature/components/FeatureLimitAlert.tsx

@@ -11,7 +11,9 @@ const FeatureLimitAlert: FC<FeatureLimitAlertType> = ({
   onChange,
   projectId,
 }) => {
-  const { data: project } = useGetProjectQuery({ id: `${projectId}` })
+  const { data: project } = useGetProjectQuery({
+    id: typeof projectId === 'string' ? parseInt(projectId, 10) : projectId,
+  })
 
   const featureLimitAlert = Utils.calculateRemainingLimitsPercentage(
     project?.total_features,

frontend/web/components/modals/create-feature/FeatureNameInput.tsx → frontend/web/components/modals/create-feature/components/FeatureNameInput.tsx

@@ -12,7 +12,7 @@ type FeatureNameInputProps = {
   value: string
   onChange: (name: string) => void
   caseSensitive: boolean
-  regex?: string
+  regex?: string | null
   regexValid: boolean
   autoFocus?: boolean
 }

frontend/web/components/modals/create-feature/components/IdentitySaveFooter.tsx

@@ -0,0 +1,58 @@
+import React, { FC } from 'react'
+import Utils from 'common/utils/utils'
+import Button from 'components/base/forms/Button'
+import { EnvironmentPermission } from 'common/types/permissions.types'
+
+type IdentitySaveFooterProps = {
+  identityName?: string
+  environmentName: string
+  savePermission: boolean
+  isSaving: boolean
+  projectFlagName: string
+  invalid: boolean | number
+  onSave: () => void
+}
+
+const IdentitySaveFooter: FC<IdentitySaveFooterProps> = ({
+  environmentName,
+  identityName,
+  invalid,
+  isSaving,
+  onSave,
+  projectFlagName,
+  savePermission,
+}) => {
+  return (
+    <div className='pr-3'>
+      <div className='mb-3 mt-4'>
+        <p className='text-left ml-3 modal-caption fs-small lh-small'>
+          This will update the feature value for the user{' '}
+          <strong>{identityName}</strong> in
+          <strong> {environmentName}.</strong>
+          {' Any segment overrides for this feature will now be ignored.'}
+        </p>
+      </div>
+
+      <div className='text-right mb-2'>
+        {Utils.renderWithPermission(
+          savePermission,
+          EnvironmentPermission.UPDATE_FEATURE_STATE,
+          <div>
+            <Button
+              onClick={onSave}
+              data-test='update-feature-btn'
+              id='update-feature-btn'
+              disabled={
+                !savePermission || isSaving || !projectFlagName || !!invalid
+              }
+            >
+              {isSaving ? 'Updating' : 'Update Feature'}
+            </Button>
+          </div>,
+        )}
+      </div>
+    </div>
+  )
+}
+
+export default IdentitySaveFooter

frontend/web/components/modals/create-feature/hoc/FeatureProvider.tsx

@@ -0,0 +1,121 @@
+import React, { Component } from 'react'
+import FeatureListStore from 'common/stores/feature-list-store'
+import ES6Component from 'common/ES6Component'
+import { setModalTitle } from 'components/modals/base/ModalDefault'
+
+// TODO: Migrate to a custom hook once we move away from Flux stores.
+// This class component is necessary because it uses ES6Component/listenTo
+// to subscribe to FeatureListStore events, which requires class lifecycle methods.
+export default function withFeatureProvider(
+  WrappedComponent: React.ComponentType<any>,
+) {
+  class FeatureProvider extends Component<any, any> {
+    constructor(props: any) {
+      super(props)
+      this.state = {
+        ...props,
+      }
+      ES6Component(this)
+    }
+
+    componentDidMount() {
+      ES6Component(this)
+      this.listenTo(
+        FeatureListStore,
+        'saved',
+        ({
+          changeRequest,
+          createdFlag,
+          error,
+          isCreate,
+          updatedChangeRequest,
+        }: any = {}) => {
+          if (error?.data?.metadata) {
+            error.data.metadata?.forEach((m: any) => {
+              if (Object.keys(m).length > 0) {
+                toast(m.non_field_errors[0], 'danger')
+              }
+            })
+          } else if (error?.data) {
+            toast('Error updating the Flag', 'danger')
+            return
+          } else {
+            const isEditingChangeRequest =
+              this.props.changeRequest && changeRequest
+            const operation = createdFlag || isCreate ? 'Created' : 'Updated'
+            const type = changeRequest ? 'Change Request' : 'Feature'
+
+            const toastText = isEditingChangeRequest
+              ? `Updated ${type}`
+              : `${operation} ${type}`
+            const toastAction = changeRequest
+              ? {
+                  buttonText: 'Open',
+                  onClick: () => {
+                    closeModal()
+                    this.props.history.push(
+                      `/project/${this.props.projectId}/environment/${this.props.environmentId}/change-requests/${updatedChangeRequest?.id}`,
+                    )
+                  },
+                }
+              : undefined
+
+            toast(toastText, 'success', undefined, toastAction)
+          }
+          const envFlags = FeatureListStore.getEnvironmentFlags()
+
+          if (createdFlag) {
+            const projectFlag = FeatureListStore.getProjectFlags()?.find?.(
+              (flag: any) => flag.name === createdFlag,
+            )
+            window.history.replaceState(
+              {},
+              `${document.location.pathname}?feature=${projectFlag.id}`,
+            )
+            const newEnvironmentFlag = envFlags?.[projectFlag.id] || {}
+            setModalTitle(`Edit Feature ${projectFlag.name}`)
+            this.setState({
+              environmentFlag: {
+                ...this.state.environmentFlag,
+                ...(newEnvironmentFlag || {}),
+              },
+              projectFlag,
+              segmentsChanged: false,
+              settingsChanged: false,
+              valueChanged: false,
+            })
+          } else if (this.props.projectFlag) {
+            const newEnvironmentFlag =
+              envFlags?.[this.props.projectFlag.id] || {}
+            const newProjectFlag = FeatureListStore.getProjectFlags()?.find?.(
+              (flag: any) => flag.id === this.props.projectFlag.id,
+            )
+            this.setState({
+              environmentFlag: {
+                ...this.state.environmentFlag,
+                ...(newEnvironmentFlag || {}),
+              },
+              projectFlag: newProjectFlag,
+              segmentsChanged: false,
+              settingsChanged: false,
+              valueChanged: false,
+            })
+          }
+        },
+      )
+    }
+
+    listenTo: any
+
+    render() {
+      return (
+        <WrappedComponent
+          key={this.state.projectFlag?.id || 'new'}
+          {...this.state}
+        />
+      )
+    }
+  }
+
+  return FeatureProvider
+}