fix(storage): hot fix storage unit issue between mb and gb (#381)

libs/pages/database/src/lib/feature/page-settings-resources-feature/page-settings-resources-feature.tsx

@@ -44,7 +44,7 @@ export function PageSettingsResourcesFeature() {
  })
 
  const [memorySize, setMemorySize] = useState<MemorySizeEnum | string>(MemorySizeEnum.MB)
- const [storageSize, setStorageSize] = useState<MemorySizeEnum | string>(MemorySizeEnum.MB)
+ const [storageSize] = useState<MemorySizeEnum | string>(MemorySizeEnum.MB)
 
  useEffect(() => {
  methods.reset({
@@ -77,10 +77,8 @@ export function PageSettingsResourcesFeature() {
  onSubmit={onSubmit}
  loading={loading}
  database={database}
- storageSize={storageSize}
  memorySize={memorySize}
  getMemoryUnit={(value: string | MemorySizeEnum) => setMemorySize(value)}
- getStorageUnit={(value: string | MemorySizeEnum) => setStorageSize(value)}
  />
  </FormProvider>
  )

libs/pages/database/src/lib/ui/page-settings-resources/page-settings-resources.tsx

@@ -9,23 +9,22 @@ import {
  ButtonStyle,
  HelpSection,
  InputSizeUnit,
+ InputText,
  Slider,
  inputSizeUnitRules,
 } from '@qovery/shared/ui'
 import { convertCpuToVCpu } from '@qovery/shared/utils'
 
 export interface PageSettingsResourcesProps {
  onSubmit: FormEventHandler<HTMLFormElement>
- storageSize: MemorySizeEnum | string
  memorySize: MemorySizeEnum | string
  getMemoryUnit: (value: string | MemorySizeEnum) => void
- getStorageUnit: (value: string | MemorySizeEnum) => void
  database?: DatabaseEntity
  loading?: boolean
 }
 
 export function PageSettingsResources(props: PageSettingsResourcesProps) {
- const { onSubmit, loading, database, memorySize, getMemoryUnit, storageSize, getStorageUnit } = props
+ const { onSubmit, loading, database, memorySize, getMemoryUnit } = props
  const { control, formState, watch } = useFormContext()
 
  const maxMemoryBySize =
@@ -38,7 +37,7 @@ export function PageSettingsResources(props: PageSettingsResourcesProps) {
  <div className="p-8 max-w-content-with-navigation-left">
  <h2 className="h5 mb-8 text-text-700">Resources</h2>
  <form onSubmit={onSubmit}>
- <p className="text-text-500 text-xs mb-3">Adapt the application's consumption accordingly</p>
+ <p className="text-text-500 text-xs mb-3">Adapt the database's consumption accordingly</p>
  <BlockContent title="vCPU">
  <p className="flex items-center text-text-600 mb-3 font-medium">{watch('cpu')}</p>
  <Controller
@@ -81,19 +80,26 @@ export function PageSettingsResources(props: PageSettingsResourcesProps) {
  <Controller
  name="storage"
  control={control}
- rules={inputSizeUnitRules(maxMemoryBySize)}
+ rules={{
+ pattern: {
+ value: /^[0-9]+$/,
+ message: 'Please enter a number.',
+ },
+ }}
  render={({ field, fieldState: { error } }) => (
- <InputSizeUnit
- name={field.name}
+ <InputText
+ type="number"
+ name="storage"
+ dataTestId="input-memory-storage"
+ label="Size in GB"
  value={field.value}
  onChange={field.onChange}
- currentSize={database?.storage}
- currentUnit={storageSize}
- getUnit={getStorageUnit}
- error={error}
  />
  )}
  />
+ <p data-testid="current-consumption" className="text-text-400 text-xs mt-1 ml-4">
+ Current consumption: {database.storage} GB
+ </p>
  </BlockContent>
  <div className="flex justify-end">
  <Button

libs/pages/services/src/lib/feature/page-database-create-feature/page-database-create-post-feature/page-database-create-post-feature.spec.tsx

@@ -94,7 +94,7 @@ describe('PageDatabaseCreatePostFeature', () => {
  memory: 100,
  mode: DatabaseModeEnum.CONTAINER,
  name: 'test',
- storage: 1024,
+ storage: 1,
  type: DatabaseTypeEnum.MYSQL,
  version: '1',
  },

libs/pages/services/src/lib/feature/page-database-create-feature/page-database-create-post-feature/page-database-create-post-feature.tsx

@@ -56,10 +56,9 @@ export function PageDatabaseCreatePostFeature() {
  const memoryUnit = resourcesData.memory_unit
 
  const currentStorage = Number(resourcesData['storage'])
- const storageUnit = resourcesData.storage_unit
 
  const memory = memoryUnit === MemorySizeEnum.GB ? currentMemory * 1024 : currentMemory
- const storage = storageUnit === MemorySizeEnum.GB ? currentStorage * 1024 : currentStorage
+ const storage = currentStorage
  const cpu = convertCpuToVCpu(resourcesData['cpu'][0], true)
 
  const databaseRequest: DatabaseRequest = {

libs/pages/services/src/lib/ui/page-database-create/page-database-create-post/page-database-create-post.tsx

@@ -79,9 +79,9 @@ export function PageDatabaseCreatePost(props: PageDatabaseCreatePostProps) {
  </strong>
  </li>
  <li>
- Instances:{' '}
+ Storage:{' '}
  <strong className="font-medium">
- {props.resourcesData.storage} - {props.resourcesData.storage_unit}
+ {props.resourcesData.storage} {props.resourcesData.storage_unit}
  </strong>
  </li>
  </ul>

libs/pages/services/src/lib/ui/table-row-services/table-row-services.tsx

@@ -1,5 +1,6 @@
 import { DatabaseModeEnum } from 'qovery-typescript-axios'
 import { useNavigate, useParams } from 'react-router-dom'
+import { DeployOtherCommitModalFeature } from '@qovery/shared/console-shared'
 import { IconEnum, RunningStatus, ServiceTypeEnum } from '@qovery/shared/enums'
 import {
  ApplicationEntity,
@@ -24,7 +25,6 @@ import {
  useModal,
 } from '@qovery/shared/ui'
 import { timeAgo, upperCaseFirstLetter, urlCodeEditor } from '@qovery/shared/utils'
-import DeployOtherCommitModalFeature from '../../../../../../shared/console-shared/src/lib/deploy-other-commit-modal/feature/deploy-other-commit-modal-feature'
 
 export interface TableRowServicesProps {
  data: ApplicationEntity | DatabaseEntity

libs/shared/console-shared/src/lib/setting-resources/ui/setting-resources.tsx

@@ -7,6 +7,7 @@ import {
  Icon,
  IconAwesomeEnum,
  InputSizeUnit,
+ InputText,
  Slider,
  WarningBox,
  WarningBoxEnum,
@@ -44,8 +45,6 @@ export function SettingResources(props: SettingResourcesProps) {
  let maxMemoryBySize =
  memorySize === MemorySizeEnum.GB ? (application?.maximum_memory || 0) / 1024 : application?.maximum_memory || 0
 
- const maxStorageBySize = memorySize === MemorySizeEnum.GB ? 20480 / 1024 : 20480 || 0
-
  if (!application) {
  maxMemoryBySize = memorySize === MemorySizeEnum.GB ? 8192 / 1024 : 8192
  }
@@ -142,21 +141,16 @@ export function SettingResources(props: SettingResourcesProps) {
  <Controller
  name="storage"
  control={control}
- rules={inputSizeUnitRules(maxStorageBySize)}
+ rules={{
+ pattern: {
+ value: /^[0-9]+$/,
+ message: 'Please enter a number.',
+ },
+ }}
  render={({ field, fieldState: { error } }) => (
- <InputSizeUnit
- name={field.name}
- value={field.value}
- onChange={field.onChange}
- maxSize={maxStorageBySize}
- error={error}
- currentUnit={storageSize}
- getUnit={getStorageUnit}
- showConsumption={!!application}
- />
+ <InputText name="storage" label="Size in GB" value={field.value} onChange={field.onChange} />
  )}
  />
- <p className="text-text-400 pl-4 text-xs">Max consumption: 20GB</p>
  </BlockContent>
  )}
  </div>