Updated UI to support eservice name editing functionality

src/api/eservice/eservice.mutations.ts

@@ -379,6 +379,20 @@ function useRejectDelegatedVersionDraft() {
   })
 }
 
+function useUpdateEServiceName() {
+  const { t } = useTranslation('mutations-feedback', {
+    keyPrefix: 'eservice.updateEServiceName',
+  })
+  return useMutation({
+    mutationFn: EServiceServices.updateEServiceName,
+    meta: {
+      successToastLabel: t('outcome.success'),
+      errorToastLabel: t('outcome.error'),
+      loadingLabel: t('loading'),
+    },
+  })
+}
+
 export const EServiceMutations = {
   useCreateDraft,
   useUpdateDraft,
@@ -402,4 +416,5 @@ export const EServiceMutations = {
   useUpdateDescriptorAttributes,
   useApproveDelegatedVersionDraft,
   useRejectDelegatedVersionDraft,
+  useUpdateEServiceName,
 }

src/api/eservice/eservice.services.ts

@@ -29,6 +29,7 @@ import type {
   UpdateEServiceSeed,
 } from '../api.generatedTypes'
 import type { AttributeKey } from '@/types/attribute.types'
+import { debounce } from 'lodash'
 
 async function getCatalogList(params: GetEServicesCatalogParams) {
   const response = await axiosInstance.get<CatalogEServices>(
@@ -335,7 +336,7 @@ async function updateEServiceDescription({
   ...payload
 }: { eserviceId: string } & EServiceDescriptionSeed) {
   const response = await axiosInstance.post<CreatedResource>(
-    `${BACKEND_FOR_FRONTEND_URL}/eservices/${eserviceId}/update`,
+    `${BACKEND_FOR_FRONTEND_URL}/eservices/${eserviceId}/description/update`,
     payload
   )
   return response.data
@@ -436,6 +437,18 @@ async function rejectDelegatedVersionDraft({
   return response.data
 }
 
+async function updateEServiceName({
+  eserviceId,
+  ...payload
+}: { eserviceId: string } & EServiceNameSeed) {
+  /*const response = await axiosInstance.post<CreatedResource>(
+    `${BACKEND_FOR_FRONTEND_URL}/eservices/${eserviceId}/name/update`,
+    payload
+  )
+  return response.data*/
+  return console.log('Name updated')
+}
+
 export const EServiceServices = {
   getCatalogList,
   getProviderList,
@@ -470,4 +483,5 @@ export const EServiceServices = {
   updateDescriptorAttributes,
   approveDelegatedVersionDraft,
   rejectDelegatedVersionDraft,
+  updateEServiceName,
 }

src/pages/ProviderEServiceDetailsPage/components/ProviderEServiceDetailsTab/ProviderEServiceGeneralInfoSection/ProviderEServiceGeneralInfoSection.tsx

@@ -16,6 +16,7 @@ import { useGetDelegationUserRole } from '@/hooks/useGetDelegationUserRole'
 import { AuthHooks } from '@/api/auth'
 import { trackEvent } from '@/config/tracking'
 import { isAxiosError } from 'axios'
+import { ProviderEServiceUpdateNameDrawer } from './ProviderEServiceUpdateNameDrawer'
 
 export const ProviderEServiceGeneralInfoSection: React.FC = () => {
   const { t } = useTranslation('eservice', {
@@ -43,6 +44,12 @@ export const ProviderEServiceGeneralInfoSection: React.FC = () => {
     closeDrawer: closeVersionSelectorDrawer,
   } = useDrawerState()
 
+  const {
+    isOpen: isEServiceUpdateNameDrawerOpen,
+    openDrawer: openEServiceUpdateNameDrawer,
+    closeDrawer: closeEServiceUpdateNameDrawer,
+  } = useDrawerState()
+
   const {
     isOpen: isEServiceUpdateDescriptionDrawerOpen,
     openDrawer: openEServiceUpdateDescriptionDrawer,
@@ -115,6 +122,26 @@ export const ProviderEServiceGeneralInfoSection: React.FC = () => {
         <Stack spacing={2}>
           <InformationContainer label={t('version.label')} content={descriptor.version} />
           <Divider />
+          <SectionContainer
+            innerSection
+            title={t('eserviceName.label')}
+            titleTypographyProps={{ variant: 'body1', fontWeight: 600 }}
+            topSideActions={
+              isDelegator
+                ? []
+                : [
+                    {
+                      action: openEServiceUpdateNameDrawer,
+                      label: tCommon('actions.edit'),
+                      icon: EditIcon,
+                    },
+                  ]
+            }
+          >
+            <Typography variant="body2">{descriptor.eservice.name}</Typography>
+          </SectionContainer>
+          <Divider />
+          <Divider />
           <SectionContainer
             innerSection
             title={t('eserviceDescription.label')}
@@ -153,6 +180,11 @@ export const ProviderEServiceGeneralInfoSection: React.FC = () => {
         onClose={closeEServiceUpdateDescriptionDrawer}
         eservice={descriptor.eservice}
       />
+      <ProviderEServiceUpdateNameDrawer
+        isOpen={isEServiceUpdateNameDrawerOpen}
+        onClose={closeEServiceUpdateNameDrawer}
+        eservice={descriptor.eservice}
+      />
     </>
   )
 }

src/pages/ProviderEServiceDetailsPage/components/ProviderEServiceDetailsTab/ProviderEServiceGeneralInfoSection/ProviderEServiceUpdateNameDrawer.tsx

@@ -0,0 +1,95 @@
+import type { ProducerDescriptorEService } from '@/api/api.generatedTypes'
+import { EServiceMutations } from '@/api/eservice'
+import { Drawer } from '@/components/shared/Drawer'
+import { RHFTextField } from '@/components/shared/react-hook-form-inputs'
+import { Box } from '@mui/material'
+import React from 'react'
+import { FormProvider, useForm } from 'react-hook-form'
+import { useTranslation } from 'react-i18next'
+
+type UpdateEServiceNameFormValues = {
+  eserviceName: string
+}
+
+type ProviderEServiceUpdateNameDrawerProps = {
+  isOpen: boolean
+  onClose: VoidFunction
+  eservice: ProducerDescriptorEService
+}
+
+export const ProviderEServiceUpdateNameDrawer: React.FC<ProviderEServiceUpdateNameDrawerProps> = ({
+  isOpen,
+  onClose,
+  eservice,
+}) => {
+  const { t } = useTranslation('eservice', {
+    keyPrefix: 'read.drawers.updateEServiceNameDrawer',
+  })
+  const { t: tCommon } = useTranslation('common')
+
+  const { mutate: updateEserviceName } = EServiceMutations.useUpdateEServiceName()
+
+  const defaultValues = {
+    eserviceName: eservice.name,
+  }
+
+  const formMethods = useForm<UpdateEServiceNameFormValues>({ defaultValues })
+
+  React.useEffect(() => {
+    formMethods.reset({ eserviceName: eservice.name })
+  }, [eservice.name, formMethods])
+
+  const onSubmit = (values: UpdateEServiceNameFormValues) => {
+    updateEserviceName(
+      {
+        eserviceId: eservice.id,
+        name: values.eserviceName,
+      },
+      { onSuccess: onClose }
+    )
+  }
+
+  const handleCloseDrawer = () => {
+    onClose()
+  }
+
+  const handleTransitionExited = () => {
+    formMethods.reset(defaultValues)
+  }
+
+  return (
+    <FormProvider {...formMethods}>
+      <Drawer
+        isOpen={isOpen}
+        onTransitionExited={handleTransitionExited}
+        onClose={handleCloseDrawer}
+        title={t('title')}
+        subtitle={t('subtitle')}
+        buttonAction={{
+          action: formMethods.handleSubmit(onSubmit),
+          label: tCommon('actions.upgrade'),
+        }}
+      >
+        <Box component="form" noValidate>
+          <RHFTextField
+            sx={{ mt: 2, mb: 2 }}
+            focusOnMount
+            name="eserviceName"
+            label={t('eserviceNameField.label')}
+            type="text"
+            size="small"
+            rows={10}
+            inputProps={{ maxLength: 250 }}
+            rules={{
+              required: true,
+              minLength: 10,
+              maxLength: 250,
+              validate: (value) =>
+                value !== eservice.name || t('eserviceNameField.validation.sameValue'),
+            }}
+          />
+        </Box>
+      </Drawer>
+    </FormProvider>
+  )
+}

src/static/locales/en/eservice.json

@@ -288,6 +288,9 @@
         "version": {
           "label": "You are watching version number"
         },
+        "eserviceName": {
+          "label": "E-Service name"
+        },
         "eserviceDescription": {
           "label": "E-Service description"
         },
@@ -356,6 +359,16 @@
       }
     },
     "drawers": {
+      "updateEServiceNameDrawer": {
+        "title": "Edit e-service name",
+        "subtitle": "From this panel you can update the name of the e-service. The changes made will take effect immediately.",
+        "eserviceNameField": {
+          "label": "E-service name",
+          "validation": {
+            "sameValue": "The e-service name must be different from the current one"
+          }
+        }
+      },
       "updateEServiceDescriptionDrawer": {
         "title": "Edit e-service description",
         "subtitle": "From this panel you can update the description of the e-service. The changes made will take effect immediately.",

src/static/locales/en/mutations-feedback.json

@@ -219,6 +219,13 @@
         "success": "The e-service version has returned to draft, and the reasons for the refusal have been notified to the delivery delegate",
         "error": "It was not possible to reject the new version of e-service. Please try again!"
       }
+    },
+    "updateEServiceName": {
+      "loading": "We are updating the e-service name",
+      "outcome": {
+        "error": "E-service name not updated. Try again.",
+        "success": "E-service name updated correctly"
+      }
     }
   },
   "attribute": {

src/static/locales/it/eservice.json

@@ -288,6 +288,9 @@
         "version": {
           "label": "Stai vedendo la versione"
         },
+        "eserviceName": {
+          "label": "Nome dell’e-service"
+        },
         "eserviceDescription": {
           "label": "Descrizione dell'e-service"
         },
@@ -356,6 +359,16 @@
       }
     },
     "drawers": {
+      "updateEServiceNameDrawer": {
+        "title": "Modifica nome e-service",
+        "subtitle": "Da questo pannello puoi aggiornare il nome dell’e-service. Le modifiche apportate avranno effetto da subito.",
+        "eserviceNameField": {
+          "label": "Nome e-service",
+          "validation": {
+            "sameValue": "Il nome dell'e-service deve essere diversa da quella attuale"
+          }
+        }
+      },
       "updateEServiceDescriptionDrawer": {
         "title": "Modifica descrizione e-service",
         "subtitle": "Da questo pannello puoi aggiornare la descrizione dell’e-service. Le modifiche apportate avranno effetto da subito.",

src/static/locales/it/mutations-feedback.json

@@ -219,6 +219,13 @@
         "success": "La versione di e-service è tornata in bozza, e le motivazioni del rifiuto sono state notificate al delegato all’erogazione",
         "error": "Non è stato possibile rifiutare la nuova versione di e-service. Per favore, riprova!"
       }
+    },
+    "updateEServiceName": {
+      "loading": "Stiamo modificando il nome dell'e-service",
+      "outcome": {
+        "error": "Nome dell'e-service non aggiornato. Riprovare.",
+        "success": "Nome dell'e-service aggiornato correttamente"
+      }
     }
   },
   "attribute": {