From bcb5e624252d44204a2f5e260b5d47fd554519db Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Gergely=20M=C3=A1rk=20Juh=C3=A1sz?=
 <36671565+gmjuhasz@users.noreply.github.com>
Date: Mon, 8 Jul 2024 10:09:29 +0200
Subject: [PATCH] Social: Change `Manage connections` button to a link with
 connections (#38220)

* Switch `Manage connections` to a link with at least 1 connection

* changelog

* Fixup versions
---
 .../changelog/change-social-manage-connection-link        | 4 ++++
 projects/js-packages/publicize-components/package.json    | 2 +-
 .../src/components/form/connections-list.tsx              | 2 ++
 .../publicize-components/src/components/form/index.tsx    | 2 --
 .../src/components/form/settings-button.tsx               | 8 +++++---
 .../src/components/form/styles.module.scss                | 5 +++--
 6 files changed, 15 insertions(+), 8 deletions(-)
 create mode 100644 projects/js-packages/publicize-components/changelog/change-social-manage-connection-link

diff --git a/projects/js-packages/publicize-components/changelog/change-social-manage-connection-link b/projects/js-packages/publicize-components/changelog/change-social-manage-connection-link
new file mode 100644
index 0000000000000..d7717a2aa03ef
--- /dev/null
+++ b/projects/js-packages/publicize-components/changelog/change-social-manage-connection-link
@@ -0,0 +1,4 @@
+Significance: minor
+Type: changed
+
+Changed `Manage connections` to a link with at least 1 connection
diff --git a/projects/js-packages/publicize-components/package.json b/projects/js-packages/publicize-components/package.json
index da26ff630a94c..8983b47d29787 100644
--- a/projects/js-packages/publicize-components/package.json
+++ b/projects/js-packages/publicize-components/package.json
@@ -1,7 +1,7 @@
 {
 	"private": true,
 	"name": "@automattic/jetpack-publicize-components",
-	"version": "0.55.2-alpha",
+	"version": "0.56.0-alpha",
 	"description": "A library of JS components required by the Publicize editor plugin",
 	"homepage": "https://github.com/Automattic/jetpack/tree/HEAD/projects/js-packages/publicize-components/#readme",
 	"bugs": {
diff --git a/projects/js-packages/publicize-components/src/components/form/connections-list.tsx b/projects/js-packages/publicize-components/src/components/form/connections-list.tsx
index 55b29b3b75def..6ef92f1bf8c7e 100644
--- a/projects/js-packages/publicize-components/src/components/form/connections-list.tsx
+++ b/projects/js-packages/publicize-components/src/components/form/connections-list.tsx
@@ -1,6 +1,7 @@
 import usePublicizeConfig from '../../hooks/use-publicize-config';
 import useSocialMediaConnections from '../../hooks/use-social-media-connections';
 import PublicizeConnection from '../connection';
+import { EnabledConnectionsNotice } from './enabled-connections-notice';
 import { SettingsButton } from './settings-button';
 import styles from './styles.module.scss';
 import { useConnectionState } from './use-connection-state';
@@ -33,6 +34,7 @@ export const ConnectionsList: React.FC = () => {
 					);
 				} ) }
 			</ul>
+			<EnabledConnectionsNotice />
 			{ ! needsUserConnection ? <SettingsButton variant="secondary" /> : null }
 		</div>
 	);
diff --git a/projects/js-packages/publicize-components/src/components/form/index.tsx b/projects/js-packages/publicize-components/src/components/form/index.tsx
index 33fd252508e30..b4294b35a653f 100644
--- a/projects/js-packages/publicize-components/src/components/form/index.tsx
+++ b/projects/js-packages/publicize-components/src/components/form/index.tsx
@@ -26,7 +26,6 @@ import { AdvancedPlanNudge } from './advanced-plan-nudge';
 import { AutoConversionNotice } from './auto-conversion-notice';
 import { BrokenConnectionsNotice } from './broken-connections-notice';
 import { ConnectionsList } from './connections-list';
-import { EnabledConnectionsNotice } from './enabled-connections-notice';
 import { InstagramNoMediaNotice } from './instagram-no-media-notice';
 import { SettingsButton } from './settings-button';
 import { ShareCountInfo } from './share-count-info';
@@ -108,7 +107,6 @@ export default function PublicizeForm() {
 					<PanelRow>
 						<ConnectionsList />
 					</PanelRow>
-					<EnabledConnectionsNotice />
 					<ShareCountInfo />
 					<BrokenConnectionsNotice />
 					<UnsupportedConnectionsNotice />
diff --git a/projects/js-packages/publicize-components/src/components/form/settings-button.tsx b/projects/js-packages/publicize-components/src/components/form/settings-button.tsx
index 60dc1dd61e599..8f591da12a2f7 100644
--- a/projects/js-packages/publicize-components/src/components/form/settings-button.tsx
+++ b/projects/js-packages/publicize-components/src/components/form/settings-button.tsx
@@ -24,21 +24,23 @@ type SettingsButtonProps = {
  * @returns {import('react').ReactNode} The button/link component.
  */
 export function SettingsButton( { label, variant = 'primary' }: SettingsButtonProps ) {
-	const { useAdminUiV1 } = useSelect( select => {
+	const { useAdminUiV1, connections } = useSelect( select => {
 		return {
 			useAdminUiV1: select( store ).useAdminUiV1(),
+			connections: select( store ).getConnections(),
 		};
 	}, [] );
 	const { openConnectionsModal } = useDispatch( store );
 	const { connectionsAdminUrl } = usePublicizeConfig();
 
 	const text = label || __( 'Manage connections', 'jetpack' );
+	const hasConnections = connections.length > 0;
 
 	return useAdminUiV1 ? (
 		<Button
 			onClick={ openConnectionsModal }
-			variant={ variant }
-			size="small"
+			variant={ hasConnections ? 'link' : variant }
+			size={ hasConnections ? 'default' : 'small' }
 			className={ styles[ 'settings-button' ] }
 		>
 			{ text }
diff --git a/projects/js-packages/publicize-components/src/components/form/styles.module.scss b/projects/js-packages/publicize-components/src/components/form/styles.module.scss
index 8d45bfef48b0c..aa882a20e340b 100644
--- a/projects/js-packages/publicize-components/src/components/form/styles.module.scss
+++ b/projects/js-packages/publicize-components/src/components/form/styles.module.scss
@@ -49,6 +49,7 @@
 
 .enabled-connections-notice {
 	color: var(--jp-gray-50);
+	margin-bottom: 0.5rem;
 }
 
 p.auto-share-title {
@@ -77,7 +78,7 @@ p.auto-share-title {
 	}
 }
 
-.settings-button {
+.settings-button.settings-button {
 	display: block;
-	margin-block: 0.5rem;
+	margin-bottom: 0.5rem;
 }