From 6034f76167e2441919676a49e49b334a192febfb Mon Sep 17 00:00:00 2001 From: kamre Date: Wed, 5 Jan 2022 13:36:46 +0300 Subject: [PATCH 1/9] Initial implementation for `URLProperty` improvements: - show preview with link and button for editing - minor fixes for CSS --- .../src/components/gallery/galleryCard.scss | 4 + .../src/components/properties/link/link.scss | 45 +++++------ .../src/components/properties/link/link.tsx | 76 ++++++++++++------- 3 files changed, 74 insertions(+), 51 deletions(-) diff --git a/webapp/src/components/gallery/galleryCard.scss b/webapp/src/components/gallery/galleryCard.scss index 6e0ac89b3..84d4074f7 100644 --- a/webapp/src/components/gallery/galleryCard.scss +++ b/webapp/src/components/gallery/galleryCard.scss @@ -92,6 +92,10 @@ padding: 5px 10px; overflow-wrap: anywhere; + .octo-tooltip { + max-width: 100%; + } + .octo-icon { margin-right: 5px; } diff --git a/webapp/src/components/properties/link/link.scss b/webapp/src/components/properties/link/link.scss index 5f46c4024..aeec1c234 100644 --- a/webapp/src/components/properties/link/link.scss +++ b/webapp/src/components/properties/link/link.scss @@ -1,39 +1,34 @@ -.property-link { +.URLProperty { display: flex; align-items: center; + overflow: hidden; - &.url { - width: 100%; - display: flex; + .link { + flex: 1 1 auto; + padding-left: 1px; + margin-right: 4px; + white-space: nowrap; overflow: hidden; + color: rgb(var(--center-channel-color-rgb)); + text-overflow: ellipsis; + text-decoration: underline rgb(var(--center-channel-color-rgb), 0.5); } - .Link__button { + .link:hover { + background-color: rgb(var(--center-channel-color-rgb), 0.1); + } + + .Button_Edit { display: none; - flex: 0 0 24px; - width: 24px; - height: 24px; - align-items: center; - justify-content: center; - border-radius: 4px; - color: rgba(var(--center-channel-color-rgb), 0.56); - font-size: 14.4px; - margin-left: 8px; - - &:hover { - color: rgba(var(--center-channel-color-rgb), 0.72); - background: rgba(var(--center-channel-color-rgb), 0.08); - } - - &:active { - color: var(--button-bg-rgb); - background-color: rgb(var(--button-bg-rgb), 0.16); - } } &:hover { - .Link__button { + .Button_Edit { display: flex; } } } + +#focalboard-app .URLProperty .link:visited { + color: rgb(var(--center-channel-color-rgb)); +} diff --git a/webapp/src/components/properties/link/link.tsx b/webapp/src/components/properties/link/link.tsx index 5a3f6b59d..e72ae6356 100644 --- a/webapp/src/components/properties/link/link.tsx +++ b/webapp/src/components/properties/link/link.tsx @@ -1,13 +1,14 @@ // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. // See LICENSE.txt for license information. -import React, {ReactNode} from 'react' +import React, {useEffect, useRef, useState} from 'react' -import Editable from '../../../widgets/editable' +import Editable, {Focusable} from '../../../widgets/editable' import './link.scss' import {Utils} from '../../../utils' -import LinkIcon from '../../../widgets/icons/Link' +import EditIcon from '../../../widgets/icons/edit' +import IconButton from '../../../widgets/buttons/iconButton' type Props = { value: string @@ -20,37 +21,60 @@ type Props = { } const URLProperty = (props: Props): JSX.Element => { - let link: ReactNode = null - const hasValue = Boolean(props.value?.trim()) - if (hasValue) { - link = ( + const [isEditing, setIsEditing] = useState(false) + const isEmpty = !props.value?.trim() + const showEditable = !props.readonly && (isEditing || isEmpty) + const editableRef = useRef(null) + + useEffect(() => { + if (isEditing) { + editableRef.current?.focus() + } + }, [isEditing]) + + if (showEditable) { + return ( +
+ { + setIsEditing(false) + props.onSave() + }} + onCancel={() => { + setIsEditing(false) + props.onCancel() + }} + onFocus={() => setIsEditing(true)} + validator={props.validator} + /> +
+ ) + } + + return ( +
event.stopPropagation()} > - + {props.value} - ) - } - - return ( -
- {(hasValue || props.placeholder) && - } + onClick={() => setIsEditing(true)} />} - {link}
) } From 992ea7080713ce029f37138554632d97e6f55fd9 Mon Sep 17 00:00:00 2001 From: kamre Date: Mon, 10 Jan 2022 23:18:12 +0300 Subject: [PATCH 2/9] Buttons for edit and copy of `URLProperty` added: - Compass icon is used for `EditIcon` - some CSS tweaks for proper hover effects --- webapp/src/components/kanban/kanbanCard.scss | 2 +- webapp/src/components/properties/link/link.scss | 9 +++++++-- webapp/src/components/properties/link/link.tsx | 15 +++++++++++++++ webapp/src/widgets/icons/edit.scss | 1 + webapp/src/widgets/icons/edit.tsx | 16 +++++----------- 5 files changed, 29 insertions(+), 14 deletions(-) diff --git a/webapp/src/components/kanban/kanbanCard.scss b/webapp/src/components/kanban/kanbanCard.scss index 20064b506..a4530f476 100644 --- a/webapp/src/components/kanban/kanbanCard.scss +++ b/webapp/src/components/kanban/kanbanCard.scss @@ -78,7 +78,7 @@ } } - .IconButton { + .optionsMenu .IconButton { border-radius: 3px; margin-right: 6px; padding: 0; diff --git a/webapp/src/components/properties/link/link.scss b/webapp/src/components/properties/link/link.scss index aeec1c234..584069fce 100644 --- a/webapp/src/components/properties/link/link.scss +++ b/webapp/src/components/properties/link/link.scss @@ -18,12 +18,17 @@ background-color: rgb(var(--center-channel-color-rgb), 0.1); } - .Button_Edit { + .IconButton { display: none; + margin-right: 4px; + + &:hover { + background-color: rgb(var(--center-channel-color-rgb), 0.1); + } } &:hover { - .Button_Edit { + .IconButton { display: flex; } } diff --git a/webapp/src/components/properties/link/link.tsx b/webapp/src/components/properties/link/link.tsx index e72ae6356..808bff16a 100644 --- a/webapp/src/components/properties/link/link.tsx +++ b/webapp/src/components/properties/link/link.tsx @@ -2,6 +2,7 @@ // See LICENSE.txt for license information. import React, {useEffect, useRef, useState} from 'react' +import {useIntl} from 'react-intl' import Editable, {Focusable} from '../../../widgets/editable' @@ -9,6 +10,8 @@ import './link.scss' import {Utils} from '../../../utils' import EditIcon from '../../../widgets/icons/edit' import IconButton from '../../../widgets/buttons/iconButton' +import DuplicateIcon from '../../../widgets/icons/duplicate' +import {sendFlashMessage} from '../../flashMessages' type Props = { value: string @@ -25,6 +28,7 @@ const URLProperty = (props: Props): JSX.Element => { const isEmpty = !props.value?.trim() const showEditable = !props.readonly && (isEditing || isEmpty) const editableRef = useRef(null) + const intl = useIntl() useEffect(() => { if (isEditing) { @@ -72,9 +76,20 @@ const URLProperty = (props: Props): JSX.Element => { {!props.readonly && } onClick={() => setIsEditing(true)} />} + } + onClick={(e) => { + e.stopPropagation() + Utils.copyTextToClipboard(props.value) + sendFlashMessage({content: intl.formatMessage({id: 'URLProperty.copiedLink', defaultMessage: 'Copied!'}), severity: 'high'}) + }} + />
) } diff --git a/webapp/src/widgets/icons/edit.scss b/webapp/src/widgets/icons/edit.scss index 6cb7947f1..ed976f7d3 100644 --- a/webapp/src/widgets/icons/edit.scss +++ b/webapp/src/widgets/icons/edit.scss @@ -3,4 +3,5 @@ stroke: none; width: 24px; height: 24px; + font-size: 18px; } diff --git a/webapp/src/widgets/icons/edit.tsx b/webapp/src/widgets/icons/edit.tsx index 3b3a7cd0e..d4b916b56 100644 --- a/webapp/src/widgets/icons/edit.tsx +++ b/webapp/src/widgets/icons/edit.tsx @@ -4,19 +4,13 @@ import React from 'react' import './edit.scss' +import CompassIcon from './compassIcon' export default function EditIcon(): JSX.Element { return ( - - - - - - - + ) } From 6b278cd8cf674eb3fcf92f18a23e3586caf652b7 Mon Sep 17 00:00:00 2001 From: kamre Date: Thu, 13 Jan 2022 22:42:56 +0300 Subject: [PATCH 3/9] Hide copy button for URLProperty in the table. --- webapp/src/components/table/tableRow.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/webapp/src/components/table/tableRow.scss b/webapp/src/components/table/tableRow.scss index 9ee2801b9..186efe2f7 100644 --- a/webapp/src/components/table/tableRow.scss +++ b/webapp/src/components/table/tableRow.scss @@ -27,4 +27,8 @@ display: block; } } + + .URLProperty:hover .Button_Copy { + display: none; + } } From 58b418025dd715d06e8ad55c8b6ad7fbacfce475 Mon Sep 17 00:00:00 2001 From: kamre Date: Sat, 22 Jan 2022 17:59:01 +0300 Subject: [PATCH 4/9] Fix `background-color` of URL property on the calendar cards. --- webapp/src/components/calendar/fullcalendar.scss | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/webapp/src/components/calendar/fullcalendar.scss b/webapp/src/components/calendar/fullcalendar.scss index 1b8ea643b..5250adf3d 100644 --- a/webapp/src/components/calendar/fullcalendar.scss +++ b/webapp/src/components/calendar/fullcalendar.scss @@ -3,12 +3,13 @@ margin-bottom: 10px; overflow: auto; - a { + .fc-daygrid-event, + .fc-daygrid-day-number { text-decoration: none; color: var(--link-color-rgb); &:hover { - background-color: unset !important;; + background-color: unset; } } From 76401862cc5b4b21f889af10e03ad86df2a122c4 Mon Sep 17 00:00:00 2001 From: kamre Date: Sat, 22 Jan 2022 23:41:29 +0300 Subject: [PATCH 5/9] Fixed clicking on the card in the calendar view. --- webapp/src/components/calendar/fullCalendar.tsx | 10 ++-------- 1 file changed, 2 insertions(+), 8 deletions(-) diff --git a/webapp/src/components/calendar/fullCalendar.tsx b/webapp/src/components/calendar/fullCalendar.tsx index 0b4c33818..5d3659158 100644 --- a/webapp/src/components/calendar/fullCalendar.tsx +++ b/webapp/src/components/calendar/fullCalendar.tsx @@ -4,7 +4,7 @@ import React, {useCallback, useMemo} from 'react' import {useIntl} from 'react-intl' -import FullCalendar, {EventClickArg, EventChangeArg, EventInput, EventContentArg, DayCellContentArg} from '@fullcalendar/react' +import FullCalendar, {EventChangeArg, EventInput, EventContentArg, DayCellContentArg} from '@fullcalendar/react' import interactionPlugin from '@fullcalendar/interaction' import dayGridPlugin from '@fullcalendar/daygrid' @@ -120,7 +120,7 @@ const CalendarFullView = (props: Props): JSX.Element|null => { const renderEventContent = (eventProps: EventContentArg): JSX.Element|null => { const {event} = eventProps return ( -
+
props.showCard(event.id)}>
{ event.extendedProps.icon ?
{event.extendedProps.icon}
: undefined }
{ ) } - const eventClick = useCallback((eventProps: EventClickArg) => { - const {event} = eventProps - props.showCard(event.id) - }, [props.showCard]) - const eventChange = useCallback((eventProps: EventChangeArg) => { const {event} = eventProps if (!event.start) { @@ -239,7 +234,6 @@ const CalendarFullView = (props: Props): JSX.Element|null => { eventResizableFromStart={isEditable()} headerToolbar={toolbar} buttonText={buttonText} - eventClick={eventClick} eventContent={renderEventContent} eventChange={eventChange} From f8995351c9b477907e18712b0c371eaac3c76e34 Mon Sep 17 00:00:00 2001 From: kamre Date: Sun, 23 Jan 2022 00:04:10 +0300 Subject: [PATCH 6/9] Minor style fix for calendar card. --- webapp/src/components/calendar/fullCalendar.tsx | 5 ++++- webapp/src/components/calendar/fullcalendar.scss | 6 ++++++ 2 files changed, 10 insertions(+), 1 deletion(-) diff --git a/webapp/src/components/calendar/fullCalendar.tsx b/webapp/src/components/calendar/fullCalendar.tsx index 5d3659158..e0c9e9aef 100644 --- a/webapp/src/components/calendar/fullCalendar.tsx +++ b/webapp/src/components/calendar/fullCalendar.tsx @@ -120,7 +120,10 @@ const CalendarFullView = (props: Props): JSX.Element|null => { const renderEventContent = (eventProps: EventContentArg): JSX.Element|null => { const {event} = eventProps return ( -
props.showCard(event.id)}> +
props.showCard(event.id)} + >
{ event.extendedProps.icon ?
{event.extendedProps.icon}
: undefined }
Date: Sun, 23 Jan 2022 12:50:57 +0300 Subject: [PATCH 7/9] Unit tests fixed (snapshots updated). --- .../propertyValueElement.test.tsx.snap | 105 ++++++++++++------ .../__snapshots__/fullCalendar.test.tsx.snap | 15 ++- .../link/__snapshots__/link.test.tsx.snap | 34 ++++-- .../components/properties/link/link.test.tsx | 7 +- .../newCardButtonTemplateItem.test.tsx.snap | 80 ++----------- 5 files changed, 117 insertions(+), 124 deletions(-) diff --git a/webapp/src/components/__snapshots__/propertyValueElement.test.tsx.snap b/webapp/src/components/__snapshots__/propertyValueElement.test.tsx.snap index 3d5cb49a9..0b6f4ad39 100644 --- a/webapp/src/components/__snapshots__/propertyValueElement.test.tsx.snap +++ b/webapp/src/components/__snapshots__/propertyValueElement.test.tsx.snap @@ -16,25 +16,36 @@ exports[`components/propertyValueElement Generic fields should allow cancel 1`] exports[`components/propertyValueElement URL fields should allow cancel 1`] = ` `; @@ -133,25 +144,36 @@ exports[`components/propertyValueElement should match snapshot, select, read-onl exports[`components/propertyValueElement should match snapshot, url, array value 1`] = ` `; @@ -159,25 +181,36 @@ exports[`components/propertyValueElement should match snapshot, url, array value exports[`components/propertyValueElement should match snapshot, url, array value 2`] = ` `; diff --git a/webapp/src/components/calendar/__snapshots__/fullCalendar.test.tsx.snap b/webapp/src/components/calendar/__snapshots__/fullCalendar.test.tsx.snap index dcb7e6511..2223c2aa3 100644 --- a/webapp/src/components/calendar/__snapshots__/fullCalendar.test.tsx.snap +++ b/webapp/src/components/calendar/__snapshots__/fullCalendar.test.tsx.snap @@ -720,12 +720,13 @@ exports[`components/calendar/toolbar return calendar, no date property 1`] = ` >
-
+
@@ -2979,12 +2980,13 @@ exports[`components/calendar/toolbar return calendar, with date property not set >
-
+
@@ -5936,12 +5938,13 @@ exports[`components/calendar/toolbar return calendar, with date property set 1`] >
-
+
diff --git a/webapp/src/components/properties/link/__snapshots__/link.test.tsx.snap b/webapp/src/components/properties/link/__snapshots__/link.test.tsx.snap index c8e77f355..72f2eb465 100644 --- a/webapp/src/components/properties/link/__snapshots__/link.test.tsx.snap +++ b/webapp/src/components/properties/link/__snapshots__/link.test.tsx.snap @@ -3,24 +3,36 @@ exports[`components/properties/link returns link properties correctly 1`] = ` `; diff --git a/webapp/src/components/properties/link/link.test.tsx b/webapp/src/components/properties/link/link.test.tsx index fb0599f6e..be97b3a41 100644 --- a/webapp/src/components/properties/link/link.test.tsx +++ b/webapp/src/components/properties/link/link.test.tsx @@ -5,11 +5,13 @@ import React from 'react' import {render} from '@testing-library/react' import '@testing-library/jest-dom' +import {wrapIntl} from '../../../testUtils' + import Link from './link' describe('components/properties/link', () => { test('returns link properties correctly', () => { - const component = ( + const {container} = render(wrapIntl(( { return true })} /> - ) - const {container} = render(component) + ))) expect(container).toMatchSnapshot() }) }) diff --git a/webapp/src/components/viewHeader/__snapshots__/newCardButtonTemplateItem.test.tsx.snap b/webapp/src/components/viewHeader/__snapshots__/newCardButtonTemplateItem.test.tsx.snap index bc2448a68..88c2ac181 100644 --- a/webapp/src/components/viewHeader/__snapshots__/newCardButtonTemplateItem.test.tsx.snap +++ b/webapp/src/components/viewHeader/__snapshots__/newCardButtonTemplateItem.test.tsx.snap @@ -67,23 +67,9 @@ exports[`components/viewHeader/newCardButtonTemplateItem return NewCardButtonTem class="MenuOption TextOption menu-option" role="button" > - - - - - - - +
@@ -209,23 +195,9 @@ exports[`components/viewHeader/newCardButtonTemplateItem return NewCardButtonTem class="MenuOption TextOption menu-option" role="button" > - - - - - - - +
@@ -386,23 +358,9 @@ exports[`components/viewHeader/newCardButtonTemplateItem return NewCardButtonTem class="MenuOption TextOption menu-option" role="button" > - - - - - - - +
@@ -528,23 +486,9 @@ exports[`components/viewHeader/newCardButtonTemplateItem return NewCardButtonTem class="MenuOption TextOption menu-option" role="button" > - - - - - - - +
From 400738db76f07f73351d38b5293e2a397bdec8b8 Mon Sep 17 00:00:00 2001 From: kamre Date: Sun, 23 Jan 2022 21:04:53 +0300 Subject: [PATCH 8/9] Unit tests new URL property behaviour added. --- .../link/__snapshots__/link.test.tsx.snap | 44 +++++++- .../components/properties/link/link.test.tsx | 103 ++++++++++++++++-- .../src/components/properties/link/link.tsx | 4 +- 3 files changed, 139 insertions(+), 12 deletions(-) diff --git a/webapp/src/components/properties/link/__snapshots__/link.test.tsx.snap b/webapp/src/components/properties/link/__snapshots__/link.test.tsx.snap index 72f2eb465..452dbff54 100644 --- a/webapp/src/components/properties/link/__snapshots__/link.test.tsx.snap +++ b/webapp/src/components/properties/link/__snapshots__/link.test.tsx.snap @@ -1,6 +1,21 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`components/properties/link returns link properties correctly 1`] = ` +exports[`components/properties/link should match snapshot for link with empty url 1`] = ` +
+
+ +
+
+`; + +exports[`components/properties/link should match snapshot for link with non-empty url 1`] = `
`; + +exports[`components/properties/link should match snapshot for readonly link with non-empty url 1`] = ` + +`; diff --git a/webapp/src/components/properties/link/link.test.tsx b/webapp/src/components/properties/link/link.test.tsx index be97b3a41..6980bf094 100644 --- a/webapp/src/components/properties/link/link.test.tsx +++ b/webapp/src/components/properties/link/link.test.tsx @@ -1,27 +1,110 @@ // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. // See LICENSE.txt for license information. -import React from 'react' -import {render} from '@testing-library/react' +import React, {useState} from 'react' +import {render, screen} from '@testing-library/react' + +import {mocked} from 'ts-jest/utils' import '@testing-library/jest-dom' +import userEvent from '@testing-library/user-event' + import {wrapIntl} from '../../../testUtils' +import {Utils} from '../../../utils' +import {sendFlashMessage} from '../../flashMessages' import Link from './link' +jest.mock('../../flashMessages') + +const mockedCopy = jest.spyOn(Utils, 'copyTextToClipboard').mockImplementation(() => true) +const mockedSendFlashMessage = mocked(sendFlashMessage, true) + describe('components/properties/link', () => { - test('returns link properties correctly', () => { + beforeEach(jest.clearAllMocks) + + const linkCallbacks = { + onChange: jest.fn(), + onSave: jest.fn(), + onCancel: jest.fn(), + validator: jest.fn(() => true), + } + + const LinkWrapper = (props: {url: string}) => { + const [value, setValue] = useState(props.url) + return ( + setValue(text)} + /> + ) + } + + it('should match snapshot for link with empty url', () => { const {container} = render(wrapIntl(( { - return true - })} + {...linkCallbacks} + value='' /> ))) expect(container).toMatchSnapshot() }) + + it('should match snapshot for link with non-empty url', () => { + const {container} = render(wrapIntl(( + + ))) + expect(container).toMatchSnapshot() + }) + + it('should match snapshot for readonly link with non-empty url', () => { + const {container} = render(wrapIntl(( + + ))) + expect(container).toMatchSnapshot() + }) + + it('should change to link after entering url', () => { + render(wrapIntl()) + + const url = 'https://mattermost.com' + const input = screen.getByRole('textbox') + userEvent.type(input, `${url}{enter}`) + + const link = screen.getByRole('link') + expect(link).toHaveAttribute('href', url) + expect(link).toHaveTextContent(url) + expect(screen.getByRole('button', {name: 'Edit'})).toBeInTheDocument() + expect(screen.getByRole('button', {name: 'Copy'})).toBeInTheDocument() + expect(linkCallbacks.onSave).toHaveBeenCalled() + }) + + it('should allow to edit link url', () => { + render(wrapIntl()) + + screen.getByRole('button', {name: 'Edit'}).click() + const newURL = 'https://github.com/mattermost' + const input = screen.getByRole('textbox') + userEvent.clear(input) + userEvent.type(input, `${newURL}{enter}`) + const link = screen.getByRole('link') + expect(link).toHaveAttribute('href', newURL) + expect(link).toHaveTextContent(newURL) + }) + + it('should allow to copy url', () => { + const url = 'https://mattermost.com' + render(wrapIntl()) + screen.getByRole('button', {name: 'Copy'}).click() + expect(mockedCopy).toHaveBeenCalledWith(url) + expect(mockedSendFlashMessage).toHaveBeenCalledWith({content: 'Copied!', severity: 'high'}) + }) }) diff --git a/webapp/src/components/properties/link/link.tsx b/webapp/src/components/properties/link/link.tsx index 808bff16a..a3c75e9f3 100644 --- a/webapp/src/components/properties/link/link.tsx +++ b/webapp/src/components/properties/link/link.tsx @@ -55,7 +55,9 @@ const URLProperty = (props: Props): JSX.Element => { setIsEditing(false) props.onCancel() }} - onFocus={() => setIsEditing(true)} + onFocus={() => { + setIsEditing(true) + }} validator={props.validator} />
From f4bf7db996ce2df3602778bd1a6a116cfc7f5990 Mon Sep 17 00:00:00 2001 From: kamre Date: Tue, 25 Jan 2022 14:56:26 +0300 Subject: [PATCH 9/9] Cypress test for new URL property behaviour added: - using `cypress-real-events` for real hover - label for view header menu changed to 'View header menu' - label for view menu added - snapshots for unit tests updated --- webapp/cypress/integration/cardURLProperty.ts | 110 ++++++++++++++++++ webapp/cypress/support/api_commands.ts | 2 - webapp/cypress/support/index.ts | 4 + webapp/cypress/tsconfig.json | 1 + webapp/i18n/en.json | 2 +- webapp/i18n/en_AU.json | 2 +- webapp/package-lock.json | 17 +++ webapp/package.json | 1 + .../__snapshots__/centerPanel.test.tsx.snap | 58 ++++----- .../__snapshots__/workspace.test.tsx.snap | 12 +- .../__snapshots__/viewHeader.test.tsx.snap | 6 +- .../viewHeaderActionsMenu.test.tsx.snap | 8 +- .../src/components/viewHeader/viewHeader.tsx | 5 +- .../viewHeader/viewHeaderActionsMenu.test.tsx | 8 +- .../viewHeader/viewHeaderActionsMenu.tsx | 2 +- webapp/src/components/viewMenu.tsx | 2 +- 16 files changed, 186 insertions(+), 54 deletions(-) create mode 100644 webapp/cypress/integration/cardURLProperty.ts diff --git a/webapp/cypress/integration/cardURLProperty.ts b/webapp/cypress/integration/cardURLProperty.ts new file mode 100644 index 000000000..10dbe6dab --- /dev/null +++ b/webapp/cypress/integration/cardURLProperty.ts @@ -0,0 +1,110 @@ +// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. +// See LICENSE.txt for license information. + +describe('Card URL Property', () => { + beforeEach(() => { + cy.apiInitServer() + cy.apiResetBoards() + localStorage.setItem('welcomePageViewed', 'true') + }) + + const url = 'https://mattermost.com' + const changedURL = 'https://mattermost.com/blog' + + it('Allows to create and edit URL property', () => { + cy.visit('/') + + // Create new board + cy.uiCreateNewBoard('Testing') + + // Add a new card + cy.uiAddNewCard('Card') + + // Add URL property + cy.log('**Add URL property**') + cy.findByRole('button', {name: '+ Add a property'}).click() + cy.findByRole('button', {name: 'URL'}).click() + cy.findByRole('textbox', {name: 'URL'}).type('{enter}') + + // Enter URL + cy.log('**Enter URL**') + cy.findByPlaceholderText('Empty').type(`${url}{enter}`) + + // Check buttons + cy.log('**Check buttons**') + cy.findByRole('link', {name: url}).realHover() + cy.findByRole('button', {name: 'Edit'}).should('exist') + cy.findByRole('button', {name: 'Copy'}).should('exist') + + // Change URL + cy.log('**Change URL**') + cy.findByRole('link', {name: url}).realHover() + cy.findByRole('button', {name: 'Edit'}).click() + cy.findByRole('textbox', {name: url}).clear().type(`${changedURL}{enter}`) + cy.findByRole('link', {name: changedURL}).should('exist') + + // Close card dialog + cy.log('**Close card dialog**') + cy.findByRole('button', {name: 'Close dialog'}).click() + cy.findByRole('dialog').should('not.exist') + + // Show URL property + showURLProperty() + + // Copy URL to clipboard + cy.log('**Copy URL to clipboard**') + cy.document().then((doc) => cy.spy(doc, 'execCommand')).as('exec') + cy.findByRole('link', {name: changedURL}).realHover() + cy.findByRole('button', {name: 'Edit'}).should('not.exist') + cy.findByRole('button', {name: 'Copy'}).click() + cy.findByText('Copied!').should('exist') + cy.findByText('Copied!').should('not.exist') + cy.get('@exec').should('have.been.calledOnceWith', 'copy') + + // Add table view + addView('Table') + + // Check buttons + cy.log('**Check buttons**') + cy.findByRole('link', {name: changedURL}).realHover() + cy.findByRole('button', {name: 'Edit'}).should('exist') + cy.findByRole('button', {name: 'Copy'}).should('not.exist') + + // Add gallery view + addView('Gallery') + showURLProperty() + + // Check buttons + cy.log('**Check buttons**') + cy.findByRole('link', {name: changedURL}).realHover() + cy.findByRole('button', {name: 'Edit'}).should('not.exist') + cy.findByRole('button', {name: 'Copy'}).should('exist') + + // Add calendar view + addView('Calendar') + showURLProperty() + + // Check buttons + cy.log('**Check buttons**') + cy.findByRole('link', {name: changedURL}).realHover() + cy.findByRole('button', {name: 'Edit'}).should('not.exist') + cy.findByRole('button', {name: 'Copy'}).should('exist') + }) + + type ViewType = 'Board' | 'Table' | 'Gallery' | 'Calendar' + + const addView = (type: ViewType) => { + cy.log(`**Add ${type} view**`) + cy.findByRole('button', {name: 'View menu'}).click() + cy.findByText('Add view').click() + cy.findByRole('button', {name: type}).click() + cy.findByRole('textbox', {name: `${type} view`}).should('exist') + } + + const showURLProperty = () => { + cy.log('**Show URL property**') + cy.findByRole('button', {name: 'Properties'}).click() + cy.findByRole('button', {name: 'URL'}).click() + cy.findByRole('link', {name: changedURL}).should('exist') + } +}) diff --git a/webapp/cypress/support/api_commands.ts b/webapp/cypress/support/api_commands.ts index 72109849d..659aabec9 100644 --- a/webapp/cypress/support/api_commands.ts +++ b/webapp/cypress/support/api_commands.ts @@ -1,8 +1,6 @@ // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. // See LICENSE.txt for license information. -import '@testing-library/cypress/add-commands' - import {Board} from '../../src/blocks/board' Cypress.Commands.add('apiRegisterUser', (data: Cypress.UserData, token?: string, failOnError?: boolean) => { diff --git a/webapp/cypress/support/index.ts b/webapp/cypress/support/index.ts index e2bf87045..f7540cabc 100644 --- a/webapp/cypress/support/index.ts +++ b/webapp/cypress/support/index.ts @@ -1,5 +1,9 @@ // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. // See LICENSE.txt for license information. +import '@testing-library/cypress/add-commands' + +import 'cypress-real-events/support' + import './api_commands' import './ui_commands' diff --git a/webapp/cypress/tsconfig.json b/webapp/cypress/tsconfig.json index 5d15acde9..d42bc8772 100644 --- a/webapp/cypress/tsconfig.json +++ b/webapp/cypress/tsconfig.json @@ -4,6 +4,7 @@ "noEmit": true, "types": [ "cypress", + "cypress-real-events", "@testing-library/cypress" ] }, diff --git a/webapp/i18n/en.json b/webapp/i18n/en.json index af36d75bc..34129d8a2 100644 --- a/webapp/i18n/en.json +++ b/webapp/i18n/en.json @@ -208,7 +208,7 @@ "View.DuplicateView": "Duplicate view", "View.Gallery": "Gallery", "View.NewBoardTitle": "Board view", - "View.NewCalendarTitle": "Calendar View", + "View.NewCalendarTitle": "Calendar view", "View.NewGalleryTitle": "Gallery view", "View.NewTableTitle": "Table view", "View.NewTemplateTitle": "Untitled Template", diff --git a/webapp/i18n/en_AU.json b/webapp/i18n/en_AU.json index 0fe7c2ca1..61521c8b5 100644 --- a/webapp/i18n/en_AU.json +++ b/webapp/i18n/en_AU.json @@ -208,7 +208,7 @@ "View.DuplicateView": "Duplicate view", "View.Gallery": "Gallery", "View.NewBoardTitle": "Board view", - "View.NewCalendarTitle": "Calendar View", + "View.NewCalendarTitle": "Calendar view", "View.NewGalleryTitle": "Gallery view", "View.NewTableTitle": "Table view", "View.NewTemplateTitle": "Untitled Template", diff --git a/webapp/package-lock.json b/webapp/package-lock.json index 8af9b10b4..7ac4ae88c 100644 --- a/webapp/package-lock.json +++ b/webapp/package-lock.json @@ -71,6 +71,7 @@ "copy-webpack-plugin": "^8.1.0", "cross-env": "^7.0.3", "css-loader": "^5.2.0", + "cypress-real-events": "^1.6.0", "eslint": "^7.22.0", "eslint-import-resolver-webpack": "0.13.0", "eslint-plugin-babel": "^5.3.1", @@ -5444,6 +5445,15 @@ "node": ">=10.0.0" } }, + "node_modules/cypress-real-events": { + "version": "1.6.0", + "resolved": "https://registry.npmjs.org/cypress-real-events/-/cypress-real-events-1.6.0.tgz", + "integrity": "sha512-QxXm0JsQkCrb2uH+fMXNDQ5kNWTzX3OtndBafdsZmNV19j+6JuTK9n52B1YVxrDrr/qzPAojcHJc5PNoQvwp+w==", + "dev": true, + "peerDependencies": { + "cypress": "^4.x || ^5.x || ^6.x || ^7.x || ^8.x || ^9.x" + } + }, "node_modules/cypress/node_modules/@types/node": { "version": "12.12.50", "resolved": "https://registry.npmjs.org/@types/node/-/node-12.12.50.tgz", @@ -24190,6 +24200,13 @@ } } }, + "cypress-real-events": { + "version": "1.6.0", + "resolved": "https://registry.npmjs.org/cypress-real-events/-/cypress-real-events-1.6.0.tgz", + "integrity": "sha512-QxXm0JsQkCrb2uH+fMXNDQ5kNWTzX3OtndBafdsZmNV19j+6JuTK9n52B1YVxrDrr/qzPAojcHJc5PNoQvwp+w==", + "dev": true, + "requires": {} + }, "dashdash": { "version": "1.14.1", "resolved": "https://registry.npmjs.org/dashdash/-/dashdash-1.14.1.tgz", diff --git a/webapp/package.json b/webapp/package.json index 2e706ecae..2d126ea63 100644 --- a/webapp/package.json +++ b/webapp/package.json @@ -105,6 +105,7 @@ "copy-webpack-plugin": "^8.1.0", "cross-env": "^7.0.3", "css-loader": "^5.2.0", + "cypress-real-events": "^1.6.0", "eslint": "^7.22.0", "eslint-import-resolver-webpack": "0.13.0", "eslint-plugin-babel": "^5.3.1", diff --git a/webapp/src/components/__snapshots__/centerPanel.test.tsx.snap b/webapp/src/components/__snapshots__/centerPanel.test.tsx.snap index 6eb91edb7..fe43b9b10 100644 --- a/webapp/src/components/__snapshots__/centerPanel.test.tsx.snap +++ b/webapp/src/components/__snapshots__/centerPanel.test.tsx.snap @@ -151,7 +151,7 @@ exports[`components/centerPanel return centerPanel and click on card to show car value="view title" />
@@ -233,7 +233,7 @@ exports[`components/centerPanel return centerPanel and click on card to show car class="ModalWrapper" >
@@ -710,7 +710,7 @@ exports[`components/centerPanel return centerPanel and click on new card to edit value="view title" />
@@ -792,7 +792,7 @@ exports[`components/centerPanel return centerPanel and click on new card to edit class="ModalWrapper" >
@@ -1314,7 +1314,7 @@ exports[`components/centerPanel return centerPanel and press touch 1 with readon value="view title" />
@@ -1772,7 +1772,7 @@ exports[`components/centerPanel return centerPanel and press touch ctrl+d for on value="view title" />
@@ -1854,7 +1854,7 @@ exports[`components/centerPanel return centerPanel and press touch ctrl+d for on class="ModalWrapper" >
@@ -2391,7 +2391,7 @@ exports[`components/centerPanel return centerPanel and press touch del for one c value="view title" />
@@ -2473,7 +2473,7 @@ exports[`components/centerPanel return centerPanel and press touch del for one c class="ModalWrapper" >
@@ -3010,7 +3010,7 @@ exports[`components/centerPanel return centerPanel and press touch esc for one c value="view title" />
@@ -3092,7 +3092,7 @@ exports[`components/centerPanel return centerPanel and press touch esc for one c class="ModalWrapper" >
@@ -3629,7 +3629,7 @@ exports[`components/centerPanel return centerPanel and press touch esc for one c value="view title" />
@@ -3711,7 +3711,7 @@ exports[`components/centerPanel return centerPanel and press touch esc for one c class="ModalWrapper" >
@@ -4248,7 +4248,7 @@ exports[`components/centerPanel return centerPanel and press touch esc for two c value="view title" />
@@ -4330,7 +4330,7 @@ exports[`components/centerPanel return centerPanel and press touch esc for two c class="ModalWrapper" >
@@ -4867,7 +4867,7 @@ exports[`components/centerPanel return centerPanel and press touch esc for two c value="view title" />
@@ -4949,7 +4949,7 @@ exports[`components/centerPanel return centerPanel and press touch esc for two c class="ModalWrapper" >
@@ -5486,7 +5486,7 @@ exports[`components/centerPanel return centerPanel and press touch esc for two c value="view title" />
@@ -5568,7 +5568,7 @@ exports[`components/centerPanel return centerPanel and press touch esc for two c class="ModalWrapper" >
@@ -6105,7 +6105,7 @@ exports[`components/centerPanel return centerPanel and select one card and click value="view title" />
@@ -6187,7 +6187,7 @@ exports[`components/centerPanel return centerPanel and select one card and click class="ModalWrapper" >
@@ -6724,7 +6724,7 @@ exports[`components/centerPanel return centerPanel and select one card and click value="view title" />
@@ -6806,7 +6806,7 @@ exports[`components/centerPanel return centerPanel and select one card and click class="ModalWrapper" >
@@ -7343,7 +7343,7 @@ exports[`components/centerPanel should match snapshot for Gallery 1`] = ` value="view title" />
@@ -7407,7 +7407,7 @@ exports[`components/centerPanel should match snapshot for Gallery 1`] = ` class="ModalWrapper" >
@@ -7632,7 +7632,7 @@ exports[`components/centerPanel should match snapshot for Kanban 1`] = ` value="view title" />
@@ -7714,7 +7714,7 @@ exports[`components/centerPanel should match snapshot for Kanban 1`] = ` class="ModalWrapper" >
@@ -8157,7 +8157,7 @@ exports[`components/centerPanel should match snapshot for Table 1`] = ` value="view title" />
@@ -8239,7 +8239,7 @@ exports[`components/centerPanel should match snapshot for Table 1`] = ` class="ModalWrapper" >
diff --git a/webapp/src/components/__snapshots__/workspace.test.tsx.snap b/webapp/src/components/__snapshots__/workspace.test.tsx.snap index b42653f27..e90764e43 100644 --- a/webapp/src/components/__snapshots__/workspace.test.tsx.snap +++ b/webapp/src/components/__snapshots__/workspace.test.tsx.snap @@ -384,7 +384,7 @@ exports[`src/components/workspace return workspace and showcard 1`] = ` value="view title" />
@@ -466,7 +466,7 @@ exports[`src/components/workspace return workspace and showcard 1`] = ` class="ModalWrapper" >
@@ -935,7 +935,7 @@ exports[`src/components/workspace return workspace readonly and showcard 1`] = ` value="view title" />
@@ -1544,7 +1544,7 @@ exports[`src/components/workspace should match snapshot 1`] = ` value="view title" />
@@ -1626,7 +1626,7 @@ exports[`src/components/workspace should match snapshot 1`] = ` class="ModalWrapper" >
@@ -2095,7 +2095,7 @@ exports[`src/components/workspace should match snapshot with readonly 1`] = ` value="view title" />
diff --git a/webapp/src/components/viewHeader/__snapshots__/viewHeader.test.tsx.snap b/webapp/src/components/viewHeader/__snapshots__/viewHeader.test.tsx.snap index 0f77adaf8..c6eb1a472 100644 --- a/webapp/src/components/viewHeader/__snapshots__/viewHeader.test.tsx.snap +++ b/webapp/src/components/viewHeader/__snapshots__/viewHeader.test.tsx.snap @@ -13,7 +13,7 @@ exports[`components/viewHeader/viewHeader return viewHeader 1`] = ` value="view title" />
@@ -100,7 +100,7 @@ exports[`components/viewHeader/viewHeader return viewHeader 1`] = ` class="ModalWrapper" >
@@ -154,7 +154,7 @@ exports[`components/viewHeader/viewHeader return viewHeader readonly 1`] = ` value="view title" />
diff --git a/webapp/src/components/viewHeader/__snapshots__/viewHeaderActionsMenu.test.tsx.snap b/webapp/src/components/viewHeader/__snapshots__/viewHeaderActionsMenu.test.tsx.snap index 6525e427f..b6a804fc8 100644 --- a/webapp/src/components/viewHeader/__snapshots__/viewHeaderActionsMenu.test.tsx.snap +++ b/webapp/src/components/viewHeader/__snapshots__/viewHeaderActionsMenu.test.tsx.snap @@ -6,7 +6,7 @@ exports[`components/viewHeader/viewHeaderActionsMenu return menu and verify call class="ModalWrapper" >
@@ -116,7 +116,7 @@ exports[`components/viewHeader/viewHeaderActionsMenu return menu and verify call class="ModalWrapper" >
@@ -226,7 +226,7 @@ exports[`components/viewHeader/viewHeaderActionsMenu return menu with Share Boar class="ModalWrapper" >
@@ -336,7 +336,7 @@ exports[`components/viewHeader/viewHeaderActionsMenu return menu without Share B class="ModalWrapper" >
diff --git a/webapp/src/components/viewHeader/viewHeader.tsx b/webapp/src/components/viewHeader/viewHeader.tsx index 74d8bf821..976bd5c27 100644 --- a/webapp/src/components/viewHeader/viewHeader.tsx +++ b/webapp/src/components/viewHeader/viewHeader.tsx @@ -1,7 +1,7 @@ // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. // See LICENSE.txt for license information. import React, {useState, useEffect} from 'react' -import {FormattedMessage} from 'react-intl' +import {FormattedMessage, useIntl} from 'react-intl' import ViewMenu from '../../components/viewMenu' import mutator from '../../mutator' @@ -44,6 +44,7 @@ type Props = { const ViewHeader = React.memo((props: Props) => { const [showFilter, setShowFilter] = useState(false) + const intl = useIntl() const {board, activeView, views, groupByProperty, cards, showShared, dateDisplayProperty} = props @@ -76,7 +77,7 @@ const ViewHeader = React.memo((props: Props) => { spellCheck={true} autoExpand={false} /> - + }/> { ), ) const buttonElement = screen.getByRole('button', { - name: 'View menu', + name: 'View header menu', }) userEvent.click(buttonElement) expect(container).toMatchSnapshot() @@ -77,7 +77,7 @@ describe('components/viewHeader/viewHeaderActionsMenu', () => { ), ) const buttonElement = screen.getByRole('button', { - name: 'View menu', + name: 'View header menu', }) userEvent.click(buttonElement) expect(container).toMatchSnapshot() @@ -95,7 +95,7 @@ describe('components/viewHeader/viewHeaderActionsMenu', () => { , ), ) - const buttonElement = screen.getByRole('button', {name: 'View menu'}) + const buttonElement = screen.getByRole('button', {name: 'View header menu'}) userEvent.click(buttonElement) expect(container).toMatchSnapshot() const buttonExportCSV = screen.getByRole('button', {name: 'Export to CSV'}) @@ -116,7 +116,7 @@ describe('components/viewHeader/viewHeaderActionsMenu', () => { , ), ) - const buttonElement = screen.getByRole('button', {name: 'View menu'}) + const buttonElement = screen.getByRole('button', {name: 'View header menu'}) userEvent.click(buttonElement) expect(container).toMatchSnapshot() const buttonExportBoardArchive = screen.getByRole('button', {name: 'Export board archive'}) diff --git a/webapp/src/components/viewHeader/viewHeaderActionsMenu.tsx b/webapp/src/components/viewHeader/viewHeaderActionsMenu.tsx index 48b80979f..1ee3dc7f8 100644 --- a/webapp/src/components/viewHeader/viewHeaderActionsMenu.tsx +++ b/webapp/src/components/viewHeader/viewHeaderActionsMenu.tsx @@ -108,7 +108,7 @@ const ViewHeaderActionsMenu = React.memo((props: Props) => { return ( - + }/> { Utils.log('addview-calendar') const view = createBoardView() - view.title = intl.formatMessage({id: 'View.NewCalendarTitle', defaultMessage: 'Calendar View'}) + view.title = intl.formatMessage({id: 'View.NewCalendarTitle', defaultMessage: 'Calendar view'}) view.fields.viewType = 'calendar' view.parentId = board.id view.rootId = board.rootId