Merge pull request #1739 from guardian/fp/add-live-front-link

Add link to live front
guardian · Dec 10, 2024 · 8f97d1e · 8f97d1e
2 parents 4b04919 + 3224157
commit 8f97d1e
Show file tree

Hide file tree

Showing 8 changed files with 186 additions and 37 deletions.
diff --git a/fronts-client/src/components/FrontsEdit/Edit.tsx b/fronts-client/src/components/FrontsEdit/Edit.tsx
@@ -14,7 +14,7 @@ import {
 } from 'bundles/frontsUI';
 import type { State } from 'types/State';
 import { ActionError } from 'types/Action';
-import FrontContainer from './FrontSection';
+import FrontContainer from './FrontSection/FrontSection';
 import FeedSection from '../feed/FeedSection';
 import ErrorBannner from '../ErrorBanner';
 import SectionContainer from '../layout/SectionContainer';

diff --git a/...rc/components/FrontsEdit/FrontSection.tsx → .../FrontsEdit/FrontSection/FrontSection.tsx b/...rc/components/FrontsEdit/FrontSection.tsx → .../FrontsEdit/FrontSection/FrontSection.tsx
@@ -16,18 +16,23 @@ import urls from 'constants/url';
 import { FrontConfig, EditionsFrontMetadata } from 'types/FaciaApi';
 import type { State } from 'types/State';
 import { selectFront } from 'selectors/frontsSelectors';
-import SectionHeader from '../layout/SectionHeader';
-import SectionContent from '../layout/SectionContent';
+import SectionHeader from '../../layout/SectionHeader';
+import SectionContent from '../../layout/SectionContent';
 import { CardSets, Collection, Stages } from 'types/Collection';
 import { toTitleCase } from 'util/stringUtils';
 import { RadioButton, RadioGroup } from 'components/inputs/RadioButtons';
-import { PreviewEyeIcon, ClearIcon } from 'components/icons/Icons';
+import {
+	PreviewEyeIcon,
+	ClearIcon,
+	GuardianRoundel,
+} from 'components/icons/Icons';
 import { createFrontId } from 'util/editUtils';
 import EditModeVisibility from 'components/util/EditModeVisibility';
 import { setFrontHiddenState, updateFrontMetadata } from 'actions/Editions';
-import FrontsContainer from './FrontContainer';
-import { isMode } from '../../selectors/pathSelectors';
-import { selectShouldUsePreviewCODE } from '../../selectors/configSelectors';
+import FrontsContainer from '../FrontContainer';
+import { isMode } from '../../../selectors/pathSelectors';
+import { selectShouldUseCODELinks } from '../../../selectors/configSelectors';
+import './front-section.css';
 
 const FrontHeader = styled(SectionHeader)`
 	display: flex;
@@ -57,6 +62,15 @@ const FrontsHeaderInput = styled.input`
 	width: 20em;
 `;
 
+const Link = styled.a`
+	text-decoration: none;
+`;
+
+const LinkButtons = styled.div`
+	display: flex;
+	gap: 10px;
+`;
+
 const StageSelectButtons = styled.div`
 	color: ${theme.colors.blackDark};
 	padding: 0px 15px;
@@ -91,7 +105,8 @@ const FrontSectionContent = styled(SectionContent)`
 
 const FrontHeaderButton = styled(Button).attrs({ size: 'l' })`
 	color: #fff;
-	padding: 0 5px;
+	padding: 0 15px;
+	gap: 8px;
 	display: flex;
 	align-items: center;
 
@@ -100,8 +115,7 @@ const FrontHeaderButton = styled(Button).attrs({ size: 'l' })`
 	}
 `;
 
-const PreviewButtonText = styled.span`
-	padding: 0 5px;
+const LinkButtonText = styled.span`
 	text-decoration: none;
 `;
 interface FrontsContainerProps {
@@ -111,7 +125,7 @@ interface FrontsContainerProps {
 type FrontsComponentProps = FrontsContainerProps & {
 	selectedFront: FrontConfig;
 	isOverviewOpen: boolean;
-	shouldUsePreviewCODE: boolean;
+	shouldUseCODELinks: boolean;
 	frontsActions: {
 		fetchLastPressed: (frontId: string) => void;
 		editorCloseFront: (frontId: string) => void;
@@ -158,7 +172,7 @@ class FrontSection extends React.Component<
 	};
 
 	public render() {
-		const { frontId, isOverviewOpen, isEditions, shouldUsePreviewCODE } =
+		const { frontId, isOverviewOpen, isEditions, shouldUseCODELinks } =
 			this.props;
 		const title = this.getTitle();
 
@@ -178,7 +192,7 @@ class FrontSection extends React.Component<
 				isOverviewOpen={isOverviewOpen}
 			>
 				<FrontContainer>
-					<FrontHeader greyHeader={true}>
+					<FrontHeader greyHeader={true} className="front-header">
 						{editingFrontName ? (
 							<FrontsHeaderInput
 								data-testid="rename-front-input"
@@ -201,19 +215,36 @@ class FrontSection extends React.Component<
 						)}
 						<FrontHeaderMeta>
 							<EditModeVisibility visibleMode="fronts">
-								<a
-									href={`${
-										shouldUsePreviewCODE
-											? urls.previewUrlCODE
-											: urls.previewUrlPROD
-									}${this.props.frontId}`}
-									target="preview"
-								>
-									<FrontHeaderButton>
-										<PreviewEyeIcon size="xl" />
-										<PreviewButtonText>Preview</PreviewButtonText>
-									</FrontHeaderButton>
-								</a>
+								<LinkButtons>
+									<Link
+										href={`${
+											shouldUseCODELinks
+												? urls.previewUrlCODE
+												: urls.previewUrlPROD
+										}${this.props.frontId}`}
+										target="preview"
+									>
+										<FrontHeaderButton>
+											<PreviewEyeIcon size="xl" />
+											<LinkButtonText className="visible-based-on-front-header-width">
+												Preview
+											</LinkButtonText>
+										</FrontHeaderButton>
+									</Link>
+									<Link
+										href={`${
+											shouldUseCODELinks ? urls.liveUrlCODE : urls.liveUrlPROD
+										}${this.props.frontId}`}
+										target="live"
+									>
+										<FrontHeaderButton priority="transparent">
+											<GuardianRoundel size="xl" />
+											<LinkButtonText className="visible-based-on-front-header-width">
+												See live
+											</LinkButtonText>
+										</FrontHeaderButton>
+									</Link>
+								</LinkButtons>
 								<StageSelectButtons>
 									<RadioGroup>
 										{Object.keys(frontStages).map((key) => (
@@ -329,7 +360,7 @@ const createMapStateToProps = () => {
 		selectedFront: selectFront(state, { frontId }),
 		isOverviewOpen: selectIsFrontOverviewOpen(state, frontId),
 		isEditions: isMode(state, 'editions'),
-		shouldUsePreviewCODE: selectShouldUsePreviewCODE(state),
+		shouldUseCODELinks: selectShouldUseCODELinks(state),
 	});
 };
 

diff --git a/fronts-client/src/components/FrontsEdit/FrontSection/front-section.css b/fronts-client/src/components/FrontsEdit/FrontSection/front-section.css
@@ -0,0 +1,17 @@
+/*
+	TODO: Move this logic into FrontSection.tsx when styledComponents is migrated to v6
+    styledComponents v6 will support container queries, which will allow us to remove this CSS file
+   */
+.front-header {
+	container-type: inline-size;
+}
+
+.visible-based-on-front-header-width {
+	display: block;
+}
+
+@container (max-width: 600px) {
+  .visible-based-on-front-header-width {
+	  display: none;
+  }
+}
diff --git a/fronts-client/src/components/FrontsEdit/__tests__/FrontSection.spec.tsx b/fronts-client/src/components/FrontsEdit/__tests__/FrontSection.spec.tsx
@@ -7,7 +7,7 @@ import { Provider } from 'react-redux';
 import { getByTestId, getByText, render } from 'react-testing-library';
 import { ThemeProvider } from 'styled-components';
 import configureStore from 'util/configureStore';
-import FrontSection from '../FrontSection';
+import FrontSection from '../FrontSection/FrontSection';
 
 describe('FrontSection component', () => {
 	const defaultProps = {
@@ -45,7 +45,7 @@ describe('FrontSection component', () => {
 
 		expect(getByText(container, 'Preview').closest('a')).toHaveAttribute(
 			'href',
-			'https://m.code.dev-theguardian.com/editorialFront',
+			'https://preview.code.dev-gutools.co.uk/responsive-viewer/https://preview.code.dev-gutools.co.uk/editorialFront',
 		);
 	});
 
@@ -69,7 +69,7 @@ describe('FrontSection component', () => {
 
 		expect(getByText(container, 'Preview').closest('a')).toHaveAttribute(
 			'href',
-			'https://m.code.dev-theguardian.com/editorialFront',
+			'https://preview.code.dev-gutools.co.uk/responsive-viewer/https://preview.code.dev-gutools.co.uk/editorialFront',
 		);
 	});
 
@@ -97,6 +97,78 @@ describe('FrontSection component', () => {
 		);
 	});
 
+	it('should give the correct live link for DEV', () => {
+		const store = configureStore({
+			...state,
+			config: {
+				...state.config,
+				dev: true,
+				env: 'code',
+			},
+		});
+
+		const { container } = render(
+			<Provider store={store}>
+				<ThemeProvider theme={theme}>
+					<FrontSection {...defaultProps} />
+				</ThemeProvider>
+			</Provider>,
+		);
+
+		expect(getByText(container, 'See live').closest('a')).toHaveAttribute(
+			'href',
+			'https://m.code.dev-theguardian.com/editorialFront',
+		);
+	});
+
+	it('should give the correct live link for CODE', () => {
+		const store = configureStore({
+			...state,
+			config: {
+				...state.config,
+				dev: false,
+				env: 'code',
+			},
+		});
+
+		const { container } = render(
+			<Provider store={store}>
+				<ThemeProvider theme={theme}>
+					<FrontSection {...defaultProps} />
+				</ThemeProvider>
+			</Provider>,
+		);
+
+		expect(getByText(container, 'See live').closest('a')).toHaveAttribute(
+			'href',
+			'https://m.code.dev-theguardian.com/editorialFront',
+		);
+	});
+
+	it('should give the correct live link for PROD', () => {
+		const store = configureStore({
+			...state,
+			config: {
+				...state.config,
+				dev: false,
+				env: 'prod',
+			},
+		});
+
+		const { container } = render(
+			<Provider store={store}>
+				<ThemeProvider theme={theme}>
+					<FrontSection {...defaultProps} />
+				</ThemeProvider>
+			</Provider>,
+		);
+
+		expect(getByText(container, 'See live').closest('a')).toHaveAttribute(
+			'href',
+			'https://www.theguardian.com/editorialFront',
+		);
+	});
+
 	describe('Front titles', () => {
 		const sectionProps = {
 			...defaultProps,

diff --git a/fronts-client/src/components/icons/Icons.tsx b/fronts-client/src/components/icons/Icons.tsx
@@ -269,6 +269,29 @@ const PreviewEyeIcon = ({
 	</svg>
 );
 
+const GuardianRoundel = ({ size = 'm' }: IconProps) => (
+	<svg
+		width={mapSize(size)}
+		height={mapSize(size)}
+		viewBox="0 0 42 42"
+		fill="none"
+		xmlns="http://www.w3.org/2000/svg"
+	>
+		<path
+			fill-rule="evenodd"
+			clip-rule="evenodd"
+			d="M21.0001 0C9.4022 0 0 9.40185 0 21C0 32.598 9.4022 42 21.0001 42C32.5981 42 42 32.598 42 21C42 9.40185 32.5981 0 21.0001 0Z"
+			fill="white"
+		/>
+		<path
+			fill-rule="evenodd"
+			clip-rule="evenodd"
+			d="M33.6975 22.1508L31.5419 23.1144V33.054C30.3294 34.209 27.2308 36.0091 24.2669 36.6278V35.9057V34.5506V22.8978L21.9766 22.0886V21.4883H33.6975V22.1508ZM22.9534 5.59522C22.9534 5.59522 22.9091 5.59481 22.8873 5.59481C18.0281 5.59481 15.2482 12.1467 15.3883 20.9844C15.2482 29.8541 18.0281 36.4059 22.8873 36.4059C22.9091 36.4059 22.9534 36.4056 22.9534 36.4056V37.0865C15.6684 37.5736 5.72172 32.1464 5.86182 21.0163C5.72172 9.85427 15.6684 4.42706 22.9534 4.91415V5.59522ZM24.4182 4.88354C27.2671 5.31864 30.5229 7.18965 31.7438 8.51795V14.651H31.0423L24.4182 5.56037V4.88354Z"
+			fill="black"
+		/>
+	</svg>
+);
+
 const VideoIcon = ({}) => (
 	<svg
 		xmlns="http://www.w3.org/2000/svg"
@@ -353,6 +376,7 @@ export {
 	AddImageIcon,
 	StarIcon,
 	PreviewEyeIcon,
+	GuardianRoundel,
 	VideoIcon,
 	DragHandleIcon as DragIcon,
 	WarningIcon,

diff --git a/fronts-client/src/constants/url.ts b/fronts-client/src/constants/url.ts
@@ -1,13 +1,15 @@
 import pageConfig from 'util/extractConfigFromPage';
 
-const previewDomain = 'preview.gutools.co.uk';
+const previewPRODDomain = 'preview.gutools.co.uk';
+const previewCODEDomain = 'preview.code.dev-gutools.co.uk';
 
 export default {
 	base: {
 		mainDomain: 'www.theguardian.com',
 		mainDomainShort: 'theguardian.com',
 		frontendDomain: 'frontend.gutools.co.uk',
-		previewDomain,
+		previewPRODDomain,
+		previewCODEDomain,
 		shortDomain: 'gu.com',
 		capi: 'content.guardianapis.com',
 	},
@@ -27,6 +29,8 @@ export default {
 	manageEditions: '/manage-editions/',
 	appRoot: 'v2',
 	editionsCardBuilder: 'https://editions-card-builder.gutools.co.uk',
-	previewUrlPROD: `https://${previewDomain}/responsive-viewer/https://${previewDomain}/`,
-	previewUrlCODE: 'https://m.code.dev-theguardian.com/',
+	previewUrlCODE: `https://${previewCODEDomain}/responsive-viewer/https://${previewCODEDomain}/`,
+	previewUrlPROD: `https://${previewPRODDomain}/responsive-viewer/https://${previewPRODDomain}/`,
+	liveUrlCODE: 'https://m.code.dev-theguardian.com/',
+	liveUrlPROD: 'https://www.theguardian.com/',
 };
diff --git a/fronts-client/src/selectors/configSelectors.ts b/fronts-client/src/selectors/configSelectors.ts
@@ -44,7 +44,7 @@ const selectAvailableEditions = createSelector(
 	(config) => config && config.availableTemplates,
 );
 
-const selectShouldUsePreviewCODE = createSelector(
+const selectShouldUseCODELinks = createSelector(
 	selectConfig,
 	(config) => !config || config.env === 'code',
 );
@@ -63,6 +63,6 @@ export {
 	selectCollectionCap,
 	selectGridUrl,
 	selectAvailableEditions,
-	selectShouldUsePreviewCODE,
+	selectShouldUseCODELinks,
 	selectEditionsPermission,
 };
diff --git a/fronts-client/src/util/url.ts b/fronts-client/src/util/url.ts
@@ -44,7 +44,8 @@ function isGuardianUrl(url: string) {
 	return matchHostname(url, [
 		urlConstants.base.mainDomain,
 		urlConstants.base.mainDomainShort,
-		urlConstants.base.previewDomain,
+		urlConstants.base.previewPRODDomain,
+		urlConstants.base.previewCODEDomain,
 		urlConstants.base.frontendDomain,
 		urlConstants.base.shortDomain,
 	]);