Merge branch 'main' into MM-51062-fix-api

mattermost-plugin/webapp/src/components/rhsChannelBoardItem.tsx

@@ -17,8 +17,10 @@ import CompassIcon from '../../../../webapp/src/widgets/icons/compassIcon'
 
 import {Permission} from '../../../../webapp/src/constants'
 
-import './rhsChannelBoardItem.scss'
 import BoardPermissionGate from '../../../../webapp/src/components/permissions/boardPermissionGate'
+import TelemetryClient, {TelemetryActions, TelemetryCategory} from '../../../../webapp/src/telemetry/telemetryClient'
+
+import './rhsChannelBoardItem.scss'
 
 const windowAny = (window as SuiteWindow)
 
@@ -36,6 +38,10 @@ const RHSChannelBoardItem = (props: Props) => {
     }
 
     const handleBoardClicked = (boardID: string) => {
+        // send the telemetry information for the clicked board
+        const extraData = {teamID: team.id, board: boardID}
+        TelemetryClient.trackEvent(TelemetryCategory, TelemetryActions.ClickChannelsRHSBoard, extraData)
+
         window.open(`${windowAny.frontendBaseURL}/team/${team.id}/${boardID}`, '_blank', 'noopener')
     }
 

webapp/src/components/table/table.scss

@@ -203,6 +203,7 @@
             width: inherit;
         }
 
+        .MultiPerson.octo-propertyvalue,
         .Person.octo-propertyvalue,
         .DateRange.octo-propertyvalue {
             overflow: unset;

webapp/src/pages/welcome/__snapshots__/welcomePage.test.tsx.snap

@@ -18,32 +18,40 @@ exports[`pages/welcome Welcome Page shows Explore Page 1`] = `
       >
         Boards is a project management tool that helps define, organize, track, and manage work across teams using a familiar Kanban board view.
       </div>
-      <img
+      <div
-        alt="Boards Welcome Image"
+        class="WelcomePage__content"
-        class="WelcomePage__image WelcomePage__image--large"
-        src="test-file-stub"
-      />
-      <img
-        alt="Boards Welcome Image"
-        class="WelcomePage__image WelcomePage__image--small"
-        src="test-file-stub"
-      />
-      <button
-        class="Button filled size--large"
-        type="button"
       >
-        <span>
+        <img
-          Take a tour
+          alt="Boards Welcome Image"
-        </span>
+          class="WelcomePage__image WelcomePage__image--large"
-        <i
+          src="test-file-stub"
-          class="CompassIcon icon-chevron-right Icon Icon--right"
         />
-      </button>
+        <img
-      <a
+          alt="Boards Welcome Image"
-        class="skip"
+          class="WelcomePage__image WelcomePage__image--small"
-      >
+          src="test-file-stub"
-        No thanks, I'll figure it out myself
+        />
-      </a>
+        <div
+          class="WelcomePage__buttons"
+        >
+          <button
+            class="Button filled size--large"
+            type="button"
+          >
+            <span>
+              Take a tour
+            </span>
+            <i
+              class="CompassIcon icon-chevron-right Icon Icon--right"
+            />
+          </button>
+          <a
+            class="skip"
+          >
+            No thanks, I'll figure it out myself
+          </a>
+        </div>
+      </div>
     </div>
   </div>
 </div>
@@ -67,32 +75,40 @@ exports[`pages/welcome Welcome Page shows Explore Page with subpath 1`] = `
       >
         Boards is a project management tool that helps define, organize, track, and manage work across teams using a familiar Kanban board view.
       </div>
-      <img
+      <div
-        alt="Boards Welcome Image"
+        class="WelcomePage__content"
-        class="WelcomePage__image WelcomePage__image--large"
-        src="test-file-stub"
-      />
-      <img
-        alt="Boards Welcome Image"
-        class="WelcomePage__image WelcomePage__image--small"
-        src="test-file-stub"
-      />
-      <button
-        class="Button filled size--large"
-        type="button"
       >
-        <span>
+        <img
-          Take a tour
+          alt="Boards Welcome Image"
-        </span>
+          class="WelcomePage__image WelcomePage__image--large"
-        <i
+          src="test-file-stub"
-          class="CompassIcon icon-chevron-right Icon Icon--right"
         />
-      </button>
+        <img
-      <a
+          alt="Boards Welcome Image"
-        class="skip"
+          class="WelcomePage__image WelcomePage__image--small"
-      >
+          src="test-file-stub"
-        No thanks, I'll figure it out myself
+        />
-      </a>
+        <div
+          class="WelcomePage__buttons"
+        >
+          <button
+            class="Button filled size--large"
+            type="button"
+          >
+            <span>
+              Take a tour
+            </span>
+            <i
+              class="CompassIcon icon-chevron-right Icon Icon--right"
+            />
+          </button>
+          <a
+            class="skip"
+          >
+            No thanks, I'll figure it out myself
+          </a>
+        </div>
+      </div>
     </div>
   </div>
 </div>

webapp/src/pages/welcome/welcomePage.scss

@@ -10,6 +10,26 @@
     @media (max-height: 768px) {
         justify-content: flex-start;
         height: auto;
+        padding-top: 40px;
+    }
+
+    .WelcomePage__content {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 12px;
+
+        @media (max-height: 800px) {
+            flex-direction: column-reverse;
+            margin-top: 16px;
+        }
+    }
+
+    .WelcomePage__buttons {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 12px;
     }
 
     > div {
@@ -34,7 +54,6 @@
     }
 
     .skip {
-        margin-top: 12px;
         color: rgba(var(--link-color-rgb), 1);
         cursor: pointer;
 

webapp/src/pages/welcome/welcomePage.tsx

@@ -127,59 +127,63 @@ const WelcomePage = () => {
                     />
                 </div>
 
-                {/* This image will be rendered on large screens over 2000px */}
+                <div className='WelcomePage__content'>
-                <img
+                    {/* This image will be rendered on large screens over 2000px */}
-                    src={Utils.buildURL(BoardWelcomePNG, true)}
+                    <img
-                    className='WelcomePage__image WelcomePage__image--large'
+                        src={Utils.buildURL(BoardWelcomePNG, true)}
-                    alt='Boards Welcome Image'
+                        className='WelcomePage__image WelcomePage__image--large'
-                />
+                        alt='Boards Welcome Image'
+                    />
 
-                {/* This image will be rendered on small screens below 2000px */}
+                    {/* This image will be rendered on small screens below 2000px */}
-                <img
+                    <img
-                    src={Utils.buildURL(BoardWelcomeSmallPNG, true)}
+                        src={Utils.buildURL(BoardWelcomeSmallPNG, true)}
-                    className='WelcomePage__image WelcomePage__image--small'
+                        className='WelcomePage__image WelcomePage__image--small'
-                    alt='Boards Welcome Image'
+                        alt='Boards Welcome Image'
-                />
+                    />
 
-                {me?.is_guest !== true &&
+                    <div className='WelcomePage__buttons'>
-                    <Button
+                        {me?.is_guest !== true &&
-                        onClick={startTour}
+                        <Button
-                        filled={true}
+                            onClick={startTour}
-                        size='large'
+                            filled={true}
-                        icon={
+                            size='large'
-                            <CompassIcon
+                            icon={
-                                icon='chevron-right'
+                                <CompassIcon
-                                className='Icon Icon--right'
+                                    icon='chevron-right'
-                            />}
+                                    className='Icon Icon--right'
-                        rightIcon={true}
+                                />}
-                    >
+                            rightIcon={true}
-                        <FormattedMessage
+                        >
-                            id='WelcomePage.Explore.Button'
+                            <FormattedMessage
-                            defaultMessage='Take a tour'
+                                id='WelcomePage.Explore.Button'
-                        />
+                                defaultMessage='Take a tour'
-                    </Button>}
+                            />
+                        </Button>}
 
-                {me?.is_guest !== true &&
+                        {me?.is_guest !== true &&
-                    <a
+                        <a
-                        className='skip'
+                            className='skip'
-                        onClick={skipTour}
+                            onClick={skipTour}
-                    >
+                        >
-                        <FormattedMessage
+                            <FormattedMessage
-                            id='WelcomePage.NoThanks.Text'
+                                id='WelcomePage.NoThanks.Text'
-                            defaultMessage="No thanks, I'll figure it out myself"
+                                defaultMessage="No thanks, I'll figure it out myself"
-                        />
+                            />
-                    </a>}
+                        </a>}
-                {me?.is_guest === true &&
+                        {me?.is_guest === true &&
-                    <Button
+                        <Button
-                        onClick={skipTour}
+                            onClick={skipTour}
-                        filled={true}
+                            filled={true}
-                        size='large'
+                            size='large'
-                    >
+                        >
-                        <FormattedMessage
+                            <FormattedMessage
-                            id='WelcomePage.StartUsingIt.Text'
+                                id='WelcomePage.StartUsingIt.Text'
-                            defaultMessage='Start using it'
+                                defaultMessage='Start using it'
-                        />
+                            />
-                    </Button>}
+                        </Button>}
+                    </div>
+                </div>
             </div>
         </div>
     )

webapp/src/properties/date/__snapshots__/date.test.tsx.snap

@@ -34,6 +34,23 @@ exports[`properties/dateRange handle clear 1`] = `
 </div>
 `;
 
+exports[`properties/dateRange returns component with new date after prop change 1`] = `
+<div>
+  <div
+    class="DateRange  octo-propertyvalue"
+  >
+    <button
+      class="Button"
+      type="button"
+    >
+      <span>
+        June 15
+      </span>
+    </button>
+  </div>
+</div>
+`;
+
 exports[`properties/dateRange returns default correctly 1`] = `
 <div>
   <div

webapp/src/properties/date/date.test.tsx

@@ -315,4 +315,36 @@ describe('properties/dateRange', () => {
 
         expect(mockedMutator.changePropertyValue).toHaveBeenCalledWith(board.id, card, propertyTemplate.id, JSON.stringify({from: today}))
     })
+
+    test('returns component with new date after prop change', () => {
+        const component = wrapIntl(
+            <DateProp
+                property={new DateProperty()}
+                propertyValue=''
+                showEmptyPlaceholder={false}
+                readOnly={false}
+                board={{...board}}
+                card={{...card}}
+                propertyTemplate={propertyTemplate}
+            />,
+        )
+
+        const {container, rerender} = render(component)
+
+        rerender(
+            wrapIntl(
+                <DateProp
+                    property={new DateProperty()}
+                    propertyValue={'{"from": ' + June15.getTime().toString() + '}'}
+                    showEmptyPlaceholder={false}
+                    readOnly={false}
+                    board={{...board}}
+                    card={{...card}}
+                    propertyTemplate={propertyTemplate}
+                />,
+            ),
+        )
+
+        expect(container).toMatchSnapshot()
+    })
 })

webapp/src/properties/date/date.tsx

@@ -1,6 +1,6 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
-import React, {useMemo, useState, useCallback} from 'react'
+import React, {useMemo, useState, useCallback, useEffect} from 'react'
 import {useIntl} from 'react-intl'
 import {DateUtils} from 'react-day-picker'
 import MomentLocaleUtils from 'react-day-picker/moment'
@@ -58,6 +58,12 @@ function DateRange(props: PropertyProps): JSX.Element {
     const [value, setValue] = useState(propertyValue)
     const intl = useIntl()
 
+    useEffect(() => {
+        if (value !== propertyValue) {
+            setValue(propertyValue)
+        }
+    }, [propertyValue, setValue])
+
     const onChange = useCallback((newValue) => {
         if (value !== newValue) {
             setValue(newValue)

webapp/src/telemetry/telemetryClient.ts

@@ -50,6 +50,7 @@ export const TelemetryActions = {
     LimitCardLimitReached: 'limit_cardLimitReached',
     LimitCardLimitLinkOpen: 'limit_cardLimitLinkOpen',
     VersionMoreInfo: 'version_more_info',
+    ClickChannelsRHSBoard: 'click_board_in_channels_RHS',
 }
 
 interface IEventProps {