feat(collections): add archive link in settings page (#4203)

Author: rbcorrales

src/wizards/newspack/views/settings/collections/index.tsx

@@ -3,8 +3,10 @@
  */
 
 import { __ } from '@wordpress/i18n';
-import { useState, useEffect } from '@wordpress/element';
-import { ToggleControl } from '@wordpress/components';
+import { useState, useEffect, useMemo } from '@wordpress/element';
+import { ToggleControl, Tooltip, Icon } from '@wordpress/components';
+import { external } from '@wordpress/icons';
+import { cleanForSlug } from '@wordpress/url';
 import WizardSection from '../../../../wizards-section';
 import WizardsActionCard from '../../../../wizards-action-card';
 import useWizardApiFetchToggle from '../../../../hooks/use-wizard-api-fetch-toggle';
@@ -98,9 +100,37 @@ function Collections() {
 		} );
 	};
 
+	const DEFAULT_SLUG = 'collections';
+	const collectionsArchiveUrl = useMemo( () => {
+		const slug = cleanForSlug( settings.custom_naming_enabled && settings.custom_slug ? settings.custom_slug : DEFAULT_SLUG ) || DEFAULT_SLUG;
+		const base = new URL( window.newspack_urls?.site || window.location.origin );
+		base.pathname = base.pathname + ( ! base.pathname.endsWith( '/' ) ? '/' : '' );
+		return new URL( slug, base ).toString();
+	}, [ settings.custom_naming_enabled, settings.custom_slug ] );
+
 	return (
 		<div className="newspack-wizard__sections">
-			<h1>{ __( 'Collections Settings', 'newspack-plugin' ) }</h1>
+			<h1 style={ { display: 'flex', alignItems: 'center' } }>
+				{ __( 'Collections Settings', 'newspack-plugin' ) }
+				{ apiData.module_enabled_collections && (
+					<Tooltip text={ __( 'View Collections', 'newspack-plugin' ) }>
+						<a
+							href={ collectionsArchiveUrl }
+							target="_blank"
+							rel="noopener noreferrer"
+							style={ {
+								display: 'inline-flex',
+								marginLeft: '8px',
+								color: '#757575',
+								textDecoration: 'none',
+							} }
+							aria-label={ __( 'View Collections', 'newspack-plugin' ) }
+						>
+							<Icon icon={ external } size={ 20 } />
+						</a>
+					</Tooltip>
+				) }
+			</h1>
 
 			<WizardsActionCard
 				isMedium