Custom space avatar images

x-pack/legacy/plugins/spaces/common/model/space.ts

@@ -12,4 +12,5 @@ export interface Space {
   initials?: string;
   disabledFeatures: string[];
   _reserved?: boolean;
+  avatarImage?: string;
 }

x-pack/legacy/plugins/spaces/common/space_attributes.ts

@@ -52,3 +52,18 @@ export function getSpaceInitials(space: Partial<Space> = {}) {
 
   return words.map(word => word.substring(0, 1)).join('');
 }
+
+/**
+ * Determines the avatar image for the provided space.
+ *
+ * @param {Space} space
+ */
+export function getSpaceAvatarImage(space: Partial<Space> = {}) {
+  const { avatarImage, name = '' } = space;
+
+  if (avatarImage) {
+    return avatarImage;
+  }
+
+  return '';
+}

x-pack/legacy/plugins/spaces/public/components/space_avatar.tsx

@@ -8,6 +8,7 @@ import { EuiAvatar, isValidHex } from '@elastic/eui';
 import React, { SFC } from 'react';
 import { getSpaceColor, getSpaceInitials, MAX_SPACE_INITIALS } from '../../common';
 import { Space } from '../../common/model/space';
+import { getSpaceAvatarImage } from '../../common/space_attributes';
 
 interface Props {
   space: Partial<Space>;
@@ -37,6 +38,7 @@ export const SpaceAvatar: SFC<Props> = (props: Props) => {
       initialsLength={MAX_SPACE_INITIALS}
       initials={getSpaceInitials(space)}
       color={isValidHex(spaceColor) ? spaceColor : ''}
+      imageUrl={getSpaceAvatarImage(space)}
       {...rest}
     />
   );

x-pack/legacy/plugins/spaces/public/views/management/edit_space/customize_space/customize_space_avatar.tsx

@@ -4,9 +4,21 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { EuiColorPicker, EuiFieldText, EuiFlexItem, EuiFormRow, isValidHex } from '@elastic/eui';
-import { InjectedIntl, injectI18n } from '@kbn/i18n/react';
 import React, { ChangeEvent, Component } from 'react';
+import {
+  EuiButton,
+  EuiColorPicker,
+  EuiFieldText,
+  EuiFlexItem,
+  EuiFormRow,
+  EuiFilePicker,
+  isValidHex,
+} from '@elastic/eui';
+import { InjectedIntl, injectI18n } from '@kbn/i18n/react';
+
+import { get } from 'lodash';
+import { encode } from '../../../../../../canvas/common/lib/dataurl';
+
 import { MAX_SPACE_INITIALS } from '../../../../../common/constants';
 import { Space } from '../../../../../common/model/space';
 import { getSpaceColor, getSpaceInitials } from '../../../../../common/space_attributes';
@@ -20,6 +32,7 @@ interface Props {
 interface State {
   initialsHasFocus: boolean;
   pendingInitials?: string | null;
+  avatarImage?: string | null;
 }
 
 class CustomizeSpaceAvatarUI extends Component<Props, State> {
@@ -29,9 +42,27 @@ class CustomizeSpaceAvatarUI extends Component<Props, State> {
     super(props);
     this.state = {
       initialsHasFocus: false,
+      avatarImage: props.space.avatarImage,
     };
   }
 
+  private _handleChange = (avImg: string) => {
+    this.setState({ avatarImage: avImg });
+
+    if (avImg) {
+      this.props.onChange({
+        ...this.props.space,
+        avatarImage: avImg,
+      });
+    }
+  };
+
+  private onFileUpload = (files: File[]) => {
+    const [file] = files;
+    const [type, subtype] = get(file, 'type', '').split('/');
+    encode(file).then((dataurl: string) => this._handleChange(dataurl));
+  };
+
   public render() {
     const { space, intl } = this.props;
 
@@ -73,11 +104,52 @@ class CustomizeSpaceAvatarUI extends Component<Props, State> {
               isInvalid={isInvalidSpaceColor}
             />
           </EuiFormRow>
+          {this.filePickerOrImage()}
         </EuiFlexItem>
       </form>
     );
   }
 
+  private removeAvatarImage() {
+    this.setState({ avatarImage: '' });
+    this.props.onChange({
+      ...this.props.space,
+      avatarImage: '',
+    });
+  }
+
+  public filePickerOrImage() {
+    const { intl } = this.props;
+    const avImage = this.state.avatarImage;
+
+    if (!this.state.avatarImage) {
+      return (
+        <EuiFormRow
+          label={intl.formatMessage({
+            id: 'xpack.spaces.management.customizeSpaceAvatar.avatarImage',
+            defaultMessage: 'Pick an image for your space',
+          })}
+        >
+          <EuiFilePicker
+            compressed
+            initialPromptText="Select avatar image"
+            onChange={this.onFileUpload}
+            accept="image/*"
+          />
+        </EuiFormRow>
+      );
+    } else {
+      if (avImage) {
+        return (
+          <EuiButton color="danger" onClick={() => this.removeAvatarImage()}>
+            Remove Avatar Image
+          </EuiButton>
+        );
+      }
+      return '';
+    }
+  }
+
   public initialsInputRef = (ref: HTMLInputElement) => {
     if (ref) {
       this.initialsRef = ref;

x-pack/legacy/plugins/spaces/public/views/management/edit_space/manage_space_page.tsx

@@ -334,6 +334,7 @@ class ManageSpacePageUI extends Component<Props, State> {
       initials,
       color,
       disabledFeatures = [],
+      avatarImage,
     } = this.state.space;
 
     const params = {
@@ -343,6 +344,7 @@ class ManageSpacePageUI extends Component<Props, State> {
       initials,
       color,
       disabledFeatures,
+      avatarImage,
     };
 
     let action;

x-pack/legacy/plugins/spaces/server/lib/space_schema.ts

@@ -19,4 +19,5 @@ export const spaceSchema = Joi.object({
     .items(Joi.string())
     .default([]),
   _reserved: Joi.boolean(),
+  avatarImage: Joi.string().allow(''),
 }).default();