-
Notifications
You must be signed in to change notification settings - Fork 3k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(ui) Create page for managing home page posts (#8707)
- Loading branch information
1 parent
a4cb81c
commit e12d910
Showing
21 changed files
with
699 additions
and
12 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
91 changes: 91 additions & 0 deletions
91
datahub-web-react/src/app/settings/posts/CreatePostForm.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,91 @@ | ||
| import React, { useState } from 'react'; | ||
| import { Form, Input, Typography, FormInstance, Radio } from 'antd'; | ||
| import styled from 'styled-components'; | ||
| import { | ||
| DESCRIPTION_FIELD_NAME, | ||
| LINK_FIELD_NAME, | ||
| LOCATION_FIELD_NAME, | ||
| TITLE_FIELD_NAME, | ||
| TYPE_FIELD_NAME, | ||
| } from './constants'; | ||
| import { PostContentType } from '../../../types.generated'; | ||
|
|
||
| const TopFormItem = styled(Form.Item)` | ||
| margin-bottom: 24px; | ||
| `; | ||
|
|
||
| const SubFormItem = styled(Form.Item)` | ||
| margin-bottom: 0; | ||
| `; | ||
|
|
||
| type Props = { | ||
| setCreateButtonEnabled: (isEnabled: boolean) => void; | ||
| form: FormInstance; | ||
| }; | ||
|
|
||
| export default function CreatePostForm({ setCreateButtonEnabled, form }: Props) { | ||
| const [postType, setPostType] = useState<PostContentType>(PostContentType.Text); | ||
|
|
||
| return ( | ||
| <Form | ||
| form={form} | ||
| initialValues={{}} | ||
| layout="vertical" | ||
| onFieldsChange={() => { | ||
| setCreateButtonEnabled(!form.getFieldsError().some((field) => field.errors.length > 0)); | ||
| }} | ||
| > | ||
| <TopFormItem name={TYPE_FIELD_NAME} label={<Typography.Text strong>Post Type</Typography.Text>}> | ||
| <Radio.Group | ||
| onChange={(e) => setPostType(e.target.value)} | ||
| value={postType} | ||
| defaultValue={postType} | ||
| optionType="button" | ||
| buttonStyle="solid" | ||
| > | ||
| <Radio value={PostContentType.Text}>Announcement</Radio> | ||
| <Radio value={PostContentType.Link}>Link</Radio> | ||
| </Radio.Group> | ||
| </TopFormItem> | ||
|
|
||
| <TopFormItem label={<Typography.Text strong>Title</Typography.Text>}> | ||
| <Typography.Paragraph>The title for your new post.</Typography.Paragraph> | ||
| <SubFormItem name={TITLE_FIELD_NAME} rules={[{ required: true }]} hasFeedback> | ||
| <Input data-testid="create-post-title" placeholder="Your post title" /> | ||
| </SubFormItem> | ||
| </TopFormItem> | ||
| {postType === PostContentType.Text && ( | ||
| <TopFormItem label={<Typography.Text strong>Description</Typography.Text>}> | ||
| <Typography.Paragraph>The main content for your new post.</Typography.Paragraph> | ||
| <SubFormItem name={DESCRIPTION_FIELD_NAME} rules={[{ min: 0, max: 500 }]} hasFeedback> | ||
| <Input.TextArea placeholder="Your post description" /> | ||
| </SubFormItem> | ||
| </TopFormItem> | ||
| )} | ||
| {postType === PostContentType.Link && ( | ||
| <> | ||
| <TopFormItem label={<Typography.Text strong>Link URL</Typography.Text>}> | ||
| <Typography.Paragraph> | ||
| Where users will be directed when they click this post. | ||
| </Typography.Paragraph> | ||
| <SubFormItem name={LINK_FIELD_NAME} rules={[{ type: 'url', warningOnly: true }]} hasFeedback> | ||
| <Input data-testid="create-post-link" placeholder="Your post link URL" /> | ||
| </SubFormItem> | ||
| </TopFormItem> | ||
| <SubFormItem label={<Typography.Text strong>Image URL</Typography.Text>}> | ||
| <Typography.Paragraph> | ||
| A URL to an image you want to display on your link post. | ||
| </Typography.Paragraph> | ||
| <SubFormItem | ||
| name={LOCATION_FIELD_NAME} | ||
| rules={[{ type: 'url', warningOnly: true }]} | ||
| hasFeedback | ||
| > | ||
| <Input data-testid="create-post-media-location" placeholder="Your post image URL" /> | ||
| </SubFormItem> | ||
| </SubFormItem> | ||
| </> | ||
| )} | ||
| </Form> | ||
| ); | ||
| } |
107 changes: 107 additions & 0 deletions
107
datahub-web-react/src/app/settings/posts/CreatePostModal.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,107 @@ | ||
| import React, { useState } from 'react'; | ||
| import { Button, Form, message, Modal } from 'antd'; | ||
| import CreatePostForm from './CreatePostForm'; | ||
| import { | ||
| CREATE_POST_BUTTON_ID, | ||
| DESCRIPTION_FIELD_NAME, | ||
| LINK_FIELD_NAME, | ||
| LOCATION_FIELD_NAME, | ||
| TYPE_FIELD_NAME, | ||
| TITLE_FIELD_NAME, | ||
| } from './constants'; | ||
| import { useEnterKeyListener } from '../../shared/useEnterKeyListener'; | ||
| import { MediaType, PostContentType, PostType } from '../../../types.generated'; | ||
| import { useCreatePostMutation } from '../../../graphql/mutations.generated'; | ||
|
|
||
| type Props = { | ||
| onClose: () => void; | ||
| onCreate: ( | ||
| contentType: string, | ||
| title: string, | ||
| description: string | undefined, | ||
| link: string | undefined, | ||
| location: string | undefined, | ||
| ) => void; | ||
| }; | ||
|
|
||
| export default function CreatePostModal({ onClose, onCreate }: Props) { | ||
| const [createPostMutation] = useCreatePostMutation(); | ||
| const [createButtonEnabled, setCreateButtonEnabled] = useState(false); | ||
| const [form] = Form.useForm(); | ||
| const onCreatePost = () => { | ||
| const contentTypeValue = form.getFieldValue(TYPE_FIELD_NAME) ?? PostContentType.Text; | ||
| const mediaValue = | ||
| form.getFieldValue(TYPE_FIELD_NAME) && form.getFieldValue(LOCATION_FIELD_NAME) | ||
| ? { | ||
| type: MediaType.Image, | ||
| location: form.getFieldValue(LOCATION_FIELD_NAME) ?? null, | ||
| } | ||
| : null; | ||
| createPostMutation({ | ||
| variables: { | ||
| input: { | ||
| postType: PostType.HomePageAnnouncement, | ||
| content: { | ||
| contentType: contentTypeValue, | ||
| title: form.getFieldValue(TITLE_FIELD_NAME), | ||
| description: form.getFieldValue(DESCRIPTION_FIELD_NAME) ?? null, | ||
| link: form.getFieldValue(LINK_FIELD_NAME) ?? null, | ||
| media: mediaValue, | ||
| }, | ||
| }, | ||
| }, | ||
| }) | ||
| .then(({ errors }) => { | ||
| if (!errors) { | ||
| message.success({ | ||
| content: `Created Post!`, | ||
| duration: 3, | ||
| }); | ||
| onCreate( | ||
| form.getFieldValue(TYPE_FIELD_NAME) ?? PostContentType.Text, | ||
| form.getFieldValue(TITLE_FIELD_NAME), | ||
| form.getFieldValue(DESCRIPTION_FIELD_NAME), | ||
| form.getFieldValue(LINK_FIELD_NAME), | ||
| form.getFieldValue(LOCATION_FIELD_NAME), | ||
| ); | ||
| form.resetFields(); | ||
| } | ||
| }) | ||
| .catch((e) => { | ||
| message.destroy(); | ||
| message.error({ content: 'Failed to create Post! An unknown error occured.', duration: 3 }); | ||
| console.error('Failed to create Post:', e.message); | ||
| }); | ||
| onClose(); | ||
| }; | ||
|
|
||
| // Handle the Enter press | ||
| useEnterKeyListener({ | ||
| querySelectorToExecuteClick: '#createPostButton', | ||
| }); | ||
|
|
||
| return ( | ||
| <Modal | ||
| title="Create new Post" | ||
| open | ||
| onCancel={onClose} | ||
| footer={ | ||
| <> | ||
| <Button onClick={onClose} type="text"> | ||
| Cancel | ||
| </Button> | ||
| <Button | ||
| id={CREATE_POST_BUTTON_ID} | ||
| data-testid="create-post-button" | ||
| onClick={onCreatePost} | ||
| disabled={!createButtonEnabled} | ||
| > | ||
| Create | ||
| </Button> | ||
| </> | ||
| } | ||
| > | ||
| <CreatePostForm setCreateButtonEnabled={setCreateButtonEnabled} form={form} /> | ||
| </Modal> | ||
| ); | ||
| } |
Oops, something went wrong.