fix: Tidy up ld import (#3276)

Flagsmith · Jan 15, 2024 · 3ee8e6a · 3ee8e6a
1 parent 52b7614
commit 3ee8e6a
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 15 deletions.
diff --git a/frontend/common/types/requests.ts b/frontend/common/types/requests.ts
@@ -97,7 +97,9 @@ export type Req = {
     environmentId: string
     featureId: string
     enabled: boolean
-    feature_segment: featureSegment
+    feature_segment: {
+      segment: number
+    }
     feature_state_value: FeatureStateValue
   }
   getRoles: { organisation_id: string }
@@ -130,9 +132,15 @@ export type Req = {
   getGetSubscriptionMetadata: { id: string }
   getEnvironment: { id: string }
   getSubscriptionMetadata: { id: string }
-  createLaunchDarklyProjectImport: { project_id: string }
-  getLaunchDarklyProjectImport: { project_id: string }
-  getLaunchDarklyProjectsImport: { project_id: string; import_id: string }
+  createLaunchDarklyProjectImport: {
+    project_id: string
+    body: {
+      project_key: string
+      token: string
+    }
+  }
+  getLaunchDarklyProjectImport: { project_id: string; import_id: string }
+  getLaunchDarklyProjectsImport: { project_id: string }
   getUserWithRoles: { org_id: string; user_id: string }
   deleteUserWihRole: { org_id: string; user_id: string; role_id: string }
   getGroupWithRole: { org_id: string; group_id: string }

diff --git a/frontend/web/components/pages/ImportPage.tsx b/frontend/web/components/pages/ImportPage.tsx
@@ -1,11 +1,15 @@
-import React, { useEffect, useState } from 'react'
+import React, { FC, useEffect, useState } from 'react'
 import _data from 'common/data/base/_data'
 import {
   useCreateLaunchDarklyProjectImportMutation,
   useGetLaunchDarklyProjectImportQuery,
 } from 'common/services/useLaunchDarklyProjectImport'
 import AppLoader from 'components/AppLoader'
 import InfoMessage from 'components/InfoMessage'
+import Input from 'components/base/forms/Input'
+import Utils from 'common/utils/utils'
+import Button from 'components/base/forms/Button'
+import PanelSearch from 'components/PanelSearch'
 
 type ImportPageType = {
   projectId: string
@@ -14,21 +18,24 @@ type ImportPageType = {
 
 const ImportPage: FC<ImportPageType> = ({ projectId, projectName }) => {
   const [LDKey, setLDKey] = useState<string>('')
-  const [importId, setImportId] = useState<string>('')
+  const [importId, setImportId] = useState<number>()
   const [isLoading, setIsLoading] = useState<boolean>(false)
   const [isAppLoading, setAppIsLoading] = useState<boolean>(false)
-  const [projects, setProjects] = useState<string>([])
+  const [projects, setProjects] = useState<{ key: string; name: string }[]>([])
   const [createLaunchDarklyProjectImport, { data, isSuccess }] =
     useCreateLaunchDarklyProjectImportMutation()
 
   const {
     data: status,
     isSuccess: statusLoaded,
     refetch,
-  } = useGetLaunchDarklyProjectImportQuery({
-    import_id: importId,
-    project_id: projectId,
-  })
+  } = useGetLaunchDarklyProjectImportQuery(
+    {
+      import_id: `${importId}`,
+      project_id: projectId,
+    },
+    { skip: !importId },
+  )
 
   useEffect(() => {
     const checkImportStatus = async () => {
@@ -50,7 +57,7 @@ const ImportPage: FC<ImportPageType> = ({ projectId, projectName }) => {
   }, [statusLoaded, status, refetch])
 
   useEffect(() => {
-    if (isSuccess) {
+    if (isSuccess && data?.id) {
       setImportId(data.id)
       refetch()
     }
@@ -62,7 +69,7 @@ const ImportPage: FC<ImportPageType> = ({ projectId, projectName }) => {
       .get(`https://app.launchdarkly.com/api/v2/projects`, '', {
         'Authorization': LDKey,
       })
-      .then((res) => {
+      .then((res: { items: { key: string; name: string }[] }) => {
         setIsLoading(false)
         setProjects(res.items)
       })
@@ -100,7 +107,9 @@ const ImportPage: FC<ImportPageType> = ({ projectId, projectName }) => {
               <Input
                 value={LDKey}
                 name='ldkey'
-                onChange={(e) => setLDKey(Utils.safeParseEventValue(e))}
+                onChange={(e: InputEvent) =>
+                  setLDKey(Utils.safeParseEventValue(e))
+                }
                 type='text'
                 placeholder='My LaunchDarkly key'
               />
@@ -129,7 +138,10 @@ const ImportPage: FC<ImportPageType> = ({ projectId, projectName }) => {
                   listClassName='row mt-n2 gy-4'
                   title='LaunchDarkly Projects'
                   items={projects}
-                  renderRow={({ key, name }, i) => {
+                  renderRow={(
+                    { key, name }: { key: string; name: string },
+                    i: number,
+                  ) => {
                     return (
                       <>
                         <Button