[MM-27164] Picture Selector Common Component

components/__snapshots__/picture_selector.test.tsx.snap

@@ -0,0 +1,118 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`components/picture_selector should match snapshot, default picture provided 1`] = `
+<div
+  className="PictureSelector"
+>
+  <input
+    accept=".jpg,.png,.bmp"
+    aria-hidden={true}
+    className="PictureSelector__input"
+    data-testid="PictureSelector__input"
+    onChange={[Function]}
+    tabIndex={-1}
+    type="file"
+  />
+  <div
+    className="PictureSelector__imageContainer"
+  >
+    <div
+      aria-label="Picture selector image"
+      className="PictureSelector__image"
+      style={
+        Object {
+          "backgroundImage": "url(undefined)",
+        }
+      }
+    />
+    <button
+      aria-label="Select picture"
+      className="PictureSelector__selectButton"
+      data-testid="PictureSelector__selectButton"
+      onClick={[Function]}
+    >
+      <i
+        className="icon icon-pencil-outline"
+      />
+    </button>
+  </div>
+</div>
+`;
+
+exports[`components/picture_selector should match snapshot, existing picture provided 1`] = `
+<div
+  className="PictureSelector"
+>
+  <input
+    accept=".jpg,.png,.bmp"
+    aria-hidden={true}
+    className="PictureSelector__input"
+    data-testid="PictureSelector__input"
+    onChange={[Function]}
+    tabIndex={-1}
+    type="file"
+  />
+  <div
+    className="PictureSelector__imageContainer"
+  >
+    <div
+      aria-label="Picture selector image"
+      className="PictureSelector__image"
+      style={
+        Object {
+          "backgroundImage": "url(undefined)",
+        }
+      }
+    />
+    <button
+      aria-label="Select picture"
+      className="PictureSelector__selectButton"
+      data-testid="PictureSelector__selectButton"
+      onClick={[Function]}
+    >
+      <i
+        className="icon icon-pencil-outline"
+      />
+    </button>
+  </div>
+</div>
+`;
+
+exports[`components/picture_selector should match snapshot, no picture selected 1`] = `
+<div
+  className="PictureSelector"
+>
+  <input
+    accept=".jpg,.png,.bmp"
+    aria-hidden={true}
+    className="PictureSelector__input"
+    data-testid="PictureSelector__input"
+    onChange={[Function]}
+    tabIndex={-1}
+    type="file"
+  />
+  <div
+    className="PictureSelector__imageContainer"
+  >
+    <div
+      aria-label="Picture selector image"
+      className="PictureSelector__image"
+      style={
+        Object {
+          "backgroundImage": "url(undefined)",
+        }
+      }
+    />
+    <button
+      aria-label="Select picture"
+      className="PictureSelector__selectButton"
+      data-testid="PictureSelector__selectButton"
+      onClick={[Function]}
+    >
+      <i
+        className="icon icon-pencil-outline"
+      />
+    </button>
+  </div>
+</div>
+`;

components/card/card.scss

@@ -3,6 +3,7 @@
     box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.08);
     border-radius: 4px;
     background-color: var(--center-channel-bg);
+    transition: box-shadow 0.3s ease-in-out;
 
     & + .Card {
         margin-top: 16px;
@@ -16,7 +17,7 @@
 .Card__header {
     margin: 12px 12px 0 12px;
     padding-bottom: 12px;
-    
+
     &.expanded {
         border-bottom: 1px solid rgba(var(--center-channel-color-rgb), 0.08);
     }
@@ -31,7 +32,13 @@
     transition-timing-function: ease-in-out;
     transition-property: height, margin;
 
-    &.expanded { 
-        margin: 12px;       
+    &.expanded {
+        margin: 12px;
+    }
+}
+
+@media screen and (max-width: 768px) {
+    .Card + .Card {
+        margin-top: 12px;
     }
-}
+}

components/card/card.tsx

@@ -11,6 +11,7 @@ import './card.scss';
 
 type Props = {
     expanded?: boolean;
+    className?: string;
 }
 
 export default class Card extends React.PureComponent<Props> {
@@ -30,12 +31,12 @@ export default class Card extends React.PureComponent<Props> {
 
         return (
             <div
-                className={classNames('Card', {
+                className={classNames(`Card${this.props.className ? ` ${this.props.className}` : ''}`, {
                     expanded,
                 })}
             >
                 {childrenWithProps}
             </div>
         );
     }
-}
+}

components/card/card_body.tsx

@@ -32,7 +32,7 @@ export default class CardBody extends React.PureComponent<Props> {
 
         if (this.props.expanded !== prevProps.expanded && this.props.expanded) {
             this.card.current.style.height = `${this.card.current.scrollHeight}px`;
-        } else {
+        } else if (!this.props.expanded) {
             this.card.current.style.height = '';
         }
     }

components/channel_view/channel_view.jsx

@@ -54,7 +54,7 @@ export default class ChannelView extends React.PureComponent {
         const focusedPostId = props.match.params.postid;
 
         if (props.match.url !== state.url && props.channelId !== state.channelId) {
-            updatedState = {deferredPostView: ChannelView.createDeferredPostView(), url: props.match.url, focusedPostId};
+            updatedState = {deferredPostView: ChannelView.createDeferredPostView(), url: props.match.url, focusedPostId, showNextSteps: false};
         }
 
         if (props.channelId !== state.channelId) {
@@ -79,6 +79,7 @@ export default class ChannelView extends React.PureComponent {
             url: props.match.url,
             channelId: props.channelId,
             deferredPostView: ChannelView.createDeferredPostView(),
+            showNextSteps: props.showNextSteps,
         };
     }
 
@@ -125,7 +126,7 @@ export default class ChannelView extends React.PureComponent {
             );
         }
 
-        if (this.props.showNextSteps) {
+        if (this.state.showNextSteps) {
             return (
                 <NextStepsView/>
             );

components/channel_view/index.js

@@ -16,6 +16,7 @@ import {getDirectTeammate} from 'utils/utils.jsx';
 import {TutorialSteps, Preferences} from 'utils/constants';
 
 import {goToLastViewedChannel} from 'actions/views/channel';
+import {showNextSteps} from 'components/next_steps_view/steps';
 
 import ChannelView from './channel_view.jsx';
 
@@ -57,7 +58,7 @@ function mapStateToProps(state) {
         channelRolesLoading,
         deactivatedChannel: channel ? getDeactivatedChannel(state, channel.id) : false,
         showTutorial: enableTutorial && tutorialStep <= TutorialSteps.INTRO_SCREENS,
-        showNextSteps: true,
+        showNextSteps: showNextSteps(state),
         channelIsArchived: channel ? channel.delete_at !== 0 : false,
         viewArchivedChannels,
     };

components/next_steps_view/__snapshots__/next_steps_view.test.tsx.snap

@@ -45,10 +45,23 @@ exports[`components/next_steps_view should match snapshot 1`] = `
       className="NextStepsView__body-main"
     >
       <Accordion
-        defaultExpandedKey="Card_1"
+        defaultExpandedKey="complete_profile"
       >
         <Component />
       </Accordion>
+      <div
+        className="NextStepsView__skipGettingStarted"
+      >
+        <button
+          onClick={[Function]}
+        >
+          <FormattedMessage
+            defaultMessage="Skip Getting Started"
+            id="next_steps_view.skipGettingStarted"
+            values={Object {}}
+          />
+        </button>
+      </div>
     </div>
     <div
       className="NextStepsView__body-graphic"

components/next_steps_view/index.ts

@@ -1,31 +1,39 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
-// See LICENSE.txt for license information.
-
 import {connect} from 'react-redux';
 import {bindActionCreators, Dispatch} from 'redux';
 
+import {savePreferences} from 'mattermost-redux/actions/preferences';
 import {getLicense} from 'mattermost-redux/selectors/entities/general';
+import {makeGetCategory} from 'mattermost-redux/selectors/entities/preferences';
+import {getCurrentUser} from 'mattermost-redux/selectors/entities/users';
 
 import {GlobalState} from 'types/store';
+import {Preferences} from 'utils/constants';
 
 import NextStepsView from './next_steps_view';
 
-function mapStateToProps(state: GlobalState) {
-    const license = getLicense(state);
+function makeMapStateToProps() {
+    const getCategory = makeGetCategory();
 
-    return {
-        skuName: license.SkuShortName,
+    return (state: GlobalState) => {
+        const license = getLicense(state);
+
+        return {
+            currentUser: getCurrentUser(state),
+            preferences: getCategory(state, Preferences.RECOMMENDED_NEXT_STEPS),
+            skuName: license.SkuShortName,
+        };
     };
 }
 
 function mapDispatchToProps(dispatch: Dispatch) {
     return {
         actions: bindActionCreators({
+            savePreferences,
         }, dispatch),
     };
 }
 
-export default connect(mapStateToProps, mapDispatchToProps)(NextStepsView);
+export default connect(makeMapStateToProps, mapDispatchToProps)(NextStepsView);