fix(ports): adding info tooltip and reset the value (#390)

* done * fix
Qovery · Nov 24, 2022 · 183e725 · 183e725
1 parent 2e59400
commit 183e725
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 11 deletions.
diff --git a/libs/pages/application/src/lib/ui/page-settings-ports/crud-modal/crud-modal.tsx b/libs/pages/application/src/lib/ui/page-settings-ports/crud-modal/crud-modal.tsx
@@ -1,6 +1,7 @@
 import { ServicePort } from 'qovery-typescript-axios'
+import { useEffect } from 'react'
 import { Controller, useFormContext } from 'react-hook-form'
-import { InputText, InputToggle, ModalCrud } from '@qovery/shared/ui'
+import { Icon, IconAwesomeEnum, InputText, InputToggle, ModalCrud, Tooltip } from '@qovery/shared/ui'
 
 export interface CrudModalProps {
   port?: ServicePort
@@ -14,12 +15,17 @@ export function CrudModal(props: CrudModalProps) {
   const { control, watch, setValue } = useFormContext()
 
   const watchPublicly = watch('publicly_accessible')
+  const watchExternalPort = watch('external_port')
 
   const pattern = {
     value: /^[0-9]+$/,
     message: 'Please enter a number.',
   }
 
+  useEffect(() => {
+    setValue(`external_port`, watchPublicly ? 443 : undefined)
+  }, [watchPublicly, setValue])
+
   return (
     <ModalCrud
       title={props.isEdit ? 'Edit port' : 'Set port'}
@@ -61,10 +67,17 @@ export function CrudModal(props: CrudModalProps) {
             type="number"
             name={field.name}
             onChange={field.onChange}
-            value={field.value}
-            label="Public port"
+            value={watchExternalPort} // passing a watch here because setValue with undefined does not work: https://github.com/react-hook-form/react-hook-form/issues/8133
+            label="External port"
             error={error?.message}
-            disabled={!watchPublicly}
+            disabled
+            rightElement={
+              <Tooltip content="Only HTTP protocol is supported">
+                <div>
+                  <Icon name={IconAwesomeEnum.CIRCLE_INFO} className="text-text-400" />
+                </div>
+              </Tooltip>
+            }
           />
         )}
       />

diff --git a/...ces/src/lib/ui/page-application-create/page-application-create-port/port-row/port-row.tsx b/...ces/src/lib/ui/page-application-create/page-application-create-port/port-row/port-row.tsx
@@ -1,6 +1,6 @@
 import { useEffect } from 'react'
 import { Controller, useFormContext } from 'react-hook-form'
-import { ButtonIcon, ButtonIconStyle, IconAwesomeEnum, InputText, InputToggle } from '@qovery/shared/ui'
+import { ButtonIcon, ButtonIconStyle, Icon, IconAwesomeEnum, InputText, InputToggle, Tooltip } from '@qovery/shared/ui'
 import { PortData } from '../../../../feature/page-application-create-feature/application-creation-flow.interface'
 
 export interface PortRowProps {
@@ -13,6 +13,7 @@ export function PortRow(props: PortRowProps) {
   const { control, watch, setValue, resetField } = useFormContext<PortData>()
 
   const isPublicWatch = watch(`ports.${index}.is_public`)
+  const externalPortWatch = watch(`ports.${index}.external_port`)
 
   useEffect(() => {
     setValue(`ports.${index}.external_port`, isPublicWatch ? 443 : undefined)
@@ -32,7 +33,7 @@ export function PortRow(props: PortRowProps) {
             name={field.name}
             onChange={field.onChange}
             value={field.value}
-            label={`Application Port ${index + 1}`}
+            label={`Application port`}
             type="number"
           />
         )}
@@ -45,18 +46,27 @@ export function PortRow(props: PortRowProps) {
             className="flex-grow"
             name={field.name}
             onChange={field.onChange}
-            value={field.value}
-            label={`External Port ${index + 1}`}
+            value={externalPortWatch} // passing a watch here because setValue with undefined does not work: https://github.com/react-hook-form/react-hook-form/issues/8133
+            label={`External port`}
             error={error?.message}
             type="number"
             disabled
+            rightElement={
+              <Tooltip content="Only HTTP protocol is supported">
+                <div>
+                  <Icon name={IconAwesomeEnum.CIRCLE_INFO} className="text-text-400" />
+                </div>
+              </Tooltip>
+            }
           />
         )}
       />
       <Controller
         name={`ports.${index}.is_public`}
         control={control}
-        render={({ field }) => <InputToggle onChange={field.onChange} value={field.value} title={'Public'} />}
+        render={({ field }) => (
+          <InputToggle small onChange={field.onChange} value={field.value} title="Publicly exposed" />
+        )}
       />
       <ButtonIcon
         dataTestId="delete-port"

diff --git a/libs/shared/ui/src/lib/components/buttons/button-icon/button-icon.tsx b/libs/shared/ui/src/lib/components/buttons/button-icon/button-icon.tsx
@@ -26,6 +26,7 @@ export interface ButtonIconProps {
   iconClassName?: string
   external?: boolean
   dataTestId?: string
+  type?: 'button' | 'submit' | 'reset'
 }
 
 export function ButtonIcon(props: ButtonIconProps) {
@@ -42,6 +43,7 @@ export function ButtonIcon(props: ButtonIconProps) {
     external = false,
     active = false,
     iconClassName = '',
+    type = 'button',
   } = props
 
   const defineClass = `btn btn-icon group ${size ? `btn--${size}` : ''} ${style ? `btn-icon--${style}` : ''} ${
@@ -52,7 +54,12 @@ export function ButtonIcon(props: ButtonIconProps) {
     return (
       <>
         {!link && (
-          <button data-testid={props.dataTestId} className={defineClass} onClick={(e) => onClick && onClick(e)}>
+          <button
+            type={type}
+            data-testid={props.dataTestId}
+            className={defineClass}
+            onClick={(e) => onClick && onClick(e)}
+          >
             {notification && (
               <span className="btn__notification w-2 h-2 rounded-lg bg-error-500 absolute -top-0.5 -right-0.5"></span>
             )}

diff --git a/libs/shared/ui/src/lib/components/funnel-flow-body/funnel-flow-body.tsx b/libs/shared/ui/src/lib/components/funnel-flow-body/funnel-flow-body.tsx
@@ -9,7 +9,10 @@ export function FunnelFlowBody(props: FunnelFlowBodyProps) {
       <div className="absolute h-full bg-white w-full pointer-events-none" style={{ left: '-30%' }}></div>
       <div className="flex w-full overflow-auto">
         <section className="w-[70%] bg-white pt-14">
-          <div data-testid="funnel-body-content" className="max-w-[32rem] mx-auto relative px-4 pb-14">
+          <div
+            data-testid="funnel-body-content"
+            className="max-w-content-with-navigation-left px-12 mx-auto relative pb-14"
+          >
             {props.children}
           </div>
         </section>