Feat(environment-variable): import feature (#247)

* feat(env-variable): tdd import modal * test wip * adding lib dropzone and testing dropzone * unit testing finished and starting to design * wip + rework on icon schematics and DE of icons * rework of text-small component * changes on inputs * full feature * full feature delivered * fix tests * comment to explain fix * clean package.json * various fixes * all done * fix import update * adding more tests * final steps with overwrite enabled * update api version * max-height on modal * removing max-height * removing max width * rebasing and applying new modal functionment * many fixes
Qovery · Aug 4, 2022 · 076e5f4 · 076e5f4
1 parent 8d5fb2d
commit 076e5f4
Show file tree

Hide file tree

Showing 60 changed files with 1,852 additions and 322 deletions.
diff --git a/__tests__/utils/wrap-with-react-hook-form.tsx b/__tests__/utils/wrap-with-react-hook-form.tsx
@@ -10,7 +10,7 @@ import React from 'react'
  */
 export function wrapWithReactHookForm(ui: React.ReactElement, { defaultValues = {} } = {}) {
   const Wrapper = ({ children }: { children: React.ReactElement }) => {
-    const methods = useForm({ defaultValues, mode: 'onChange' })
+    const methods = useForm({ defaultValues, mode: 'all' })
     return <FormProvider {...methods}>{children}</FormProvider>
   }
 

diff --git a/libs/domains/environment-variable/src/lib/slices/environment-variables.slice.ts b/libs/domains/environment-variable/src/lib/slices/environment-variables.slice.ts
@@ -6,6 +6,8 @@ import {
   EnvironmentVariableScopeEnum,
   ProjectEnvironmentVariableApi,
   Value,
+  VariableImport,
+  VariableImportRequestVars,
 } from 'qovery-typescript-axios'
 
 import { RootState } from '@console/store/data'
@@ -30,6 +32,18 @@ export const fetchEnvironmentVariables = createAsyncThunk(
   }
 )
 
+export const importEnvironmentVariables = createAsyncThunk(
+  'environmentVariables/import',
+  async (payload: { applicationId: string; vars: VariableImportRequestVars[]; overwriteEnabled: boolean }) => {
+    const response = await applicationEnvironmentVariableApi.importEnvironmentVariable(payload.applicationId, {
+      overwrite: payload.overwriteEnabled,
+      vars: payload.vars,
+    })
+
+    return response.data as VariableImport
+  }
+)
+
 export const createEnvironmentVariablePayloadCreator = async (payload: {
   entityId: string
   applicationId: string
@@ -351,6 +365,24 @@ export const environmentVariablesSlice = createSlice({
         state.error = action.error.message
         toastError(action.error)
       })
+      .addCase(importEnvironmentVariables.pending, (state: EnvironmentVariablesState, action) => {
+        state.loadingStatus = 'loading'
+      })
+      .addCase(importEnvironmentVariables.fulfilled, (state: EnvironmentVariablesState, action) => {
+        state.error = null
+        state.loadingStatus = 'loaded'
+        const nbSuccess = action.payload.successful_imported_variables.length
+        const nbTotal = action.payload.total_variables_to_import
+        toast(
+          ToastEnum.SUCCESS,
+          'Creation success',
+          `${nbSuccess} out of ${nbTotal} variables have been imported successfully`
+        )
+      })
+      .addCase(importEnvironmentVariables.rejected, (state: EnvironmentVariablesState, action) => {
+        toastError(action.error)
+        state.error = action.error.message
+      })
   },
 })
 

diff --git a/.../crud-environment-variable-modal-feature/crud-environment-variable-modal-feature.spec.tsx b/.../crud-environment-variable-modal-feature/crud-environment-variable-modal-feature.spec.tsx
@@ -5,8 +5,6 @@ import CrudEnvironmentVariableModalFeature, {
 } from './crud-environment-variable-modal-feature'
 import { render } from '__tests__/utils/setup-jest'
 import { mockEnvironmentVariable } from '@console/domains/environment-variable'
-import { act, fireEvent, screen } from '@testing-library/react'
-import { wrapWithReactHookForm } from '__tests__/utils/wrap-with-react-hook-form'
 
 const props: CrudEnvironmentVariableModalFeatureProps = {
   mode: EnvironmentVariableCrudMode.CREATION,
@@ -20,34 +18,10 @@ const props: CrudEnvironmentVariableModalFeatureProps = {
 
 describe('CrudEnvironmentVariableModalFeature', () => {
   let baseElement: any
-  let defaultValues: any
-
-  beforeEach(() => {
-    defaultValues = {
-      key: '',
-      scope: '',
-      value: '',
-      isSecret: false,
-    }
-  })
 
   it('should render successfully', () => {
-    baseElement = render(wrapWithReactHookForm(<CrudEnvironmentVariableModalFeature {...props} />, { defaultValues }))
+    baseElement = render(<CrudEnvironmentVariableModalFeature {...props} />)
 
     expect(baseElement).toBeTruthy()
   })
-
-  it('it should remove required for value if type is alias', async () => {
-    props.type = EnvironmentVariableType.OVERRIDE
-    render(wrapWithReactHookForm(<CrudEnvironmentVariableModalFeature {...props} />, { defaultValues }))
-
-    const textarea = screen.getByLabelText('Value') as HTMLTextAreaElement
-
-    // todo this is not working because not triggering the error message to appear
-    act(() => {
-      fireEvent.change(textarea, { target: { value: 'SDSD' } })
-    })
-
-    const submitButton = screen.getByRole('button', { name: 'Confirm' }) as HTMLButtonElement
-  })
 })
diff --git a/...ature/crud-environment-variable-modal-feature/crud-environment-variable-modal-feature.tsx b/...ature/crud-environment-variable-modal-feature/crud-environment-variable-modal-feature.tsx
@@ -4,9 +4,9 @@ import { FormProvider, useForm } from 'react-hook-form'
 import { useDispatch, useSelector } from 'react-redux'
 import { AppDispatch, RootState } from '@console/store/data'
 import { getEnvironmentVariablesState } from '@console/domains/environment-variable'
-import { EnvironmentVariableScopeEnum } from 'qovery-typescript-axios'
 import { useEffect, useState } from 'react'
 import { handleSubmitForEnvSecretCreation } from './handle-submit/handle-submit'
+import { computeAvailableScope } from '../../utils/compute-available-environment-variable-scope'
 
 export interface CrudEnvironmentVariableModalFeatureProps {
   variable?: EnvironmentVariableSecretOrPublic
@@ -101,46 +101,6 @@ export function CrudEnvironmentVariableModalFeature(props: CrudEnvironmentVariab
     }
   }
 
-  const computeAvailableScope = (): EnvironmentVariableScopeEnum[] => {
-    if (!props.variable) {
-      return [
-        EnvironmentVariableScopeEnum.PROJECT,
-        EnvironmentVariableScopeEnum.ENVIRONMENT,
-        EnvironmentVariableScopeEnum.APPLICATION,
-      ]
-    }
-
-    const environmentScopes: {
-      name: EnvironmentVariableScopeEnum
-      hierarchy: number
-    }[] = [
-      {
-        name: EnvironmentVariableScopeEnum.BUILT_IN,
-        hierarchy: -1,
-      },
-      {
-        name: EnvironmentVariableScopeEnum.PROJECT,
-        hierarchy: 1,
-      },
-      {
-        name: EnvironmentVariableScopeEnum.ENVIRONMENT,
-        hierarchy: 2,
-      },
-      {
-        name: EnvironmentVariableScopeEnum.APPLICATION,
-        hierarchy: 3,
-      },
-    ]
-
-    const theScope = environmentScopes.find((s) => s.name === props?.variable?.scope)
-
-    return environmentScopes
-      .filter((scope) => {
-        return scope.hierarchy >= (theScope?.hierarchy || -1) && scope.hierarchy >= 0
-      })
-      .map((scope) => scope.name)
-  }
-
   return (
     <FormProvider {...methods}>
       <CrudEnvironmentVariableModal
@@ -150,7 +110,7 @@ export function CrudEnvironmentVariableModalFeature(props: CrudEnvironmentVariab
         onSubmit={onSubmit}
         closeModal={props.closeModal}
         type={props.type}
-        availableScopes={computeAvailableScope()}
+        availableScopes={computeAvailableScope(variable?.scope)}
         loading={loading}
       />
     </FormProvider>