many fixes

libs/pages/application/src/index.ts

@@ -1,2 +1 @@
-export * from './lib/slices/environment-variable-ui.slice'
 export * from './lib/page-application'

libs/pages/application/src/lib/feature/import-environment-variable-modal-feature/import-environment-variable-modal-feature.tsx

@@ -72,7 +72,7 @@ export function ImportEnvironmentVariableModalFeature(props: ImportEnvironmentVa
   }, [fileParsed, methods])
 
   const { getRootProps, getInputProps, isDragActive } = useDropzone({
-    onDrop: (acceptedFiles, fileRejections, event) => onDrop(acceptedFiles, handleData),
+    onDrop: (acceptedFiles) => onDrop(acceptedFiles, handleData),
   })
 
   return (

libs/pages/application/src/lib/feature/page-variables-feature/page-variables-feature.tsx

@@ -1,6 +1,6 @@
 import { shallowEqual, useDispatch, useSelector } from 'react-redux'
 import { AppDispatch, RootState } from '@console/store/data'
-import { useEffect, useMemo, useState } from 'react'
+import { useContext, useEffect, useMemo, useState } from 'react'
 import {
   environmentVariableFactoryMock,
   fetchEnvironmentVariables,
@@ -21,7 +21,7 @@ import {
 import { useDocumentTitle } from '@console/shared/utils'
 import PageVariables from '../../ui/page-variables/page-variables'
 import { sortVariable } from './utils/sort-variable'
-import { environmentVariableUiActions } from '@console/pages/application'
+import { ApplicationContext } from '../../ui/container/container'
 
 export function PageVariablesFeature() {
   useDocumentTitle('Environment Variables – Qovery')
@@ -57,8 +57,10 @@ export function PageVariablesFeature() {
   const [data, setData] = useState<EnvironmentVariableSecretOrPublic[]>(sortVariableMemo || placeholder)
   const [isLoading, setLoading] = useState(false)
 
+  const { setShowHideAllEnvironmentVariablesValues } = useContext(ApplicationContext)
+
   useEffect(() => {
-    dispatch(environmentVariableUiActions.toggleShowAll(false))
+    setShowHideAllEnvironmentVariablesValues(false)
     dispatch(fetchEnvironmentVariables(applicationId))
     dispatch(fetchSecretEnvironmentVariables(applicationId))
   }, [dispatch, applicationId])

libs/pages/application/src/lib/feature/table-row-environment-variable-feature/table-row-environment-variable-feature.tsx

@@ -19,9 +19,10 @@ import CrudEnvironmentVariableModalFeature, {
 import { useParams } from 'react-router'
 import { deleteEnvironmentVariable, deleteSecret } from '@console/domains/environment-variable'
 import { EnvironmentVariableScopeEnum } from 'qovery-typescript-axios'
-import { useDispatch, useSelector } from 'react-redux'
-import { AppDispatch, RootState } from '@console/store/data'
-import { getEnvironmentVariableUiState } from '@console/pages/application'
+import { useDispatch } from 'react-redux'
+import { AppDispatch } from '@console/store/data'
+import { useContext } from 'react'
+import { ApplicationContext } from '../../ui/container/container'
 
 export interface TableRowEnvironmentVariableFeatureProps {
   variable: EnvironmentVariableSecretOrPublic
@@ -35,7 +36,7 @@ export function TableRowEnvironmentVariableFeature(props: TableRowEnvironmentVar
   const { openModal, closeModal } = useModal()
   const { applicationId = '', projectId = '', environmentId = '' } = useParams()
   const { openModalConfirmation } = useModalConfirmation()
-  const defaultShowHideValue = useSelector<RootState, boolean>((state) => getEnvironmentVariableUiState(state).showAll)
+  const { showHideAllEnvironmentVariablesValues: defaultShowHideValue } = useContext(ApplicationContext)
 
   const dispatch = useDispatch<AppDispatch>()
 

libs/pages/application/src/lib/feature/tabs-feature/tabs-feature.tsx

@@ -11,7 +11,7 @@ import {
   TabsItem,
   useModal,
 } from '@console/shared/ui'
-import { ReactNode } from 'react'
+import { ReactNode, useContext } from 'react'
 import { RunningStatus } from '@console/shared/enums'
 import {
   APPLICATION_DEPLOYMENTS_URL,
@@ -22,8 +22,8 @@ import {
 } from '@console/shared/router'
 import { StateEnum } from 'qovery-typescript-axios'
 import { matchPath, useLocation, useParams } from 'react-router'
-import { useDispatch, useSelector } from 'react-redux'
-import { AppDispatch, RootState } from '@console/store/data'
+import { useSelector } from 'react-redux'
+import { RootState } from '@console/store/data'
 import { ApplicationEntity } from '@console/shared/interfaces'
 import { getApplicationsState } from '@console/domains/application'
 import { ClickEvent } from '@szhsin/react-menu'
@@ -32,7 +32,7 @@ import CrudEnvironmentVariableModalFeature, {
   EnvironmentVariableType,
 } from '../crud-environment-variable-modal-feature/crud-environment-variable-modal-feature'
 import ImportEnvironmentVariableModalFeature from '../import-environment-variable-modal-feature/import-environment-variable-modal-feature'
-import { environmentVariableUiActions, getEnvironmentVariableUiState } from '@console/pages/application'
+import { ApplicationContext } from '../../ui/container/container'
 
 export function TabsFeature() {
   const { organizationId, projectId = '', environmentId = '', applicationId = '' } = useParams()
@@ -42,9 +42,8 @@ export function TabsFeature() {
   const location = useLocation()
   const { openModal, closeModal } = useModal()
 
-  const globalShowHideValue = useSelector<RootState, boolean>((state) => getEnvironmentVariableUiState(state).showAll)
-
-  const dispatch = useDispatch<AppDispatch>()
+  const { showHideAllEnvironmentVariablesValues: globalShowHideValue, setShowHideAllEnvironmentVariablesValues } =
+    useContext(ApplicationContext)
 
   const items: TabsItem[] = [
     {
@@ -137,11 +136,6 @@ export function TabsFeature() {
             },
             contentLeft: <Icon name="icon-solid-cloud-arrow-up" className="text-sm text-brand-400" />,
           },
-          {
-            name: 'Export Terraform file',
-            onClick: (e: ClickEvent) => console.log(e, 'Stop'),
-            contentLeft: <Icon name="icon-solid-cloud-arrow-down" className="text-sm text-brand-400" />,
-          },
         ],
       },
     ]
@@ -154,7 +148,7 @@ export function TabsFeature() {
         style={ButtonStyle.FLAT}
         iconLeft={!globalShowHideValue ? IconAwesomeEnum.EYE : IconAwesomeEnum.EYE_SLASH}
         onClick={() => {
-          dispatch(environmentVariableUiActions.toggleShowAll(!globalShowHideValue))
+          setShowHideAllEnvironmentVariablesValues(!globalShowHideValue)
         }}
       >
         {globalShowHideValue ? 'Hide all' : 'Show all'}

libs/pages/application/src/lib/ui/container/container.tsx

@@ -19,9 +19,18 @@ import { Environment } from 'qovery-typescript-axios'
 import { useParams } from 'react-router'
 import { ApplicationEntity } from '@console/shared/interfaces'
 import TabsFeature from '../../feature/tabs-feature/tabs-feature'
+import { createContext, useState } from 'react'
 
 //import { ClickEvent } from '@szhsin/react-menu'
 
+export const ApplicationContext = createContext<{
+  showHideAllEnvironmentVariablesValues: boolean
+  setShowHideAllEnvironmentVariablesValues: (b: boolean) => void
+}>({
+  showHideAllEnvironmentVariablesValues: false,
+  setShowHideAllEnvironmentVariablesValues: (b: boolean) => {},
+})
+
 export interface ContainerProps {
   statusActions: StatusMenuActions[]
   application?: ApplicationEntity
@@ -33,6 +42,7 @@ export interface ContainerProps {
 export function Container(props: ContainerProps) {
   const { application, environment, children, statusActions, removeApplication } = props
   const { organizationId, projectId, environmentId, applicationId } = useParams()
+  const [showHideAllEnvironmentVariablesValues, setShowHideAllEnvironmentVariablesValues] = useState<boolean>(false)
 
   const copyContent = `Organization ID: ${organizationId}\nProject ID: ${projectId}\nEnvironment ID: ${environmentId}\nService ID: ${applicationId}`
 
@@ -175,7 +185,9 @@ export function Container(props: ContainerProps) {
   )
 
   return (
-    <>
+    <ApplicationContext.Provider
+      value={{ showHideAllEnvironmentVariablesValues, setShowHideAllEnvironmentVariablesValues }}
+    >
       <Header
         title={application?.name}
         icon={IconEnum.APPLICATION}
@@ -186,7 +198,7 @@ export function Container(props: ContainerProps) {
       />
       <TabsFeature />
       {children}
-    </>
+    </ApplicationContext.Provider>
   )
 }
 

libs/pages/application/src/lib/ui/import-environment-variable-modal/import-environment-variable-modal.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable-next-line */
 import { Controller, useFormContext } from 'react-hook-form'
 import {
   Button,
@@ -9,7 +8,6 @@ import {
   InputSelectSmall,
   InputTextSmall,
   InputToggle,
-  Tooltip,
 } from '@console/shared/ui'
 import { EnvironmentVariableScopeEnum } from 'qovery-typescript-axios'
 import { computeAvailableScope } from '../../utils/compute-available-environment-variable-scope'
@@ -56,20 +54,14 @@ export function ImportEnvironmentVariableModal(props: ImportEnvironmentVariableM
         </>
       ) : (
         <>
-          <div className="flex gap-2 items-center mb-6">
+          <div className="mb-6">
             <InputToggle
               dataTestId="overwrite-enabled"
               value={props.overwriteEnabled}
               onChange={props.setOverwriteEnabled}
+              title="Enable overwrite"
+              description="If enabled, existing variables will be overwritten."
             />
-            <div className="text-text-500 text-sm font-medium flex items-center gap-2">
-              Enable overwrite
-              <Tooltip content={'If enabled, existing variables will be overwritten.'}>
-                <div>
-                  <Icon name={IconAwesomeEnum.CIRCLE_INFO} />
-                </div>
-              </Tooltip>
-            </div>
           </div>
 
           <form onSubmit={props.onSubmit}>

libs/shared/ui/src/lib/components/dropzone/dropzone.tsx

@@ -11,7 +11,7 @@ export function Dropzone(props: DropzoneProps) {
 
   return (
     <div
-      className={`flex w-full items-center justify-center min-h-[144px] rounded bg-element-light-lighter-300 border border-element-light-lighter-600 text-text-400 text-xs ${classNamesDragIsActive} ${props.className}`}
+      className={`flex w-full items-center justify-center min-h-[144px] rounded bg-element-light-lighter-300 border border-element-light-lighter-600 hover:border-element-light-lighter-700 text-text-400 text-xs ${classNamesDragIsActive} ${props.className}`}
     >
       <div className="flex items-center h-full justify-center flex-col text-center">
         <Icon name={IconAwesomeEnum.FILE_ARROW_DOWN} className="text-xl mb-2" />

libs/shared/ui/src/lib/components/inputs/input-text-small/input-text-small.tsx

@@ -47,7 +47,7 @@ export function InputTextSmall(props: InputTextSmallProps) {
           {props.label}
         </label>
         <input
-          className="absolute text-sm top-0 left-0 h-full w-full text-text-600 placeholder:text-text-400 rounded px-4"
+          className="absolute text-sm top-0 left-0 h-full w-full text-text-600 placeholder:text-text-400 rounded px-2"
           name={name}
           type={type}
           placeholder={placeholder}

libs/shared/ui/src/lib/components/inputs/input-toggle/input-toggle.tsx

@@ -28,7 +28,7 @@ export function InputToggle(props: InputToggleProps) {
   }
 
   return (
-    <div data-testid="input-toggle" className={`flex items-start ${className}`}>
+    <div data-testid="input-toggle" className={`flex ${description ? 'items-center' : 'items-start'} ${className}`}>
       <div
         data-testid={props.dataTestId || 'input-toggle-button'}
         aria-label="toggle-btn"
@@ -53,7 +53,7 @@ export function InputToggle(props: InputToggleProps) {
       </div>
       <div onClick={changeToggle} className="ml-3 cursor-pointer">
         {title && <p className={`text-text-600 text-ssm font-medium ${description ? 'mb-1' : ''}`}>{title}</p>}
-        {description && <p className="text-xs text-text-400">{description}</p>}
+        {description && <div className="text-xs text-text-400">{description}</div>}
       </div>
     </div>
   )

libs/shared/ui/src/lib/styles/components/input.scss

@@ -108,7 +108,7 @@
 }
 
 .input__select--small {
-  @apply pl-4 pr-8 pt-2 pb-2 bg-element-light-lighter-200 border border-element-light-lighter-500 text-text-700 rounded text-sm appearance-none w-full min-h-0;
+  @apply pl-2 pr-6 pt-2 pb-2 bg-element-light-lighter-200 border border-element-light-lighter-500 text-text-700 rounded text-sm appearance-none w-full min-h-0;
 }
 
 // time

libs/store/data/src/lib/root.ts

@@ -21,12 +21,10 @@ import {
   initialSecretEnvironmentVariablesState,
   secretEnvironmentVariables,
 } from '@console/domains/environment-variable'
-import { environmentVariableUi, initialEnvironmentVariableUiState } from '@console/pages/application'
 
 export const uiReducer = combineReducers({
   user: user,
   userSignUp: userSignUp,
-  environmentVariable: environmentVariableUi,
 })
 
 export const projectReducer = combineReducers({
@@ -66,7 +64,6 @@ export const initialRootState = (): RootState => ({
   ui: {
     user: initialUserState,
     userSignUp: initialUserSignUpState,
-    environmentVariable: initialEnvironmentVariableUiState,
   },
   entities: {
     organization: initialOrganizationState,