Link field: allow target blank

Author: FilipChalupa

admin/pages/general.tsx

@@ -13,7 +13,8 @@ export default () => (
 		}}
 	>
 		<TextField field="text" label="Text" />
-		<LinkField field="privacyPolicyPage" label="Link to another" />
+		<LinkField field="homePage" label="Link to home" allowDisconnect />
+		<LinkField field="privacyPolicyPage" label="Link to another" allowTargetBlank allowDisconnect />
 
 		<CollapsibleBox heading="Images">
 			<ImageField field="singleImage" label="Single image" />

api/migrations/2023-04-19-115734-home-page.json

@@ -0,0 +1,39 @@
+{
+	"formatVersion": 3,
+	"modifications": [
+		{
+			"modification": "createRelation",
+			"entityName": "General",
+			"owningSide": {
+				"type": "OneHasOne",
+				"name": "homePage",
+				"target": "Link",
+				"joiningColumn": {
+					"columnName": "home_page_id",
+					"onDelete": "set null"
+				},
+				"nullable": true
+			}
+		},
+		{
+			"modification": "patchAclSchema",
+			"patch": [
+				{
+					"op": "add",
+					"path": "/roles/admin/entities/General/operations/read/homePage",
+					"value": true
+				},
+				{
+					"op": "add",
+					"path": "/roles/admin/entities/General/operations/create/homePage",
+					"value": true
+				},
+				{
+					"op": "add",
+					"path": "/roles/admin/entities/General/operations/update/homePage",
+					"value": true
+				}
+			]
+		}
+	]
+}

api/model/General.ts

@@ -12,6 +12,7 @@ export class General {
 	singleImage = d.oneHasOne(Image).setNullOnDelete()
 	imageList = d.oneHasOne(ImageList).setNullOnDelete()
 
+	homePage = d.oneHasOne(Link).setNullOnDelete()
 	privacyPolicyPage = d.oneHasOne(Link).setNullOnDelete()
 
 	singleYoutubeVideo = d.oneHasOne(YoutubeVideo).setNullOnDelete()

src/link/admin/LinkField.tsx

@@ -2,6 +2,7 @@ import {
 	ActionableBox,
 	Block,
 	Box,
+	CheckboxField,
 	Component,
 	DiscriminatedBlocks,
 	Field,
@@ -16,10 +17,11 @@ export interface LinkFieldProps {
 	label?: string
 	titleField?: boolean
 	allowDisconnect?: boolean
+	allowTargetBlank?: boolean
 }
 
 export const LinkField = Component<LinkFieldProps>(
-	({ field, label, titleField = true, allowDisconnect = false }) => {
+	({ field, label, titleField = true, allowDisconnect = false, allowTargetBlank = false }) => {
 		const rootEntity = useEntity()
 
 		const insideContent = (
@@ -33,6 +35,25 @@ export const LinkField = Component<LinkFieldProps>(
 						<TextField field="externalLink" label="URL" />
 					</Block>
 				</DiscriminatedBlocks>
+				{allowTargetBlank && (
+					<CheckboxField
+						field="isTargetBlank"
+						label="Target blank"
+						defaultValue={false}
+						labelDescription={
+							<>
+								Force link to open in new tab.{' '}
+								<span style={{ color: 'red' }}>
+									This feature is highly discouraged.{' '}
+									<a href="https://css-tricks.com/use-target_blank/" target="_blank" rel="noreferrer">
+										Read more
+									</a>
+									.
+								</span>
+							</>
+						}
+					/>
+				)}
 			</HasOne>
 		)
 
@@ -44,10 +65,11 @@ export const LinkField = Component<LinkFieldProps>(
 
 		return content
 	},
-	({ field, titleField = true }) => (
+	({ field }) => (
 		<HasOne field={field}>
 			<Field field="type" />
-			{titleField && <Field field="title" />}
+			<Field field="title" />
+			<Field field="isTargetBlank" />
 			<SelectField field="internalLink" label={undefined} options="Linkable.url" />
 			<Field field="externalLink" />
 		</HasOne>