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
Automattic · Jul 8, 2024 · bcb5e62 · bcb5e62
1 parent dea21ad
commit bcb5e62
Show file tree

Hide file tree

Showing 6 changed files with 15 additions and 8 deletions.
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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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;
 }