From 3d8a077b783a4890c0e262e853f359b68e57c5fb Mon Sep 17 00:00:00 2001
From: Carmine Porricelli <carmine.porricelli@pagopa.it>
Date: Fri, 6 Dec 2024 15:02:49 +0100
Subject: [PATCH 1/4] Added in-add attributes drawer

---
 src/api/eservice/eservice.mutations.ts        |  19 +++
 src/api/eservice/eservice.services.ts         |  20 +++
 .../layout/containers/AttributeContainer.tsx  |   3 +-
 .../containers/AttributeGroupContainer.tsx    |  14 +-
 .../shared}/AttributeAutocomplete.tsx         |  32 ++--
 .../shared/ReadOnlyDescriptorAttributes.tsx   |  87 +++++-----
 .../AttributeGroup.tsx                        |  19 ++-
 .../ProviderEServiceDescriptorAttributes.tsx  |  57 ++++++-
 ...erviceUpdateDescriptorAttributesDrawer.tsx | 153 ++++++++++++++++++
 ...roviderEServiceAttributeVersionSummary.tsx |   4 +-
 .../ProviderEServiceDocumentationSummary.tsx  |   4 +-
 .../ProviderEServiceGeneralInfoSummary.tsx    |   8 +-
 .../ProviderEServiceRiskAnalysisSummary.tsx   |   6 +-
 ...roviderEServiceRiskAnalysisSummaryList.tsx |   6 +-
 .../ProviderEServiceVersionInfoSummary.tsx    |   6 +-
 src/static/locales/en/common.json             |   3 +-
 src/static/locales/en/eservice.json           |   4 +
 src/static/locales/en/mutations-feedback.json |   7 +
 src/static/locales/it/common.json             |   3 +-
 src/static/locales/it/eservice.json           |   4 +
 src/static/locales/it/mutations-feedback.json |   7 +
 21 files changed, 366 insertions(+), 100 deletions(-)
 rename src/{pages/ProviderEServiceCreatePage/components/EServiceCreateStepAttributes/AddAttributesToEServiceForm => components/shared}/AttributeAutocomplete.tsx (75%)
 create mode 100644 src/pages/ProviderEServiceDetailsPage/components/ProviderEServiceDetailsTab/ProviderEServiceUpdateDescriptorAttributesDrawer.tsx

diff --git a/src/api/eservice/eservice.mutations.ts b/src/api/eservice/eservice.mutations.ts
index 146aa967c..881082206 100644
--- a/src/api/eservice/eservice.mutations.ts
+++ b/src/api/eservice/eservice.mutations.ts
@@ -3,6 +3,7 @@ import { useTranslation } from 'react-i18next'
 import type { EServiceRiskAnalysisSeed, UpdateEServiceDescriptorSeed } from '../api.generatedTypes'
 import { EServiceServices } from './eservice.services'
 import { EServiceQueries } from './eservice.queries'
+import type { AttributeKey } from '@/types/attribute.types'
 
 function useCreateDraft() {
   const { t } = useTranslation('mutations-feedback', { keyPrefix: 'eservice.createDraft' })
@@ -306,6 +307,23 @@ function useUpdateEServiceDescription() {
   })
 }
 
+function useUpdateDescriptorAttributes() {
+  const { t } = useTranslation('mutations-feedback', {
+    keyPrefix: 'eservice.updateDescriptorAttributes',
+  })
+  const { t: tAttribute } = useTranslation('attribute', { keyPrefix: 'type' })
+  return useMutation({
+    mutationFn: EServiceServices.updateDescriptorAttributes,
+    meta: {
+      successToastLabel: (_: unknown, variables: { attributeKey: AttributeKey }) =>
+        t('outcome.success', { attributeKind: tAttribute(`${variables.attributeKey}_other`) }),
+      errorToastLabel: (_: unknown, variables: { attributeKey: AttributeKey }) =>
+        t('outcome.error', { attributeKind: tAttribute(`${variables.attributeKey}_other`) }),
+      loadingLabel: t('loading'),
+    },
+  })
+}
+
 export const EServiceMutations = {
   useCreateDraft,
   useUpdateDraft,
@@ -326,4 +344,5 @@ export const EServiceMutations = {
   useUpdateEServiceDescription,
   useUpdateVersionDraftDocumentDescription,
   useImportVersion,
+  useUpdateDescriptorAttributes,
 }
diff --git a/src/api/eservice/eservice.services.ts b/src/api/eservice/eservice.services.ts
index 324be0fda..92a4e842c 100644
--- a/src/api/eservice/eservice.services.ts
+++ b/src/api/eservice/eservice.services.ts
@@ -7,6 +7,7 @@ import type {
   CreatedEServiceDescriptor,
   CreatedResource,
   CreateEServiceDocumentPayload,
+  DescriptorAttributesSeed,
   EServiceDescriptionSeed,
   EServiceDoc,
   EServiceRiskAnalysis,
@@ -26,6 +27,7 @@ import type {
   UpdateEServiceDescriptorSeed,
   UpdateEServiceSeed,
 } from '../api.generatedTypes'
+import type { AttributeKey } from '@/types/attribute.types'
 
 async function getCatalogList(params: GetEServicesCatalogParams) {
   const response = await axiosInstance.get<CatalogEServices>(
@@ -389,6 +391,23 @@ async function importVersion({ eserviceFile }: { eserviceFile: File }) {
     })
 }
 
+async function updateDescriptorAttributes({
+  eserviceId,
+  descriptorId,
+  attributeKey: _attributeKey,
+  ...payload
+}: {
+  eserviceId: string
+  descriptorId: string
+  attributeKey: AttributeKey
+} & DescriptorAttributesSeed) {
+  const response = await axiosInstance.post<CreatedResource>(
+    `${BACKEND_FOR_FRONTEND_URL}/eservices/${eserviceId}/descriptors/${descriptorId}/attributes/update`,
+    payload
+  )
+  return response.data
+}
+
 export const EServiceServices = {
   getCatalogList,
   getProviderList,
@@ -420,4 +439,5 @@ export const EServiceServices = {
   updateEServiceDescription,
   exportVersion,
   importVersion,
+  updateDescriptorAttributes,
 }
diff --git a/src/components/layout/containers/AttributeContainer.tsx b/src/components/layout/containers/AttributeContainer.tsx
index a805c1e2c..8153329c5 100644
--- a/src/components/layout/containers/AttributeContainer.tsx
+++ b/src/components/layout/containers/AttributeContainer.tsx
@@ -55,7 +55,7 @@ export const AttributeContainer = <TAttribute extends { id: string; name: string
   }
 
   return (
-    <Stack direction="row" alignItems="center" spacing={2}>
+    <Stack direction="row" alignItems="center">
       <Stack direction="row" alignItems="center" spacing={2}>
         {checked && <CheckCircleIcon sx={{ color: 'success.main' }} />}
         {onRemove && (
@@ -130,6 +130,7 @@ const AttributeDetails: React.FC<{ attributeId: string }> = ({ attributeId }) =>
     <Stack sx={{ mt: 1 }} spacing={2}>
       <Typography variant="body2">{attribute.description}</Typography>
       <InformationContainer
+        direction="column"
         content={attributeId}
         copyToClipboard={{
           value: attributeId,
diff --git a/src/components/layout/containers/AttributeGroupContainer.tsx b/src/components/layout/containers/AttributeGroupContainer.tsx
index e2053fb87..533f73895 100644
--- a/src/components/layout/containers/AttributeGroupContainer.tsx
+++ b/src/components/layout/containers/AttributeGroupContainer.tsx
@@ -1,15 +1,17 @@
 import React from 'react'
 import ClearIcon from '@mui/icons-material/Clear'
+import type { CardProps, SxProps } from '@mui/material'
 import { Card, CardContent, CardHeader, IconButton, alpha } from '@mui/material'
 import { theme } from '@pagopa/interop-fe-commons'
 import { useTranslation } from 'react-i18next'
 
-interface AttributeGroupContainerProps {
+type AttributeGroupContainerProps = CardProps & {
   title: string
   onRemove?: () => void
   subheader?: React.ReactNode
   children?: React.ReactNode
   color?: 'primary' | 'success' | 'error' | 'warning' | 'gray'
+  cardContentSx?: SxProps
 }
 
 const containerColors = {
@@ -50,13 +52,18 @@ export const AttributeGroupContainer: React.FC<AttributeGroupContainerProps> = (
   onRemove,
   children,
   subheader,
+  cardContentSx,
   color = 'primary',
+  ...cardProps
 }) => {
   const { t } = useTranslation('shared-components', { keyPrefix: 'attributeGroupContainer' })
   const { headerColor, borderColor, bodyColor, textColor } = containerColors[color]
 
   return (
-    <Card sx={{ border: '1px solid', borderColor, bgcolor: bodyColor }}>
+    <Card
+      {...cardProps}
+      sx={{ border: '1px solid', borderColor, bgcolor: bodyColor, ...cardProps.sx }}
+    >
       <CardHeader
         titleTypographyProps={{ variant: 'body1', fontWeight: 600, color: textColor }}
         title={title}
@@ -75,8 +82,9 @@ export const AttributeGroupContainer: React.FC<AttributeGroupContainerProps> = (
           sx={{
             p: 2,
             '&:last-child': {
-              paddingBottom: 2,
+              pb: 2,
             },
+            ...cardContentSx,
           }}
         >
           {children}
diff --git a/src/pages/ProviderEServiceCreatePage/components/EServiceCreateStepAttributes/AddAttributesToEServiceForm/AttributeAutocomplete.tsx b/src/components/shared/AttributeAutocomplete.tsx
similarity index 75%
rename from src/pages/ProviderEServiceCreatePage/components/EServiceCreateStepAttributes/AddAttributesToEServiceForm/AttributeAutocomplete.tsx
rename to src/components/shared/AttributeAutocomplete.tsx
index 5b8c6b178..81cad16d0 100644
--- a/src/pages/ProviderEServiceCreatePage/components/EServiceCreateStepAttributes/AddAttributesToEServiceForm/AttributeAutocomplete.tsx
+++ b/src/components/shared/AttributeAutocomplete.tsx
@@ -3,32 +3,30 @@ import { AttributeQueries } from '@/api/attribute'
 import { RHFAutocompleteSingle } from '@/components/shared/react-hook-form-inputs'
 import type { AttributeKey } from '@/types/attribute.types'
 import { Button, Stack } from '@mui/material'
-import { FormProvider, useForm, useFormContext } from 'react-hook-form'
+import { FormProvider, useForm } from 'react-hook-form'
 import { useTranslation } from 'react-i18next'
 import type { AttributeKind, DescriptorAttribute } from '@/api/api.generatedTypes'
 import { useAutocompleteTextInput } from '@pagopa/interop-fe-commons'
-import type { EServiceCreateStepAttributesFormValues } from '..'
 import { keepPreviousData, useQuery } from '@tanstack/react-query'
 
 export type AttributeAutocompleteProps = {
-  groupIndex: number
   attributeKey: AttributeKey
-  handleHideAutocomplete: VoidFunction
+  onAddAttribute: (attribute: DescriptorAttribute) => void
+  alreadySelectedAttributeIds: string[]
+  direction?: 'column' | 'row'
 }
 
 type AttributeAutocompleteFormValues = { attribute: null | DescriptorAttribute }
 
 export const AttributeAutocomplete: React.FC<AttributeAutocompleteProps> = ({
-  groupIndex,
   attributeKey,
-  handleHideAutocomplete,
+  onAddAttribute,
+  alreadySelectedAttributeIds,
+  direction = 'row',
 }) => {
   const { t } = useTranslation('attribute', { keyPrefix: 'group' })
   const [attributeSearchParam, setAttributeSearchParam] = useAutocompleteTextInput()
 
-  const { watch, setValue } = useFormContext<EServiceCreateStepAttributesFormValues>()
-  const attributeGroups = watch(`attributes.${attributeKey}`)
-
   const attributeAutocompleteFormMethods = useForm<AttributeAutocompleteFormValues>({
     defaultValues: { attribute: null },
   })
@@ -62,29 +60,22 @@ export const AttributeAutocomplete: React.FC<AttributeAutocompleteProps> = ({
 
   const handleAddAttributeToGroup = handleSubmit(({ attribute }) => {
     if (!attribute) return
-    const newAttributeGroups = [...attributeGroups]
-    newAttributeGroups[groupIndex].push(attribute)
-    setValue(`attributes.${attributeKey}`, newAttributeGroups)
-    handleHideAutocomplete()
+    onAddAttribute(attribute)
   })
 
   const options = React.useMemo(() => {
     const attributes = data?.results ?? []
-    const attributesAlreadyInGroups = attributeGroups.reduce(
-      (acc, group) => [...acc, ...group.map(({ id }) => id)],
-      [] as Array<string>
-    )
     return attributes
-      .filter((att) => !attributesAlreadyInGroups.includes(att.id))
+      .filter((att) => !alreadySelectedAttributeIds.includes(att.id))
       .map((att) => ({
         label: att.name,
         value: att,
       }))
-  }, [data?.results, attributeGroups])
+  }, [data?.results, alreadySelectedAttributeIds])
 
   return (
     <FormProvider {...attributeAutocompleteFormMethods}>
-      <Stack direction="row" alignItems="center" spacing={1}>
+      <Stack direction={direction} alignItems="center" spacing={1}>
         <RHFAutocompleteSingle
           label={t('autocompleteInput.label')}
           placeholder={t('autocompleteInput.placeholder')}
@@ -96,6 +87,7 @@ export const AttributeAutocomplete: React.FC<AttributeAutocompleteProps> = ({
         />
         <Button
           onClick={handleAddAttributeToGroup}
+          fullWidth={direction === 'column'}
           disabled={!isSelected}
           type="button"
           variant="contained"
diff --git a/src/components/shared/ReadOnlyDescriptorAttributes.tsx b/src/components/shared/ReadOnlyDescriptorAttributes.tsx
index 224fe0e29..c34e4b52c 100644
--- a/src/components/shared/ReadOnlyDescriptorAttributes.tsx
+++ b/src/components/shared/ReadOnlyDescriptorAttributes.tsx
@@ -9,7 +9,7 @@ import {
 } from '@/components/layout/containers'
 import type { DescriptorAttribute, DescriptorAttributes } from '@/api/api.generatedTypes'
 import { useCurrentRoute } from '@/router'
-import type { ProviderOrConsumer } from '@/types/common.types'
+import type { ActionItemButton, ProviderOrConsumer } from '@/types/common.types'
 import { attributesHelpLink } from '@/config/constants'
 
 type ReadOnlyDescriptorAttributesProps = {
@@ -19,68 +19,58 @@ type ReadOnlyDescriptorAttributesProps = {
 export const ReadOnlyDescriptorAttributes: React.FC<ReadOnlyDescriptorAttributesProps> = ({
   descriptorAttributes,
 }) => {
-  const { t: tAttribute } = useTranslation('attribute')
-  const { mode } = useCurrentRoute()
-
-  const providerOrConsumer = mode as ProviderOrConsumer
-
-  const getSubtitle = (attributeKey: AttributeKey) => {
-    return (
-      <Trans
-        components={{ 1: <Link underline="hover" href={attributesHelpLink} target="_blank" /> }}
-      >
-        {tAttribute(`${attributeKey}.description`)}
-      </Trans>
-    )
-  }
-
   return (
     <>
       <AttributeGroupsListSection
-        title={tAttribute('certified.label')}
-        subtitle={getSubtitle('certified')}
-        attributeGroups={descriptorAttributes.certified}
-        emptyLabel={tAttribute(`noAttributesRequiredAlert.${providerOrConsumer}`, {
-          attributeKey: tAttribute(`type.certified_other`),
-        })}
+        descriptorAttributes={descriptorAttributes}
+        attributeKey="certified"
       />
       <Divider sx={{ my: 3 }} />
       <AttributeGroupsListSection
-        title={tAttribute('verified.label')}
-        subtitle={getSubtitle('verified')}
-        attributeGroups={descriptorAttributes.verified}
-        emptyLabel={tAttribute(`noAttributesRequiredAlert.${providerOrConsumer}`, {
-          attributeKey: tAttribute(`type.verified_other`),
-        })}
+        descriptorAttributes={descriptorAttributes}
+        attributeKey="verified"
       />
       <Divider sx={{ my: 3 }} />
       <AttributeGroupsListSection
-        title={tAttribute('declared.label')}
-        subtitle={getSubtitle('declared')}
-        attributeGroups={descriptorAttributes.declared}
-        emptyLabel={tAttribute(`noAttributesRequiredAlert.${providerOrConsumer}`, {
-          attributeKey: tAttribute(`type.declared_other`),
-        })}
+        descriptorAttributes={descriptorAttributes}
+        attributeKey="declared"
       />
     </>
   )
 }
 
 type AttributeGroupsListSectionProps = {
-  attributeGroups: Array<Array<DescriptorAttribute>>
-  title: string
-  subtitle: React.ReactNode
-  emptyLabel: string
+  descriptorAttributes: DescriptorAttributes
+  attributeKey: AttributeKey
+  topSideActions?: Array<ActionItemButton>
 }
 
-const AttributeGroupsListSection: React.FC<AttributeGroupsListSectionProps> = ({
-  attributeGroups,
-  title,
-  subtitle,
-  emptyLabel,
+export const AttributeGroupsListSection: React.FC<AttributeGroupsListSectionProps> = ({
+  descriptorAttributes,
+  attributeKey,
+  topSideActions,
 }) => {
+  const { t: tAttribute } = useTranslation('attribute')
+
+  const { mode } = useCurrentRoute()
+
+  const providerOrConsumer = mode as ProviderOrConsumer
+
+  const attributeGroups = descriptorAttributes[attributeKey]
+
   return (
-    <SectionContainer innerSection title={title} description={subtitle}>
+    <SectionContainer
+      innerSection
+      title={tAttribute(`${attributeKey}.label`)}
+      description={
+        <Trans
+          components={{ 1: <Link underline="hover" href={attributesHelpLink} target="_blank" /> }}
+        >
+          {tAttribute(`${attributeKey}.description`)}
+        </Trans>
+      }
+      topSideActions={topSideActions}
+    >
       {attributeGroups.length > 0 && (
         <Stack spacing={3}>
           {attributeGroups.map((attributeGroup, index) => (
@@ -88,7 +78,14 @@ const AttributeGroupsListSection: React.FC<AttributeGroupsListSectionProps> = ({
           ))}
         </Stack>
       )}
-      {attributeGroups.length === 0 && <AttributeGroupContainer title={emptyLabel} color="gray" />}
+      {attributeGroups.length === 0 && (
+        <AttributeGroupContainer
+          title={tAttribute(`noAttributesRequiredAlert.${providerOrConsumer}`, {
+            attributeKey: tAttribute(`type.${attributeKey}_other`),
+          })}
+          color="gray"
+        />
+      )}
     </SectionContainer>
   )
 }
diff --git a/src/pages/ProviderEServiceCreatePage/components/EServiceCreateStepAttributes/AddAttributesToEServiceForm/AttributeGroup.tsx b/src/pages/ProviderEServiceCreatePage/components/EServiceCreateStepAttributes/AddAttributesToEServiceForm/AttributeGroup.tsx
index e4df7784e..2a7776ebf 100644
--- a/src/pages/ProviderEServiceCreatePage/components/EServiceCreateStepAttributes/AddAttributesToEServiceForm/AttributeGroup.tsx
+++ b/src/pages/ProviderEServiceCreatePage/components/EServiceCreateStepAttributes/AddAttributesToEServiceForm/AttributeGroup.tsx
@@ -5,8 +5,10 @@ import { Box, Stack } from '@mui/material'
 import { useTranslation } from 'react-i18next'
 import AddIcon from '@mui/icons-material/Add'
 import { ButtonNaked } from '@pagopa/mui-italia'
-import { AttributeAutocomplete } from './AttributeAutocomplete'
+import { AttributeAutocomplete } from '../../../../../components/shared/AttributeAutocomplete'
 import type { DescriptorAttribute } from '@/api/api.generatedTypes'
+import { useFormContext } from 'react-hook-form'
+import type { EServiceCreateStepAttributesFormValues } from '../EServiceCreateStepAttributes'
 
 export type AttributeGroupProps = {
   group: Array<DescriptorAttribute>
@@ -36,7 +38,13 @@ export const AttributeGroup: React.FC<AttributeGroupProps> = ({
     onRemoveAttributeFromGroup(attributeId, groupIndex)
   }
 
-  const handleHideAutocomplete = () => {
+  const { watch, setValue } = useFormContext<EServiceCreateStepAttributesFormValues>()
+  const attributeGroups = watch(`attributes.${attributeKey}`)
+
+  const handleAddAttributeToGroup = (attribute: DescriptorAttribute) => {
+    const newAttributeGroups = [...attributeGroups]
+    newAttributeGroups[groupIndex].push(attribute)
+    setValue(`attributes.${attributeKey}`, newAttributeGroups)
     setIsAttributeAutocompleteShown(false)
   }
 
@@ -63,9 +71,12 @@ export const AttributeGroup: React.FC<AttributeGroupProps> = ({
         <>
           {isAttributeAutocompleteShown ? (
             <AttributeAutocomplete
-              groupIndex={groupIndex}
               attributeKey={attributeKey}
-              handleHideAutocomplete={handleHideAutocomplete}
+              onAddAttribute={handleAddAttributeToGroup}
+              alreadySelectedAttributeIds={attributeGroups.reduce(
+                (acc, group) => [...acc, ...group.map(({ id }) => id)],
+                [] as Array<string>
+              )}
             />
           ) : (
             <ButtonNaked
diff --git a/src/pages/ProviderEServiceDetailsPage/components/ProviderEServiceDetailsTab/ProviderEServiceDescriptorAttributes.tsx b/src/pages/ProviderEServiceDetailsPage/components/ProviderEServiceDetailsTab/ProviderEServiceDescriptorAttributes.tsx
index cb087b66d..be3ddc714 100644
--- a/src/pages/ProviderEServiceDetailsPage/components/ProviderEServiceDetailsTab/ProviderEServiceDescriptorAttributes.tsx
+++ b/src/pages/ProviderEServiceDetailsPage/components/ProviderEServiceDetailsTab/ProviderEServiceDescriptorAttributes.tsx
@@ -1,13 +1,19 @@
 import { EServiceQueries } from '@/api/eservice'
 import { SectionContainer, SectionContainerSkeleton } from '@/components/layout/containers'
-import { ReadOnlyDescriptorAttributes } from '@/components/shared/ReadOnlyDescriptorAttributes'
+import { AttributeGroupsListSection } from '@/components/shared/ReadOnlyDescriptorAttributes'
 import { useParams } from '@/router'
+import type { ActionItemButton } from '@/types/common.types'
+import { Divider } from '@mui/material'
 import { useSuspenseQuery } from '@tanstack/react-query'
-import React from 'react'
+import React, { useState } from 'react'
 import { useTranslation } from 'react-i18next'
+import EditIcon from '@mui/icons-material/Edit'
+import type { AttributeKey } from '@/types/attribute.types'
+import { ProviderEServiceUpdateDescriptorAttributesDrawer } from './ProviderEServiceUpdateDescriptorAttributesDrawer'
 
 export const ProviderEServiceDescriptorAttributes: React.FC = () => {
   const { t } = useTranslation('eservice', { keyPrefix: 'read.sections.attributes' })
+  const { t: tCommon } = useTranslation('common')
 
   const { eserviceId, descriptorId } = useParams<'PROVIDE_ESERVICE_MANAGE'>()
   const { data: descriptorAttributes } = useSuspenseQuery({
@@ -15,10 +21,51 @@ export const ProviderEServiceDescriptorAttributes: React.FC = () => {
     select: (d) => d.attributes,
   })
 
+  const [editAttributeDrawerState, setEditAttributeDrawerState] = useState<{
+    kind: AttributeKey
+    isOpen: boolean
+  }>({ isOpen: false, kind: 'certified' })
+
+  const getAttributeSectionActions = (kind: AttributeKey): Array<ActionItemButton> | undefined => {
+    if (descriptorAttributes[kind].length === 0) return
+
+    return [
+      {
+        action: () => setEditAttributeDrawerState({ kind, isOpen: true }),
+        label: tCommon('actions.edit'),
+        icon: EditIcon,
+      },
+    ]
+  }
+
   return (
-    <SectionContainer title={t('title')} description={t('description')}>
-      <ReadOnlyDescriptorAttributes descriptorAttributes={descriptorAttributes} />
-    </SectionContainer>
+    <>
+      <SectionContainer title={t('title')} description={t('description')}>
+        <AttributeGroupsListSection
+          attributeKey="certified"
+          descriptorAttributes={descriptorAttributes}
+          topSideActions={getAttributeSectionActions('certified')}
+        />
+        <Divider sx={{ my: 3 }} />
+        <AttributeGroupsListSection
+          attributeKey="verified"
+          descriptorAttributes={descriptorAttributes}
+          topSideActions={getAttributeSectionActions('verified')}
+        />
+        <Divider sx={{ my: 3 }} />
+        <AttributeGroupsListSection
+          attributeKey="declared"
+          descriptorAttributes={descriptorAttributes}
+          topSideActions={getAttributeSectionActions('declared')}
+        />
+      </SectionContainer>
+      <ProviderEServiceUpdateDescriptorAttributesDrawer
+        isOpen={editAttributeDrawerState.isOpen}
+        onClose={() => setEditAttributeDrawerState({ ...editAttributeDrawerState, isOpen: false })}
+        attributeKey={editAttributeDrawerState.kind}
+        descriptorAttributes={descriptorAttributes}
+      />
+    </>
   )
 }
 
diff --git a/src/pages/ProviderEServiceDetailsPage/components/ProviderEServiceDetailsTab/ProviderEServiceUpdateDescriptorAttributesDrawer.tsx b/src/pages/ProviderEServiceDetailsPage/components/ProviderEServiceDetailsTab/ProviderEServiceUpdateDescriptorAttributesDrawer.tsx
new file mode 100644
index 000000000..7b354c114
--- /dev/null
+++ b/src/pages/ProviderEServiceDetailsPage/components/ProviderEServiceDetailsTab/ProviderEServiceUpdateDescriptorAttributesDrawer.tsx
@@ -0,0 +1,153 @@
+import { Drawer } from '@/components/shared/Drawer'
+import React from 'react'
+import type { AttributeKey } from '@/types/attribute.types'
+import type { DescriptorAttribute, DescriptorAttributes } from '@/api/api.generatedTypes'
+import { Box, Stack } from '@mui/material'
+import { AttributeContainer, AttributeGroupContainer } from '@/components/layout/containers'
+import { useTranslation } from 'react-i18next'
+import { ButtonNaked } from '@pagopa/mui-italia'
+import AddIcon from '@mui/icons-material/Add'
+import { AttributeAutocomplete } from '@/components/shared/AttributeAutocomplete'
+import cloneDeep from 'lodash/cloneDeep'
+import { EServiceMutations } from '@/api/eservice'
+import { remapDescriptorAttributesToDescriptorAttributesSeed } from '@/utils/attribute.utils'
+import { useParams } from '@/router'
+
+type ProviderEServiceUpdateDescriptorAttributesDrawerProps = {
+  isOpen: boolean
+  onClose: () => void
+  attributeKey: AttributeKey
+  descriptorAttributes: DescriptorAttributes
+}
+
+export const ProviderEServiceUpdateDescriptorAttributesDrawer: React.FC<
+  ProviderEServiceUpdateDescriptorAttributesDrawerProps
+> = ({ isOpen, onClose, descriptorAttributes, attributeKey }) => {
+  const { t } = useTranslation('eservice', {
+    keyPrefix: 'read.drawers.updateDescriptorAttributesDrawer',
+  })
+  const { t: tAttribute } = useTranslation('attribute')
+  const { t: tCommon } = useTranslation('common')
+
+  const { eserviceId, descriptorId } = useParams<'PROVIDE_ESERVICE_MANAGE'>()
+
+  const [selectedDescriptorAttributes, setSelectedDescriptorAttributes] =
+    React.useState<DescriptorAttributes>(() => cloneDeep(descriptorAttributes))
+
+  const { mutate: updateAttributes } = EServiceMutations.useUpdateDescriptorAttributes()
+
+  const attributeGroups = selectedDescriptorAttributes[attributeKey]
+  const [isAttributeAutocompleteShown, setIsAttributeAutocompleteShown] = React.useState(false)
+
+  const alreadySelectedAttributeIds = React.useMemo(
+    () =>
+      attributeGroups.reduce(
+        (acc, group) => [...acc, ...group.map(({ id }) => id)],
+        [] as Array<string>
+      ),
+    [attributeGroups]
+  )
+
+  const handleAddAttributeToGroup = (groupdIdx: number, attribute: DescriptorAttribute) => {
+    setSelectedDescriptorAttributes((prev) => {
+      const newAttributeGroups = [...prev[attributeKey]]
+      newAttributeGroups[groupdIdx].push(attribute)
+      return {
+        ...prev,
+        [attributeKey]: newAttributeGroups,
+      }
+    })
+    setIsAttributeAutocompleteShown(false)
+  }
+
+  const handleRemoveAttributeFromGroup = (groupIdx: number, attributeId: string) => {
+    setSelectedDescriptorAttributes((prev) => {
+      const newAttributeGroups = [...prev[attributeKey]]
+      newAttributeGroups[groupIdx] = newAttributeGroups[groupIdx].filter(
+        ({ id }) => id !== attributeId
+      )
+      return {
+        ...prev,
+        [attributeKey]: newAttributeGroups,
+      }
+    })
+  }
+
+  const canAttributeBeRemoved = (groupIdx: number, descriptorAttribute: DescriptorAttribute) => {
+    return !descriptorAttributes[attributeKey][groupIdx].some(
+      (att) => att.id === descriptorAttribute.id
+    )
+  }
+
+  const handleSubmit = () => {
+    updateAttributes(
+      {
+        eserviceId,
+        descriptorId,
+        attributeKey,
+        ...remapDescriptorAttributesToDescriptorAttributesSeed(selectedDescriptorAttributes),
+      },
+      { onSuccess: onClose }
+    )
+  }
+
+  return (
+    <Drawer
+      isOpen={isOpen}
+      onClose={onClose}
+      onTransitionExited={() => setSelectedDescriptorAttributes(cloneDeep(descriptorAttributes))}
+      title={t('title', { attributeKind: tAttribute(`type.${attributeKey}_other`) })}
+      subtitle={t('subtitle')}
+      buttonAction={{
+        label: tCommon('actions.saveEdits'),
+        action: handleSubmit,
+      }}
+    >
+      {attributeGroups.map((group, groupIdx) => (
+        <AttributeGroupContainer
+          cardContentSx={{
+            py: 1,
+            px: 2,
+          }}
+          sx={{ border: 'none' }}
+          elevation={4}
+          key={groupIdx}
+          title={tAttribute('group.read.provider')}
+        >
+          <Stack sx={{ listStyleType: 'none', pl: 0, mt: 1 }} component="ul" spacing={1.2}>
+            {group.map((attribute) => (
+              <Box component="li" key={attribute.id}>
+                <AttributeContainer
+                  attribute={attribute}
+                  onRemove={
+                    canAttributeBeRemoved(groupIdx, attribute)
+                      ? (attribute) => handleRemoveAttributeFromGroup(groupIdx, attribute)
+                      : undefined
+                  }
+                />
+              </Box>
+            ))}
+          </Stack>
+          {isAttributeAutocompleteShown ? (
+            <AttributeAutocomplete
+              attributeKey={attributeKey}
+              alreadySelectedAttributeIds={alreadySelectedAttributeIds}
+              onAddAttribute={(attribute) => handleAddAttributeToGroup(groupIdx, attribute)}
+              direction="column"
+            />
+          ) : (
+            <ButtonNaked
+              color="primary"
+              type="button"
+              sx={{ fontWeight: 700 }}
+              startIcon={<AddIcon fontSize="small" />}
+              onClick={() => setIsAttributeAutocompleteShown(true)}
+            >
+              {tAttribute('group.addBtn')}
+            </ButtonNaked>
+          )}
+        </AttributeGroupContainer>
+      ))}
+    </Drawer>
+  )
+}
diff --git a/src/pages/ProviderEServiceSummaryPage/components/ProviderEServiceAttributeVersionSummary.tsx b/src/pages/ProviderEServiceSummaryPage/components/ProviderEServiceAttributeVersionSummary.tsx
index 044fd7a3b..4f6bda7a0 100644
--- a/src/pages/ProviderEServiceSummaryPage/components/ProviderEServiceAttributeVersionSummary.tsx
+++ b/src/pages/ProviderEServiceSummaryPage/components/ProviderEServiceAttributeVersionSummary.tsx
@@ -2,12 +2,12 @@ import React from 'react'
 import { ReadOnlyDescriptorAttributes } from '@/components/shared/ReadOnlyDescriptorAttributes'
 import { EServiceQueries } from '@/api/eservice'
 import { useParams } from '@/router'
-import { useQuery } from '@tanstack/react-query'
+import { useSuspenseQuery } from '@tanstack/react-query'
 
 export const ProviderEServiceAttributeVersionSummary: React.FC = () => {
   const params = useParams<'PROVIDE_ESERVICE_SUMMARY'>()
 
-  const { data: descriptor } = useQuery(
+  const { data: descriptor } = useSuspenseQuery(
     EServiceQueries.getDescriptorProvider(params.eserviceId, params.descriptorId)
   )
 
diff --git a/src/pages/ProviderEServiceSummaryPage/components/ProviderEServiceDocumentationSummary.tsx b/src/pages/ProviderEServiceSummaryPage/components/ProviderEServiceDocumentationSummary.tsx
index 9fd825b05..87e8f2c12 100644
--- a/src/pages/ProviderEServiceSummaryPage/components/ProviderEServiceDocumentationSummary.tsx
+++ b/src/pages/ProviderEServiceSummaryPage/components/ProviderEServiceDocumentationSummary.tsx
@@ -7,13 +7,13 @@ import AttachFileIcon from '@mui/icons-material/AttachFile'
 import { EServiceDownloads, EServiceQueries } from '@/api/eservice'
 import { getDownloadDocumentName } from '@/utils/eservice.utils'
 import { useParams } from '@/router'
-import { useQuery } from '@tanstack/react-query'
+import { useSuspenseQuery } from '@tanstack/react-query'
 
 export const ProviderEServiceDocumentationSummary: React.FC = () => {
   const { t } = useTranslation('eservice', { keyPrefix: 'summary.documentationSummary' })
   const params = useParams<'PROVIDE_ESERVICE_SUMMARY'>()
 
-  const { data: descriptor } = useQuery(
+  const { data: descriptor } = useSuspenseQuery(
     EServiceQueries.getDescriptorProvider(params.eserviceId, params.descriptorId)
   )
 
diff --git a/src/pages/ProviderEServiceSummaryPage/components/ProviderEServiceGeneralInfoSummary.tsx b/src/pages/ProviderEServiceSummaryPage/components/ProviderEServiceGeneralInfoSummary.tsx
index 7d8801225..5004cdb3f 100644
--- a/src/pages/ProviderEServiceSummaryPage/components/ProviderEServiceGeneralInfoSummary.tsx
+++ b/src/pages/ProviderEServiceSummaryPage/components/ProviderEServiceGeneralInfoSummary.tsx
@@ -4,9 +4,9 @@ import { InformationContainer } from '@pagopa/interop-fe-commons'
 import { useTranslation } from 'react-i18next'
 import { EServiceQueries } from '@/api/eservice'
 import { useParams } from '@/router'
-import { useQuery } from '@tanstack/react-query'
+import { useSuspenseQuery } from '@tanstack/react-query'
 import { STAGE } from '@/config/env'
-import { PagoPAEnvVars } from '@/types/common.types'
+import type { PagoPAEnvVars } from '@/types/common.types'
 
 export const ProviderEServiceGeneralInfoSummary: React.FC = () => {
   const signalHubFlagDisabledStage: PagoPAEnvVars['STAGE'][] = ['PROD', 'UAT']
@@ -14,12 +14,10 @@ export const ProviderEServiceGeneralInfoSummary: React.FC = () => {
   const { t } = useTranslation('eservice', { keyPrefix: 'summary.generalInfoSummary' })
   const params = useParams<'PROVIDE_ESERVICE_SUMMARY'>()
 
-  const { data: descriptor } = useQuery(
+  const { data: descriptor } = useSuspenseQuery(
     EServiceQueries.getDescriptorProvider(params.eserviceId, params.descriptorId)
   )
 
-  if (!descriptor) return null
-
   return (
     <Stack spacing={2}>
       <InformationContainer
diff --git a/src/pages/ProviderEServiceSummaryPage/components/ProviderEServiceRiskAnalysisSummary.tsx b/src/pages/ProviderEServiceSummaryPage/components/ProviderEServiceRiskAnalysisSummary.tsx
index 3ee3ae8b0..fa25ec114 100644
--- a/src/pages/ProviderEServiceSummaryPage/components/ProviderEServiceRiskAnalysisSummary.tsx
+++ b/src/pages/ProviderEServiceSummaryPage/components/ProviderEServiceRiskAnalysisSummary.tsx
@@ -3,7 +3,7 @@ import { PurposeQueries } from '@/api/purpose'
 import useCurrentLanguage from '@/hooks/useCurrentLanguage'
 import { useParams } from '@/router'
 import { List, ListItem, ListItemText, Typography } from '@mui/material'
-import { useQuery } from '@tanstack/react-query'
+import { useQuery, useSuspenseQuery } from '@tanstack/react-query'
 import React from 'react'
 
 type QuestionItem = { question: string; answer: string; questionInfoLabel?: string }
@@ -19,7 +19,7 @@ export const ProviderEServiceRiskAnalysisSummary: React.FC<
 
   const params = useParams<'PROVIDE_ESERVICE_SUMMARY'>()
 
-  const { data: descriptor } = useQuery(
+  const { data: descriptor } = useSuspenseQuery(
     EServiceQueries.getDescriptorProvider(params.eserviceId, params.descriptorId)
   )
 
@@ -70,7 +70,7 @@ export const ProviderEServiceRiskAnalysisSummary: React.FC<
     return answers
   }, [riskAnalysisTemplate, riskAnalysisConfig, currentLanguage])
 
-  if (!descriptor || !riskAnalysisTemplate) return null
+  if (!riskAnalysisTemplate) return null
 
   return (
     <>
diff --git a/src/pages/ProviderEServiceSummaryPage/components/ProviderEServiceRiskAnalysisSummaryList.tsx b/src/pages/ProviderEServiceSummaryPage/components/ProviderEServiceRiskAnalysisSummaryList.tsx
index a2ff932ce..897dc0c1c 100644
--- a/src/pages/ProviderEServiceSummaryPage/components/ProviderEServiceRiskAnalysisSummaryList.tsx
+++ b/src/pages/ProviderEServiceSummaryPage/components/ProviderEServiceRiskAnalysisSummaryList.tsx
@@ -4,18 +4,16 @@ import { Divider, Stack, Typography } from '@mui/material'
 import React from 'react'
 import { ProviderEServiceRiskAnalysisSummary } from './ProviderEServiceRiskAnalysisSummary'
 import { useTranslation } from 'react-i18next'
-import { useQuery } from '@tanstack/react-query'
+import { useSuspenseQuery } from '@tanstack/react-query'
 
 export const ProviderEServiceRiskAnalysisSummaryList: React.FC = () => {
   const { t } = useTranslation('eservice', { keyPrefix: 'summary.riskAnalysisSummaryList' })
   const params = useParams<'PROVIDE_ESERVICE_SUMMARY'>()
 
-  const { data: descriptor } = useQuery(
+  const { data: descriptor } = useSuspenseQuery(
     EServiceQueries.getDescriptorProvider(params.eserviceId, params.descriptorId)
   )
 
-  if (!descriptor) return null
-
   const riskAnalysisList = descriptor.eservice.riskAnalysis
 
   return (
diff --git a/src/pages/ProviderEServiceSummaryPage/components/ProviderEServiceVersionInfoSummary.tsx b/src/pages/ProviderEServiceSummaryPage/components/ProviderEServiceVersionInfoSummary.tsx
index 4d712a7ae..44dda87af 100644
--- a/src/pages/ProviderEServiceSummaryPage/components/ProviderEServiceVersionInfoSummary.tsx
+++ b/src/pages/ProviderEServiceSummaryPage/components/ProviderEServiceVersionInfoSummary.tsx
@@ -5,19 +5,17 @@ import { useTranslation } from 'react-i18next'
 import { formatThousands, secondsToMinutes } from '@/utils/format.utils'
 import { EServiceQueries } from '@/api/eservice'
 import { useParams } from '@/router'
-import { useQuery } from '@tanstack/react-query'
+import { useSuspenseQuery } from '@tanstack/react-query'
 
 export const ProviderEServiceVersionInfoSummary: React.FC = () => {
   const { t } = useTranslation('eservice', { keyPrefix: 'summary.versionInfoSummary' })
   const { t: tCommon } = useTranslation('common')
   const params = useParams<'PROVIDE_ESERVICE_SUMMARY'>()
 
-  const { data: descriptor } = useQuery(
+  const { data: descriptor } = useSuspenseQuery(
     EServiceQueries.getDescriptorProvider(params.eserviceId, params.descriptorId)
   )
 
-  if (!descriptor) return null
-
   const voucherLifespan = secondsToMinutes(descriptor.voucherLifespan)
   const hasManualApproval = descriptor.agreementApprovalPolicy === 'MANUAL'
 
diff --git a/src/static/locales/en/common.json b/src/static/locales/en/common.json
index 38ec4438f..78ff979b9 100644
--- a/src/static/locales/en/common.json
+++ b/src/static/locales/en/common.json
@@ -38,7 +38,8 @@
     "insert": "Insert",
     "revoke": "Revoke",
     "upload": "Upload",
-    "import": "Import"
+    "import": "Import",
+    "saveEdits": "Save edits"
   },
   "table": {
     "headData": {
diff --git a/src/static/locales/en/eservice.json b/src/static/locales/en/eservice.json
index df05622b7..8a9126d5f 100644
--- a/src/static/locales/en/eservice.json
+++ b/src/static/locales/en/eservice.json
@@ -431,6 +431,10 @@
           "noOptionsText": "No keychain found"
         },
         "noKeychainAlert": "There are no keychain available. <1>Create your first keychain</1>."
+      },
+      "updateDescriptorAttributesDrawer": {
+        "title": "Edit {{attributeKind}} attributes",
+        "subtitle": "The requirements already entered cannot be modified"
       }
     }
   },
diff --git a/src/static/locales/en/mutations-feedback.json b/src/static/locales/en/mutations-feedback.json
index ed7f40bde..f521ce53a 100644
--- a/src/static/locales/en/mutations-feedback.json
+++ b/src/static/locales/en/mutations-feedback.json
@@ -184,6 +184,13 @@
         "success": "The list has been downloaded successfully",
         "error": "The list could not be downloaded. Please try again"
       }
+    },
+    "updateDescriptorAttributes": {
+      "loading": "Saving new attributes",
+      "outcome": {
+        "success": "The {{attributeKind}} attributes have been modified correctly",
+        "error": "It was not possible to modify the {{attributeKind}} attributes. Please, try again!"
+      }
     }
   },
   "attribute": {
diff --git a/src/static/locales/it/common.json b/src/static/locales/it/common.json
index aacef2329..e739ee2a8 100644
--- a/src/static/locales/it/common.json
+++ b/src/static/locales/it/common.json
@@ -38,7 +38,8 @@
     "insert": "Inserisci",
     "revoke": "Revoca",
     "upload": "Carica",
-    "import": "Importa"
+    "import": "Importa",
+    "saveEdits": "Salva modifiche"
   },
   "table": {
     "headData": {
diff --git a/src/static/locales/it/eservice.json b/src/static/locales/it/eservice.json
index cacc2c5c6..ebaa49ab0 100644
--- a/src/static/locales/it/eservice.json
+++ b/src/static/locales/it/eservice.json
@@ -431,6 +431,10 @@
           "noOptionsText": "Nessun portachiavi trovato"
         },
         "noKeychainAlert": "Non ci sono portachiavi disponibili. <1>Crea il tuo primo portachiavi</1>."
+      },
+      "updateDescriptorAttributesDrawer": {
+        "title": "Modifica attributi {{attributeKind}}",
+        "subtitle": "I requisiti già inseriti non possono essere modificati"
       }
     }
   },
diff --git a/src/static/locales/it/mutations-feedback.json b/src/static/locales/it/mutations-feedback.json
index e4f1740eb..73327944b 100644
--- a/src/static/locales/it/mutations-feedback.json
+++ b/src/static/locales/it/mutations-feedback.json
@@ -184,6 +184,13 @@
         "success": "L’elenco è stato scaricato correttamente",
         "error": "Non è stato possibile scaricare l’elenco. Per favore, riprova!"
       }
+    },
+    "updateDescriptorAttributes": {
+      "loading": "Stiamo aggiornando gli attributi",
+      "outcome": {
+        "success": "Gli attributi {{attributeKind}} sono stati modificati correttamente!",
+        "error": "Non è stato possibile modificare gli attributi {{attributeKind}}. Per favore, riprova!"
+      }
     }
   },
   "attribute": {

From 082041b10f7b00863a205e59462e409804225e00 Mon Sep 17 00:00:00 2001
From: Carmine Porricelli <carmine.porricelli@pagopa.it>
Date: Fri, 6 Dec 2024 15:05:06 +0100
Subject: [PATCH 2/4] Update AttributeAutocomplete.tsx

---
 src/components/shared/AttributeAutocomplete.tsx | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/components/shared/AttributeAutocomplete.tsx b/src/components/shared/AttributeAutocomplete.tsx
index 81cad16d0..49bed1baf 100644
--- a/src/components/shared/AttributeAutocomplete.tsx
+++ b/src/components/shared/AttributeAutocomplete.tsx
@@ -75,7 +75,11 @@ export const AttributeAutocomplete: React.FC<AttributeAutocompleteProps> = ({
 
   return (
     <FormProvider {...attributeAutocompleteFormMethods}>
-      <Stack direction={direction} alignItems="center" spacing={1}>
+      <Stack
+        direction={direction}
+        alignItems={direction === 'column' ? 'start' : 'center'}
+        spacing={1}
+      >
         <RHFAutocompleteSingle
           label={t('autocompleteInput.label')}
           placeholder={t('autocompleteInput.placeholder')}
@@ -87,7 +91,6 @@ export const AttributeAutocomplete: React.FC<AttributeAutocompleteProps> = ({
         />
         <Button
           onClick={handleAddAttributeToGroup}
-          fullWidth={direction === 'column'}
           disabled={!isSelected}
           type="button"
           variant="contained"

From c54827c8bb6dadd639eeb2e6489e6dd08f2e4ea0 Mon Sep 17 00:00:00 2001
From: Carmine Porricelli <carmine.porricelli@pagopa.it>
Date: Fri, 6 Dec 2024 15:08:50 +0100
Subject: [PATCH 3/4] fix type error

---
 src/api/eservice/eservice.mutations.ts | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/src/api/eservice/eservice.mutations.ts b/src/api/eservice/eservice.mutations.ts
index 881082206..c447a5a0e 100644
--- a/src/api/eservice/eservice.mutations.ts
+++ b/src/api/eservice/eservice.mutations.ts
@@ -315,10 +315,18 @@ function useUpdateDescriptorAttributes() {
   return useMutation({
     mutationFn: EServiceServices.updateDescriptorAttributes,
     meta: {
-      successToastLabel: (_: unknown, variables: { attributeKey: AttributeKey }) =>
-        t('outcome.success', { attributeKind: tAttribute(`${variables.attributeKey}_other`) }),
-      errorToastLabel: (_: unknown, variables: { attributeKey: AttributeKey }) =>
-        t('outcome.error', { attributeKind: tAttribute(`${variables.attributeKey}_other`) }),
+      successToastLabel: (_: unknown, variables: unknown) =>
+        t('outcome.success', {
+          attributeKind: tAttribute(
+            `${(variables as { attributeKey: AttributeKey }).attributeKey}_other`
+          ),
+        }),
+      errorToastLabel: (_: unknown, variables: unknown) =>
+        t('outcome.error', {
+          attributeKind: tAttribute(
+            `${(variables as { attributeKey: AttributeKey }).attributeKey}_other`
+          ),
+        }),
       loadingLabel: t('loading'),
     },
   })

From e8f49c067b9b167ed1627651d2c4c5f88f96b0bf Mon Sep 17 00:00:00 2001
From: Carmine Porricelli <carmine.porricelli@pagopa.it>
Date: Mon, 9 Dec 2024 10:29:38 +0100
Subject: [PATCH 4/4] Design fixes

---
 src/api/eservice/eservice.services.ts         |  3 +-
 ...erviceUpdateDescriptorAttributesDrawer.tsx | 92 ++++++++++---------
 2 files changed, 48 insertions(+), 47 deletions(-)

diff --git a/src/api/eservice/eservice.services.ts b/src/api/eservice/eservice.services.ts
index 92a4e842c..3b921fc87 100644
--- a/src/api/eservice/eservice.services.ts
+++ b/src/api/eservice/eservice.services.ts
@@ -401,11 +401,10 @@ async function updateDescriptorAttributes({
   descriptorId: string
   attributeKey: AttributeKey
 } & DescriptorAttributesSeed) {
-  const response = await axiosInstance.post<CreatedResource>(
+  return axiosInstance.post<void>(
     `${BACKEND_FOR_FRONTEND_URL}/eservices/${eserviceId}/descriptors/${descriptorId}/attributes/update`,
     payload
   )
-  return response.data
 }
 
 export const EServiceServices = {
diff --git a/src/pages/ProviderEServiceDetailsPage/components/ProviderEServiceDetailsTab/ProviderEServiceUpdateDescriptorAttributesDrawer.tsx b/src/pages/ProviderEServiceDetailsPage/components/ProviderEServiceDetailsTab/ProviderEServiceUpdateDescriptorAttributesDrawer.tsx
index 7b354c114..6d02f10b6 100644
--- a/src/pages/ProviderEServiceDetailsPage/components/ProviderEServiceDetailsTab/ProviderEServiceUpdateDescriptorAttributesDrawer.tsx
+++ b/src/pages/ProviderEServiceDetailsPage/components/ProviderEServiceDetailsTab/ProviderEServiceUpdateDescriptorAttributesDrawer.tsx
@@ -103,51 +103,53 @@ export const ProviderEServiceUpdateDescriptorAttributesDrawer: React.FC<
         action: handleSubmit,
       }}
     >
-      {attributeGroups.map((group, groupIdx) => (
-        <AttributeGroupContainer
-          cardContentSx={{
-            py: 1,
-            px: 2,
-          }}
-          sx={{ border: 'none' }}
-          elevation={4}
-          key={groupIdx}
-          title={tAttribute('group.read.provider')}
-        >
-          <Stack sx={{ listStyleType: 'none', pl: 0, mt: 1 }} component="ul" spacing={1.2}>
-            {group.map((attribute) => (
-              <Box component="li" key={attribute.id}>
-                <AttributeContainer
-                  attribute={attribute}
-                  onRemove={
-                    canAttributeBeRemoved(groupIdx, attribute)
-                      ? (attribute) => handleRemoveAttributeFromGroup(groupIdx, attribute)
-                      : undefined
-                  }
-                />
-              </Box>
-            ))}
-          </Stack>
-          {isAttributeAutocompleteShown ? (
-            <AttributeAutocomplete
-              attributeKey={attributeKey}
-              alreadySelectedAttributeIds={alreadySelectedAttributeIds}
-              onAddAttribute={(attribute) => handleAddAttributeToGroup(groupIdx, attribute)}
-              direction="column"
-            />
-          ) : (
-            <ButtonNaked
-              color="primary"
-              type="button"
-              sx={{ fontWeight: 700 }}
-              startIcon={<AddIcon fontSize="small" />}
-              onClick={() => setIsAttributeAutocompleteShown(true)}
-            >
-              {tAttribute('group.addBtn')}
-            </ButtonNaked>
-          )}
-        </AttributeGroupContainer>
-      ))}
+      <Stack spacing={3} sx={{ mb: 3 }}>
+        {attributeGroups.map((group, groupIdx) => (
+          <AttributeGroupContainer
+            cardContentSx={{
+              py: 1,
+              px: 2,
+            }}
+            sx={{ border: 'none' }}
+            elevation={4}
+            key={groupIdx}
+            title={tAttribute('group.read.provider')}
+          >
+            <Stack sx={{ listStyleType: 'none', pl: 0, mt: 1 }} component="ul" spacing={1.2}>
+              {group.map((attribute) => (
+                <Box component="li" key={attribute.id}>
+                  <AttributeContainer
+                    attribute={attribute}
+                    onRemove={
+                      canAttributeBeRemoved(groupIdx, attribute)
+                        ? (attribute) => handleRemoveAttributeFromGroup(groupIdx, attribute)
+                        : undefined
+                    }
+                  />
+                </Box>
+              ))}
+            </Stack>
+            {isAttributeAutocompleteShown ? (
+              <AttributeAutocomplete
+                attributeKey={attributeKey}
+                alreadySelectedAttributeIds={alreadySelectedAttributeIds}
+                onAddAttribute={(attribute) => handleAddAttributeToGroup(groupIdx, attribute)}
+                direction="column"
+              />
+            ) : (
+              <ButtonNaked
+                color="primary"
+                type="button"
+                sx={{ fontWeight: 700 }}
+                startIcon={<AddIcon fontSize="small" />}
+                onClick={() => setIsAttributeAutocompleteShown(true)}
+              >
+                {tAttribute('group.addBtn')}
+              </ButtonNaked>
+            )}
+          </AttributeGroupContainer>
+        ))}
+      </Stack>
     </Drawer>
   )
 }