[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/next_steps_view/index.ts

@@ -20,10 +20,9 @@ function makeMapStateToProps() {
 
     return (state: GlobalState) => {
         const license = getLicense(state);
-        const currentUser = getCurrentUser(state);
 
         return {
-            currentUserId: currentUser.id,
+            currentUser: getCurrentUser(state),
             preferences: getCategory(state, Preferences.RECOMMENDED_NEXT_STEPS),
             skuName: license.SkuShortName,
         };

components/next_steps_view/next_steps_view.test.tsx

@@ -5,10 +5,11 @@ import React from 'react';
 import {shallow} from 'enzyme';
 
 import NextStepsView from 'components/next_steps_view/next_steps_view';
+import {TestHelper} from 'utils/test_helper';
 
 describe('components/next_steps_view', () => {
     const baseProps = {
-        currentUserId: 'user_id',
+        currentUser: TestHelper.getUserMock(),
         preferences: [],
         skuName: '',
         actions: {

components/next_steps_view/next_steps_view.tsx

@@ -6,6 +6,7 @@ import classNames from 'classnames';
 import {FormattedMessage} from 'react-intl';
 
 import {PreferenceType} from 'mattermost-redux/types/preferences';
+import {UserProfile} from 'mattermost-redux/types/users';
 
 import Accordion from 'components/accordion';
 import Card from 'components/card/card';
@@ -16,7 +17,7 @@ import {Steps, StepType} from './steps';
 import './next_steps_view.scss';
 
 type Props = {
-    currentUserId: string;
+    currentUser: UserProfile;
     preferences: PreferenceType[];
     skuName: string;
     actions: {
@@ -86,9 +87,9 @@ export default class NextStepsView extends React.PureComponent<Props, State> {
 
     onFinish = (setExpanded: (expandedKey: string) => void) => {
         return (id: string) => {
-            this.props.actions.savePreferences(this.props.currentUserId, [{
+            this.props.actions.savePreferences(this.props.currentUser.id, [{
                 category: Preferences.RECOMMENDED_NEXT_STEPS,
-                user_id: this.props.currentUserId,
+                user_id: this.props.currentUser.id,
                 name: id,
                 value: 'true',
             }]);
@@ -117,35 +118,38 @@ export default class NextStepsView extends React.PureComponent<Props, State> {
     }
 
     renderStep = (step: StepType, index: number) => {
+        const {id, title} = step;
+
         let icon = (
             <div className='NextStepsView__cardHeaderBadge'>
                 <span>{index + 1}</span>
             </div>
         );
-        if (this.isStepComplete(step.id)) {
+        if (this.isStepComplete(id)) {
             icon = (
                 <i className='icon icon-check-circle'/>
             );
         }
 
         return (setExpanded: (expandedKey: string) => void, expandedKey: string) => (
             <Card
-                className={classNames({complete: this.isStepComplete(step.id)})}
-                expanded={expandedKey === step.id}
+                className={classNames({complete: this.isStepComplete(id)})}
+                expanded={expandedKey === id}
             >
                 <Card.Header>
                     <button
-                        onClick={() => setExpanded(step.id)}
-                        disabled={this.isStepComplete(step.id)}
+                        onClick={() => setExpanded(id)}
+                        disabled={this.isStepComplete(id)}
                         className='NextStepsView__cardHeader'
                     >
                         {icon}
-                        <span>{step.title}</span>
+                        <span>{title}</span>
                     </button>
                 </Card.Header>
                 <Card.Body>
                     <step.component
-                        id={step.id}
+                        id={id}
+                        currentUser={this.props.currentUser}
                         onFinish={this.onFinish(setExpanded)}
                         onSkip={this.onSkip(setExpanded)}
                     />

components/next_steps_view/steps.ts

@@ -3,6 +3,7 @@
 import {createSelector} from 'reselect';
 
 import {makeGetCategory} from 'mattermost-redux/selectors/entities/preferences';
+import {UserProfile} from 'mattermost-redux/types/users';
 
 import {GlobalState} from 'types/store';
 import {RecommendedNextSteps, Preferences} from 'utils/constants';
@@ -12,6 +13,7 @@ import CompleteProfileStep from './steps/complete_profile_step';
 
 export type StepComponentProps = {
     id: string;
+    currentUser: UserProfile;
     onSkip: (id: string) => void;
     onFinish: (id: string) => void;
 }

components/next_steps_view/steps/complete_profile_step.tsx

@@ -4,15 +4,25 @@
 import React from 'react';
 import {FormattedMessage} from 'react-intl';
 
+import PictureSelector from 'components/picture_selector';
+import * as Utils from 'utils/utils';
+
 import {StepComponentProps} from '../steps';
 
 type Props = StepComponentProps & {
 };
 
 type State = {
+    profilePicture?: File;
 };
 
 export default class CompleteProfileStep extends React.PureComponent<Props, State> {
+    constructor(props: Props) {
+        super(props);
+
+        this.state = {};
+    }
+
     onSkip = () => {
         this.props.onSkip(this.props.id);
     }
@@ -21,10 +31,38 @@ export default class CompleteProfileStep extends React.PureComponent<Props, Stat
         this.props.onFinish(this.props.id);
     }
 
+    onSelectPicture = (profilePicture: File) => {
+        this.setState({profilePicture});
+    }
+
+    onRemovePicture = () => {
+        this.setState({profilePicture: undefined});
+    }
+
     render() {
+        const {currentUser} = this.props;
+
+        // Make sure picture has been set
+        const pictureSrc = currentUser.last_picture_update ? Utils.imageURLForUser(currentUser.id, currentUser.last_picture_update) : undefined;
+        const defaultSrc = Utils.defaultImageURLForUser(currentUser.id);
+
         return (
             <div>
-                {'AAAAAAAA'}
+                <div
+                    style={{
+
+                        // TODO temp for textbox demo
+                        margin: '24px',
+                        minHeight: '200px',
+                    }}
+                >
+                    <PictureSelector
+                        onSelect={this.onSelectPicture}
+                        onRemove={this.onRemovePicture}
+                        src={pictureSrc}
+                        defaultSrc={defaultSrc}
+                    />
+                </div>
                 <div className='NextStepsView__wizardButtons'>
                     {/* <button
                         className='NextStepsView__button cancel'

components/picture_selector.scss

@@ -0,0 +1,80 @@
+.PictureSelector {
+    display: flex;
+    flex-direction: column;
+    width: 96px;
+}
+
+.PictureSelector__imageContainer {
+    height: 96px;
+    position: relative;
+}
+
+.PictureSelector__image {
+    height: 100%;
+    border-radius: 100%;
+    background-position: 50% 50%;
+    background-size: cover;
+    border: 1px solid rgba(var(--center-channel-color-rgb), 0.08);
+}
+
+.PictureSelector__selectButton {
+    position: absolute;
+    top: 0;
+    right: 0;
+    border-radius: 100%;
+    background: var(--center-channel-bg);
+    border: 1px solid rgba(var(--center-channel-color-rgb), 0.08);
+    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.12);
+    padding: 4px;
+    width: 28px;
+    height: 28px;
+    display: flex;
+    justify-content: center;
+
+    i {
+        font-size: 16px;
+        line-height: 18px;
+        color: rgba(var(--center-channel-color-rgb), 0.56);
+        align-self: center;
+
+        &::before {
+            margin: 0;
+        }
+    }
+
+    &:hover {
+        border: 1px solid rgba(var(--center-channel-color-rgb), 0.16);
+        box-shadow: 0px 6px 14px rgba(0, 0, 0, 0.12);
+
+        i {
+            color: rgba(var(--center-channel-color-rgb), 0.72);
+        }
+    }
+
+    &:active {
+        background: linear-gradient(0deg, rgba(22, 109, 224, 0.08), rgba(22, 109, 224, 0.08)), #FFFFFF;
+        border: 1px solid rgba(22, 109, 224, 0.16);
+
+        i {
+            color: var(--button-bg);
+        }
+    }
+
+    &:focus {
+        border: 2px solid #166DE0;
+    }
+}
+
+.PictureSelector__removeButton {
+    padding: 0;
+    border: none;
+    font-size: 12px;
+    font-weight: 600;
+    color: var(--button-bg);
+    margin-top: 12px;
+    background-color: transparent;
+
+    &:focus {
+        text-decoration-line: underline;
+    }
+}