fix(APP-983): Implement scrolling into the proposal creation eligibility section and remove the "No description" fallback text (APP-947 4/4)

.changeset/app-983-fix-scroll-to-eligibility-section.md

@@ -0,0 +1,5 @@
+---
+"@aragon/app": patch
+---
+
+Implement scrolling into the proposal creation eligibility section and remove the "No description" fallback text

apps/app/src/assets/locales/en.json

@@ -3863,7 +3863,6 @@
         "defaultName": "No name {{type}} policy"
       },
       "processDataListItem": {
-        "defaultDescription": "No description",
         "notEligible": "Not eligible",
         "viewRequirements": "View requirements"
       },

apps/app/src/modules/governance/hooks/useSimulateProposal/useSimulateProposalCreation.test.ts

@@ -125,7 +125,9 @@ describe('useSimulateProposalCreation hook', () => {
         );
 
         expect(useCallSpy).toHaveBeenCalledWith(
-            expect.objectContaining({ query: { enabled: false } }),
+            expect.objectContaining({
+                query: expect.objectContaining({ enabled: false }),
+            }),
         );
     });
 
@@ -135,7 +137,9 @@ describe('useSimulateProposalCreation hook', () => {
         );
 
         expect(useCallSpy).toHaveBeenCalledWith(
-            expect.objectContaining({ query: { enabled: false } }),
+            expect.objectContaining({
+                query: expect.objectContaining({ enabled: false }),
+            }),
         );
     });
 });

apps/app/src/modules/governance/hooks/useSimulateProposal/useSimulateProposalCreation.ts

@@ -79,6 +79,7 @@ export const useSimulateProposalCreation = (
         ...transactionData,
         query: {
             enabled: isEnabled,
+            refetchOnWindowFocus: false,
         },
     });
 

apps/app/src/modules/settings/pages/daoProcessDetailsPage/daoProcessDetailsPageClient.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { Card, DateFormat, formatterUtils } from '@aragon/gov-ui-kit';
+import { useEffect } from 'react';
 import { FormProvider, useForm } from 'react-hook-form';
 import type { ICreateDaoFormData } from '@/modules/createDao/components/createDaoForm';
 import {
@@ -17,6 +18,7 @@ import type {
 } from '@/modules/governance/types';
 import { useDao } from '@/shared/api/daoService';
 import { Page } from '@/shared/components/page';
+import { proposalCreationEligibilityAnchor } from '@/shared/components/processDataListItem';
 import { useTranslations } from '@/shared/components/translationsProvider';
 import { useDaoPlugins } from '@/shared/hooks/useDaoPlugins';
 import { useIsMounted } from '@/shared/hooks/useIsMounted';
@@ -139,6 +141,22 @@ export const DaoProcessDetailsPageClient: React.FC<
         ? (slotResult ?? fallback)
         : fallback;
 
+    const hasProposalCreationEligibility =
+        settings != null && settings.length > 0;
+
+    useEffect(() => {
+        if (
+            !hasProposalCreationEligibility ||
+            window.location.hash !== `#${proposalCreationEligibilityAnchor}`
+        ) {
+            return;
+        }
+
+        document
+            .getElementById(proposalCreationEligibilityAnchor)
+            ?.scrollIntoView({ behavior: 'smooth', block: 'start' });
+    }, [hasProposalCreationEligibility]);
+
     return (
         <>
             <Page.Header
@@ -171,8 +189,9 @@ export const DaoProcessDetailsPageClient: React.FC<
                             )}
                         </FormProvider>
                     </Page.MainSection>
-                    {settings != null && settings.length > 0 && (
+                    {hasProposalCreationEligibility && (
                         <Page.MainSection
+                            id={proposalCreationEligibilityAnchor}
                             title={t(
                                 'app.settings.daoProcessDetailsPage.section.creationEligibility',
                             )}

apps/app/src/shared/components/processDataListItem/index.ts

@@ -1,4 +1,5 @@
 export {
     type IProcessDataListItemProps,
     ProcessDataListItem,
+    proposalCreationEligibilityAnchor,
 } from './processDataListItem';

apps/app/src/shared/components/processDataListItem/processDataListItem.tsx

@@ -5,6 +5,14 @@ import { DaoTargetIndicator } from '@/shared/components/daoTargetIndicator';
 import { daoUtils } from '@/shared/utils/daoUtils';
 import { useTranslations } from '../translationsProvider';
 
+/**
+ * Hash anchor of the proposal-creation eligibility section on the process
+ * settings page. Appended to the settings link so the settings page scrolls the
+ * section into view once it has rendered.
+ */
+export const proposalCreationEligibilityAnchor =
+    'proposal-creation-eligibility';
+
 export type IProcessDataListItemProps = IDataListItemProps & {
     /**
      * Process to display the details for.
@@ -44,10 +52,8 @@ export const ProcessDataListItem: React.FC<IProcessDataListItemProps> = (
 
     const { address, description, slug } = process;
 
-    const processedDescription =
-        description != null && description.length > 0
-            ? description
-            : t('app.shared.processDataListItem.defaultDescription');
+    const processDescription =
+        description != null && description.length > 0 ? description : undefined;
 
     return (
         <DataList.Item
@@ -75,17 +81,22 @@ export const ProcessDataListItem: React.FC<IProcessDataListItemProps> = (
                                 {slug}
                             </p>
                         </div>
-                        <p className="line-clamp-2 font-normal text-neutral-500 text-sm leading-normal md:text-base">
-                            {processedDescription}
-                        </p>
+                        {processDescription && (
+                            <p className="line-clamp-2 font-normal text-neutral-500 text-sm leading-normal md:text-base">
+                                {processDescription}
+                            </p>
+                        )}
                     </div>
                     <DaoTargetIndicator dao={dao} plugin={process} size="sm" />
                 </div>
                 {showNotEligibleHelpText && (
                     <div className="text-neutral-300 text-sm md:text-base">
                         {t('app.shared.processDataListItem.notEligible')} •{' '}
                         <Link
-                            href={daoUtils.getDaoUrl(dao, `settings/${slug}`)}
+                            href={daoUtils.getDaoUrl(
+                                dao,
+                                `settings/${slug}#${proposalCreationEligibilityAnchor}`,
+                            )}
                             isExternal={true}
                         >
                             {t(