fix: split tabs components

frontend/src/features/Dashboard/components/DashboardTab.tsx

@@ -1,10 +1,10 @@
 import { useAppDispatch } from '@hooks/useAppDispatch'
-import { useEscapeKey } from '@hooks/useEscapeKey'
-import { Icon, TextInput, useClickOutsideEffect, useNewWindow } from '@mtes-mct/monitor-ui'
-import { useRef, useState } from 'react'
+import { Icon } from '@mtes-mct/monitor-ui'
+import { useState } from 'react'
 import styled from 'styled-components'
 
 import { dashboardActions } from '../slice'
+import { TabNameInput } from './TabNameInput'
 
 export function DashboardTab({
   isEditing,
@@ -19,28 +19,15 @@ export function DashboardTab({
 }) {
   const dispatch = useAppDispatch()
 
-  const ref = useRef<HTMLDivElement>(null)
-  const { newWindowContainerRef } = useNewWindow()
-
-  const [updatedName, setUpdatedName] = useState<string | undefined>()
+  const [updatedName, setUpdatedName] = useState<string | undefined>(name)
 
   const validateName = () => {
     if (updatedName) {
       dispatch(dashboardActions.setName({ key: tabKey, name: updatedName }))
-      setUpdatedName(undefined)
     }
     onEdit(false)
   }
 
-  useClickOutsideEffect(
-    ref,
-    () => {
-      validateName()
-    },
-    newWindowContainerRef.current
-  )
-  useEscapeKey({ onEnter: () => validateName(), ref })
-
   const editName = e => {
     e.stopPropagation()
     e.preventDefault()
@@ -51,15 +38,7 @@ export function DashboardTab({
   return (
     <>
       {isEditing ? (
-        <StyledTextInput
-          inputRef={ref}
-          isLabelHidden
-          isTransparent
-          label="Nom du tableau de bord"
-          name="name"
-          onChange={value => setUpdatedName(value)}
-          value={updatedName}
-        />
+        <TabNameInput onChange={setUpdatedName} validate={validateName} value={updatedName} />
       ) : (
         <Container>
           <DashboardName>{name}</DashboardName>
@@ -81,6 +60,3 @@ const DashboardName = styled.span`
   text-overflow: ellipsis;
   white-space: nowrap;
 `
-const StyledTextInput = styled(TextInput)`
-  flex-grow: 1;
-`

frontend/src/features/Dashboard/components/TabNameInput.tsx

@@ -0,0 +1,44 @@
+import { useEscapeKey } from '@hooks/useEscapeKey'
+import { TextInput, useClickOutsideEffect, useNewWindow } from '@mtes-mct/monitor-ui'
+import { useRef } from 'react'
+import styled from 'styled-components'
+
+export function TabNameInput({
+  onChange,
+  validate,
+  value
+}: {
+  onChange: (name: string | undefined) => void
+  validate: () => void
+  value: string | undefined
+}) {
+  const ref = useRef<HTMLInputElement>(null)
+  const { newWindowContainerRef } = useNewWindow()
+
+  useClickOutsideEffect(
+    ref,
+    () => {
+      validate()
+    },
+    newWindowContainerRef.current
+  )
+
+  useEscapeKey({ onEnter: () => validate(), ref })
+
+  return (
+    <StyledTextInput
+      autoFocus
+      inputRef={ref}
+      isLabelHidden
+      isTransparent
+      label="Nom du tableau de bord"
+      name="name"
+      onChange={onChange}
+      value={value}
+    />
+  )
+}
+
+const StyledTextInput = styled(TextInput)`
+  flex-grow: 1;
+`