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,6 +18,9 @@ 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>
+      <div
+        class="WelcomePage__content"
+      >
         <img
           alt="Boards Welcome Image"
           class="WelcomePage__image WelcomePage__image--large"
@@ -28,6 +31,9 @@ exports[`pages/welcome Welcome Page shows Explore Page 1`] = `
           class="WelcomePage__image WelcomePage__image--small"
           src="test-file-stub"
         />
+        <div
+          class="WelcomePage__buttons"
+        >
           <button
             class="Button filled size--large"
             type="button"
@@ -47,6 +53,8 @@ exports[`pages/welcome Welcome Page shows Explore Page 1`] = `
         </div>
       </div>
     </div>
+  </div>
+</div>
 `;
 
 exports[`pages/welcome Welcome Page shows Explore Page with subpath 1`] = `
@@ -67,6 +75,9 @@ 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>
+      <div
+        class="WelcomePage__content"
+      >
         <img
           alt="Boards Welcome Image"
           class="WelcomePage__image WelcomePage__image--large"
@@ -77,6 +88,9 @@ exports[`pages/welcome Welcome Page shows Explore Page with subpath 1`] = `
           class="WelcomePage__image WelcomePage__image--small"
           src="test-file-stub"
         />
+        <div
+          class="WelcomePage__buttons"
+        >
           <button
             class="Button filled size--large"
             type="button"
@@ -96,4 +110,6 @@ exports[`pages/welcome Welcome Page shows Explore Page with subpath 1`] = `
         </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,6 +127,7 @@ const WelcomePage = () => {
                     />
                 </div>
 
+                <div className='WelcomePage__content'>
                     {/* This image will be rendered on large screens over 2000px */}
                     <img
                         src={Utils.buildURL(BoardWelcomePNG, true)}
@@ -141,6 +142,7 @@ const WelcomePage = () => {
                         alt='Boards Welcome Image'
                     />
 
+                    <div className='WelcomePage__buttons'>
                         {me?.is_guest !== true &&
                         <Button
                             onClick={startTour}
@@ -182,6 +184,8 @@ const WelcomePage = () => {
                         </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 {