feat(APP-919): Make link text optional and use shared link wrapper

.changeset/mandatory-fields-irritate.md

@@ -0,0 +1,5 @@
+---
+"@aragon/app": patch
+---
+
+Allow resource links to be saved and rendered without custom link text.

src/actions/capitalDistributor/components/capitalDistributorCreateCampaignActionDetails/capitalDistributorCreateCampaignActionDetails.tsx

@@ -10,12 +10,12 @@ import {
     formatterUtils,
     type IProposalAction,
     type IProposalActionComponentProps,
-    Link,
     NumberFormat,
 } from '@aragon/gov-ui-kit';
 import { formatUnits, type Hex, zeroAddress, zeroHash } from 'viem';
 import type { IProposalActionData } from '@/modules/governance/components/createProposalForm';
 import { useDao } from '@/shared/api/daoService';
+import { ResourceLink } from '@/shared/components/resourceLink';
 import {
     type TranslationFunction,
     useTranslations,
@@ -147,14 +147,12 @@ export const CapitalDistributorCreateCampaignActionDetails: React.FC<
                 >
                     <div className="flex flex-col gap-3">
                         {resources.map((link) => (
-                            <Link
-                                href={link.url}
+                            <ResourceLink
                                 isExternal={true}
                                 key={link.url}
-                                showUrl={true}
-                            >
-                                {link.name}
-                            </Link>
+                                name={link.name}
+                                url={link.url}
+                            />
                         ))}
                     </div>
                 </DefinitionList.Item>

src/actions/core/createProposal/createProposalActionDetails.tsx

@@ -8,10 +8,10 @@ import {
     InputContainer,
     type IProposalAction,
     type IProposalActionComponentProps,
-    Link,
 } from '@aragon/gov-ui-kit';
 import type { IProposalActionData } from '@/modules/governance/components/createProposalForm';
 import { NestedActionsList } from '@/modules/governance/components/nestedActionsList';
+import { ResourceLink } from '@/shared/components/resourceLink';
 import { SafeDocumentParser } from '@/shared/components/SafeDocumentParser';
 import { useTranslations } from '@/shared/components/translationsProvider';
 import type { ICoreActionCreateProposal } from '../types/coreActionCreateProposal';
@@ -103,14 +103,12 @@ export const CreateProposalActionDetails: React.FC<
                                 >
                                     <div className="flex flex-col gap-3">
                                         {metadata.resources.map((resource) => (
-                                            <Link
-                                                href={resource.url}
+                                            <ResourceLink
                                                 isExternal={true}
                                                 key={resource.url}
-                                                showUrl={true}
-                                            >
-                                                {resource.name}
-                                            </Link>
+                                                name={resource.name}
+                                                url={resource.url}
+                                            />
                                         ))}
                                     </div>
                                 </DefinitionList.Item>

src/actions/gaugeRegistrar/components/gaugeRegistrarRegisterGaugeActionDetails/gaugeRegistrarRegisterGaugeActionDetails.tsx

@@ -8,10 +8,10 @@ import {
     type IProposalAction,
     type IProposalActionComponentProps,
     type IProposalActionInputDataParameter,
-    Link,
 } from '@aragon/gov-ui-kit';
 import type { IProposalActionData } from '@/modules/governance/components/createProposalForm';
 import { useDao } from '@/shared/api/daoService';
+import { ResourceLink } from '@/shared/components/resourceLink';
 import { useTranslations } from '@/shared/components/translationsProvider';
 import { useDaoChain } from '@/shared/hooks/useDaoChain';
 import { ipfsUtils } from '@/shared/utils/ipfsUtils';
@@ -103,14 +103,12 @@ export const GaugeRegistrarRegisterGaugeActionDetails: React.FC<
                 >
                     <div className="flex flex-col gap-3">
                         {links.map((link) => (
-                            <Link
-                                href={link.url}
+                            <ResourceLink
                                 isExternal={true}
                                 key={link.url}
-                                showUrl={true}
-                            >
-                                {link.name}
-                            </Link>
+                                name={link.name}
+                                url={link.url}
+                            />
                         ))}
                     </div>
                 </DefinitionList.Item>

src/actions/gaugeVoter/components/gaugeVoterCreateGaugeActionDetails/gaugeVoterCreateGaugeActionDetails.tsx

@@ -7,10 +7,10 @@ import {
     DefinitionList,
     type IProposalAction,
     type IProposalActionComponentProps,
-    Link,
 } from '@aragon/gov-ui-kit';
 import type { IProposalActionData } from '@/modules/governance/components/createProposalForm';
 import { useDao } from '@/shared/api/daoService';
+import { ResourceLink } from '@/shared/components/resourceLink';
 import { useTranslations } from '@/shared/components/translationsProvider';
 import { useDaoChain } from '@/shared/hooks/useDaoChain';
 import { ipfsUtils } from '@/shared/utils/ipfsUtils';
@@ -86,14 +86,12 @@ export const GaugeVoterCreateGaugeActionDetails: React.FC<
                 >
                     <div className="flex flex-col gap-3">
                         {links.map((link) => (
-                            <Link
-                                href={link.url}
+                            <ResourceLink
                                 isExternal={true}
                                 key={link.url}
-                                showUrl={true}
-                            >
-                                {link.name}
-                            </Link>
+                                name={link.name}
+                                url={link.url}
+                            />
                         ))}
                     </div>
                 </DefinitionList.Item>

src/actions/gaugeVoter/components/gaugeVoterUpdateGaugeMetadataActionDetails/gaugeVoterUpdateGaugeMetadataActionDetails.tsx

@@ -7,10 +7,10 @@ import {
     DefinitionList,
     type IProposalAction,
     type IProposalActionComponentProps,
-    Link,
 } from '@aragon/gov-ui-kit';
 import type { IProposalActionData } from '@/modules/governance/components/createProposalForm';
 import { useDao } from '@/shared/api/daoService';
+import { ResourceLink } from '@/shared/components/resourceLink';
 import { useTranslations } from '@/shared/components/translationsProvider';
 import { useDaoChain } from '@/shared/hooks/useDaoChain';
 import { ipfsUtils } from '@/shared/utils/ipfsUtils';
@@ -86,14 +86,12 @@ export const GaugeVoterUpdateGaugeMetadataActionDetails: React.FC<
                 >
                     <div className="flex flex-col gap-3">
                         {links.map((link) => (
-                            <Link
-                                href={link.url}
+                            <ResourceLink
                                 isExternal={true}
                                 key={link.url}
-                                showUrl={true}
-                            >
-                                {link.name}
-                            </Link>
+                                name={link.name}
+                                url={link.url}
+                            />
                         ))}
                     </div>
                 </DefinitionList.Item>

src/modules/dashboard/pages/daoDashboardPage/daoDashboardPageClient.tsx

@@ -6,7 +6,6 @@ import {
     DateFormat,
     DefinitionList,
     formatterUtils,
-    Link,
 } from '@aragon/gov-ui-kit';
 import type { IFeaturedDelegates } from '@/shared/api/cmsService';
 import {
@@ -16,6 +15,7 @@ import {
 } from '@/shared/api/daoService';
 import { Page } from '@/shared/components/page';
 import { PluginSingleComponent } from '@/shared/components/pluginSingleComponent';
+import { ResourceLink } from '@/shared/components/resourceLink';
 import { useTranslations } from '@/shared/components/translationsProvider';
 import { useAdminStatus } from '@/shared/hooks/useAdminStatus';
 import { useDaoChain } from '@/shared/hooks/useDaoChain';
@@ -165,14 +165,12 @@ export const DaoDashboardPageClient: React.FC<IDaoDashboardPageClientProps> = (
                             )}
                         >
                             {dao.links.map(({ url, name }) => (
-                                <Link
-                                    href={url}
+                                <ResourceLink
                                     isExternal={true}
                                     key={url}
-                                    showUrl={true}
-                                >
-                                    {name}
-                                </Link>
+                                    name={name}
+                                    url={url}
+                                />
                             ))}
                         </Page.AsideCard>
                     )}

src/modules/finance/components/daoInfoAside/daoInfoAside.tsx

@@ -7,9 +7,9 @@ import {
     Collapsible,
     DefinitionList,
     IconType,
-    Link,
 } from '@aragon/gov-ui-kit';
 import { useFeatureFlags } from '@/shared/components/featureFlagsProvider';
+import { ResourceLink } from '@/shared/components/resourceLink';
 import { StatCard } from '@/shared/components/statCard';
 import { useTranslations } from '@/shared/components/translationsProvider';
 import { networkDefinitions } from '@/shared/constants/networkDefinitions';
@@ -86,14 +86,12 @@ export const DaoInfoAside: React.FC<IDaoInfoAsideProps> = (props) => {
 
                 <div className="flex flex-col gap-3">
                     {links.map((link) => (
-                        <Link
-                            href={link.url}
+                        <ResourceLink
                             isExternal={true}
                             key={link.url}
-                            showUrl={true}
-                        >
-                            {link.name}
-                        </Link>
+                            name={link.name}
+                            url={link.url}
+                        />
                     ))}
                 </div>
                 {resolvedOctavLink && (

src/modules/governance/pages/daoProposalDetailsPage/daoProposalDetailsPageClient.test.tsx

@@ -315,6 +315,20 @@ describe('<DaoProposalDetailsPageClient /> component', () => {
         });
     });
 
+    it('renders an empty-name proposal resource with the URL as link text', () => {
+        const resource = { name: '', url: 'https://empty-name.com' };
+        const proposal = generateProposal({ resources: [resource] });
+        useProposalSpy.mockReturnValue(
+            generateReactQueryResultSuccess({ data: proposal }),
+        );
+        render(createTestComponent());
+
+        const link = screen.getByRole('link', { name: resource.url });
+        expect(link).toBeInTheDocument();
+        expect(link.getAttribute('href')).toEqual(resource.url);
+        expect(screen.getAllByText(resource.url)).toHaveLength(1);
+    });
+
     it('does not render the links section when proposal has no resources', () => {
         const proposal = generateProposal({ resources: [] });
         useProposalSpy.mockReturnValue(

src/modules/governance/pages/daoProposalDetailsPage/daoProposalDetailsPageClient.tsx

@@ -9,7 +9,6 @@ import {
     DefinitionList,
     formatterUtils,
     type IProposalActionsFooterDropdownItem,
-    Link,
     ProposalActions,
     ProposalActionTypeNoBasicView,
     ProposalStatus,
@@ -25,6 +24,7 @@ import { AragonBackendServiceError } from '@/shared/api/aragonBackendService';
 import { useDao } from '@/shared/api/daoService';
 import { Page } from '@/shared/components/page';
 import { PluginSingleComponent } from '@/shared/components/pluginSingleComponent';
+import { ResourceLink } from '@/shared/components/resourceLink';
 import { SafeDocumentParser } from '@/shared/components/SafeDocumentParser';
 import { useTranslations } from '@/shared/components/translationsProvider';
 import { useDaoChain } from '@/shared/hooks/useDaoChain';
@@ -419,14 +419,12 @@ export const DaoProposalDetailsPageClient: React.FC<
                         >
                             <div className="flex flex-col gap-4">
                                 {resources.map((resource) => (
-                                    <Link
-                                        href={resource.url}
+                                    <ResourceLink
                                         isExternal={true}
-                                        key={resource.name}
-                                        showUrl={true}
-                                    >
-                                        {resource.name}
-                                    </Link>
+                                        key={resource.url}
+                                        name={resource.name}
+                                        url={resource.url}
+                                    />
                                 ))}
                             </div>
                         </Page.AsideCard>

src/modules/settings/components/daoHierarchy/daoHierarchy.tsx

@@ -13,6 +13,7 @@ import {
 import type { IDao, ILinkedAccountSummary } from '@/shared/api/daoService';
 import { DaoTypeTag } from '@/shared/components/daoTypeTag';
 import { useFeatureFlags } from '@/shared/components/featureFlagsProvider';
+import { ResourceLink } from '@/shared/components/resourceLink';
 import { useTranslations } from '@/shared/components/translationsProvider';
 import { networkDefinitions } from '@/shared/constants/networkDefinitions';
 import { daoUtils } from '@/shared/utils/daoUtils';
@@ -128,14 +129,12 @@ const DaoInfo: React.FC<IDaoInfoProps> = ({ dao, permissionsHref }) => {
                 >
                     <div className="flex flex-col gap-3">
                         {dao.links.map((link) => (
-                            <Link
-                                href={link.url}
+                            <ResourceLink
                                 isExternal={true}
                                 key={link.url}
-                                showUrl={true}
-                            >
-                                {link.name}
-                            </Link>
+                                name={link.name}
+                                url={link.url}
+                            />
                         ))}
                     </div>
                 </DefinitionList.Item>

src/modules/settings/components/daoPluginInfo/daoPluginInfoMetadata.tsx

@@ -1,5 +1,5 @@
-import { Link } from '@aragon/gov-ui-kit';
 import type { IResource } from '@/shared/api/daoService';
+import { ResourceLink } from '@/shared/components/resourceLink';
 
 export interface IDaoPluginInfoMetadataProps {
     /**
@@ -20,11 +20,13 @@ export const DaoPluginInfoMetadata: React.FC<IDaoPluginInfoMetadataProps> = (
     return (
         <div className="flex flex-col gap-y-6">
             {description && <p className="text-neutral-500">{description}</p>}
-            {links?.map((resource: IResource, index: number) => (
-                <div className="flex flex-col gap-y-3" key={index}>
-                    <Link href={resource.url} isExternal={true} showUrl={true}>
-                        {resource.name}
-                    </Link>
+            {links?.map((resource: IResource) => (
+                <div className="flex flex-col gap-y-3" key={resource.url}>
+                    <ResourceLink
+                        isExternal={true}
+                        name={resource.name}
+                        url={resource.url}
+                    />
                 </div>
             ))}
         </div>

src/modules/settings/components/daoSettingsInfo/daoSettingsInfo.tsx

@@ -9,6 +9,7 @@ import {
 } from '@aragon/gov-ui-kit';
 import type { IDao } from '@/shared/api/daoService';
 import { useFeatureFlags } from '@/shared/components/featureFlagsProvider';
+import { ResourceLink } from '@/shared/components/resourceLink';
 import { useTranslations } from '@/shared/components/translationsProvider';
 import { networkDefinitions } from '@/shared/constants/networkDefinitions';
 import { useDaoChain } from '@/shared/hooks/useDaoChain';
@@ -101,14 +102,12 @@ export const DaoSettingsInfo: React.FC<IDaoSettingsInfoProps> = (props) => {
                     >
                         <div className="flex flex-col gap-3">
                             {dao.links.map((link) => (
-                                <Link
-                                    href={link.url}
+                                <ResourceLink
                                     isExternal={true}
                                     key={link.url}
-                                    showUrl={true}
-                                >
-                                    {link.name}
-                                </Link>
+                                    name={link.name}
+                                    url={link.url}
+                                />
                             ))}
                         </div>
                     </DefinitionList.Item>

src/plugins/capitalDistributorPlugin/dialogs/capitalDistributorClaimDialog/capitalDistributorClaimDialogDetails/capitalDistributorClaimDialogDetails.tsx

@@ -16,6 +16,7 @@ import {
     type ICampaign,
 } from '@/plugins/capitalDistributorPlugin/api/capitalDistributorService';
 import type { ICapitalDistributorPlugin } from '@/plugins/capitalDistributorPlugin/types';
+import { ResourceLink } from '@/shared/components/resourceLink';
 import { useTranslations } from '@/shared/components/translationsProvider';
 import { useFormField } from '@/shared/hooks/useFormField';
 import type { ICapitalDistributorClaimDialogForm } from '../capitalDistributorClaimDialogDefinitions';
@@ -137,14 +138,12 @@ export const CapitalDistributorClaimDialogDetails: React.FC<
                     </Heading>
                     <div className="flex flex-col gap-4">
                         {resources.map((resource) => (
-                            <Link
-                                href={resource.url}
+                            <ResourceLink
                                 isExternal={true}
                                 key={resource.url}
-                                showUrl={true}
-                            >
-                                {resource.name}
-                            </Link>
+                                name={resource.name}
+                                url={resource.url}
+                            />
                         ))}
                     </div>
                 </Card>