fix

Qovery · Nov 24, 2022 · 3c6b790 · 3c6b790
1 parent deb3f91
commit 3c6b790
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 12 deletions.
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
@@ -33,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"
           />
         )}
@@ -47,22 +47,26 @@ export function PortRow(props: PortRowProps) {
             name={field.name}
             onChange={field.onChange}
             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 ${index + 1}`}
+            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>
+            }
           />
         )}
       />
-      <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>

diff --git a/libs/shared/ui/src/lib/components/inputs/input-text/input-text.tsx b/libs/shared/ui/src/lib/components/inputs/input-text/input-text.tsx
@@ -35,9 +35,8 @@ export function InputText(props: InputTextProps) {
   const [currentType, setCurrentType] = useState(type)
 
   useEffect(() => {
-    console.log(value)
     setCurrentValue(value)
-  }, [props.value, setCurrentValue])
+  }, [value, setCurrentValue])
 
   const hasFocus = focused
   const hasLabelUp =