PIN-5862 PIN-5861 - Fix actions label, textarea validation rules and …

…improved delegations page loading UI (#1052)

* Fix revoke action label and reject textfield validation rules

* Improved delegations page loading state UI

src/components/dialogs/DialogRejectProducerDelegation.tsx

@@ -48,8 +48,8 @@ export const DialogRejectProducerDelegation: React.FC<DialogRejectProducerDelega
               infoLabel={t('content.reason.infoLabel')}
               focusOnMount
               multiline
-              inputProps={{ maxLength: 1000 }}
-              rules={{ required: true, minLength: 20 }}
+              inputProps={{ maxLength: 250 }}
+              rules={{ required: true, minLength: 10 }}
             />
           </DialogContent>
 

src/components/dialogs/DialogRevokeProducerDelegation.tsx

@@ -74,7 +74,7 @@ export const DialogRevokeProducerDelegation: React.FC<DialogRevokeProducerDelega
           {tCommon('cancel')}
         </Button>
         <Button variant="contained" disabled={!isConfirmCheckboxChecked} onClick={handleRevoke}>
-          {tCommon('revoke')}
+          {t('actions.revoke')}
         </Button>
       </DialogActions>
     </Dialog>

src/pages/DelegationsPage/DelegationsAvailabilityTab/DelegationAvailabilityTab.tsx

@@ -10,6 +10,14 @@ import { TenantHooks } from '@/api/tenant'
 import { hasTenantGivenProducerDelegationAvailability } from '@/utils/tenant.utils'
 
 export const DelegationsAvailabilityTab: React.FC = () => {
+  return (
+    <React.Suspense fallback={<DelegationsAvailabilitySectionSkeleton />}>
+      <DelegationsAvailabilitySection />
+    </React.Suspense>
+  )
+}
+
+const DelegationsAvailabilitySection: React.FC = () => {
   const { t } = useTranslation('party', { keyPrefix: 'delegations.availabilityTab' })
   const { t: tCommon } = useTranslation('common')
   const { isAdmin } = AuthHooks.useJwt()

src/pages/DelegationsPage/DelegationsGrantedTab/DelegationsGrantedTab.tsx

@@ -8,12 +8,15 @@ import { keepPreviousData, useQuery } from '@tanstack/react-query'
 import { AuthHooks } from '@/api/auth'
 import { DelegationQueries } from '@/api/delegation'
 import { Link } from '@/router'
-import { DelegationsTable } from '@/components/shared/DelegationTable/DelegationsTable'
+import {
+  DelegationsTable,
+  DelegationsTableSkeleton,
+} from '@/components/shared/DelegationTable/DelegationsTable'
 
 export const DelegationsGrantedTab: React.FC = () => {
   const { t: tCommon } = useTranslation('common')
-  const { isAdmin } = AuthHooks.useJwt()
-  const currentUserOrganizationId = AuthHooks.useJwt().jwt?.organizationId
+  const { isAdmin, jwt } = AuthHooks.useJwt()
+  const currentUserOrganizationId = jwt?.organizationId
 
   const { paginationParams, paginationProps, getTotalPageCount } = usePagination({ limit: 10 })
 
@@ -47,7 +50,9 @@ export const DelegationsGrantedTab: React.FC = () => {
           </Link>
         </Stack>
       )}
-      <DelegationsTable delegationType="DELEGATION_GRANTED" params={queryParams} />
+      <React.Suspense fallback={<DelegationsTableSkeleton delegationType="DELEGATION_GRANTED" />}>
+        <DelegationsTable delegationType="DELEGATION_GRANTED" params={queryParams} />
+      </React.Suspense>
       <Pagination {...paginationProps} totalPages={totalPageCount} />
     </>
   )

src/pages/DelegationsPage/components/DelegationsReceivedTab/DelegationsReceivedTab.tsx

@@ -8,7 +8,6 @@ import {
 } from '../../../../components/shared/DelegationTable/DelegationsTable'
 import { keepPreviousData, useQuery } from '@tanstack/react-query'
 import { DelegationQueries } from '@/api/delegation'
-import type { DelegationType } from '@/types/party.types'
 
 export const DelegationsReceivedTab: React.FC = () => {
   const { jwt } = AuthHooks.useJwt()

src/static/locales/en/shared-components.json

@@ -170,6 +170,9 @@
     "content": {
       "description": "The delegate will lose management of your e-service <strong>{{eserviceName}} with producer delegation</strong>, and the agreements and the purposes associated with it. The e-service will return under your control in the state it was in at the time of revocation. Do you have doubts? <1>Read the guide</1>.",
       "checkbox": "I have read and I want to proceed with the revocation"
+    },
+    "actions": {
+      "revoke": "Revoke delegation"
     }
   },
   "dialogRejectDelegatedVersionDraft": {

src/static/locales/it/shared-components.json

@@ -170,6 +170,9 @@
     "content": {
       "description": "Il delegato perderà la gestione del tuo e-service <strong>{{eserviceName}} con delega all'erogazione</strong>, e delle richieste di fruizione e le finalità ad esso associate. L’e-service tornerà sotto il tuo controllo nello stato in cui si trova all’atto della revoca. Hai dubbi? <1>Consulta la guida</1>.",
       "checkbox": "Ho letto e voglio procedere con la revoca"
+    },
+    "actions": {
+      "revoke": "Revoca la delega"
     }
   },
   "dialogRejectDelegatedVersionDraft": {