From 972a2f9509568d8d1831abe5002fd66a1eaa83d0 Mon Sep 17 00:00:00 2001
From: Thom Heymann <thom.heymann@elastic.co>
Date: Mon, 19 Jul 2021 10:29:10 +0100
Subject: [PATCH] Added suggestions from code review

---
 .../__snapshots__/customize_space.test.tsx.snap    | 13 ++++++++++++-
 .../edit_space/customize_space/customize_space.tsx | 14 ++++++++++----
 .../customize_space/customize_space_avatar.tsx     |  7 +++++--
 3 files changed, 27 insertions(+), 7 deletions(-)

diff --git a/x-pack/plugins/spaces/public/management/edit_space/customize_space/__snapshots__/customize_space.test.tsx.snap b/x-pack/plugins/spaces/public/management/edit_space/customize_space/__snapshots__/customize_space.test.tsx.snap
index 4e436bb9a4b8fb..51943c7581273b 100644
--- a/x-pack/plugins/spaces/public/management/edit_space/customize_space/__snapshots__/customize_space.test.tsx.snap
+++ b/x-pack/plugins/spaces/public/management/edit_space/customize_space/__snapshots__/customize_space.test.tsx.snap
@@ -51,7 +51,18 @@ exports[`renders correctly 1`] = `
       helpText="The description appears on the space selection screen."
       isInvalid={false}
       label="Description"
-      labelAppend="Optional"
+      labelAppend={
+        <EuiText
+          color="subdued"
+          size="xs"
+        >
+          <FormattedMessage
+            defaultMessage="Optional"
+            id="xpack.spaces.management.manageSpacePage.optionalLabel"
+            values={Object {}}
+          />
+        </EuiText>
+      }
       labelType="label"
     >
       <EuiTextArea
diff --git a/x-pack/plugins/spaces/public/management/edit_space/customize_space/customize_space.tsx b/x-pack/plugins/spaces/public/management/edit_space/customize_space/customize_space.tsx
index eaf544523ca893..27de0e012faf94 100644
--- a/x-pack/plugins/spaces/public/management/edit_space/customize_space/customize_space.tsx
+++ b/x-pack/plugins/spaces/public/management/edit_space/customize_space/customize_space.tsx
@@ -10,6 +10,7 @@ import {
   EuiFieldText,
   EuiFormRow,
   EuiLoadingSpinner,
+  EuiText,
   EuiTextArea,
   EuiTitle,
 } from '@elastic/eui';
@@ -102,9 +103,14 @@ export class CustomizeSpace extends Component<Props, State> {
                 defaultMessage: 'Description',
               }
             )}
-            labelAppend={i18n.translate('xpack.spaces.management.manageSpacePage.optionalLabel', {
-              defaultMessage: 'Optional',
-            })}
+            labelAppend={
+              <EuiText color="subdued" size="xs">
+                <FormattedMessage
+                  id="xpack.spaces.management.manageSpacePage.optionalLabel"
+                  defaultMessage="Optional"
+                />
+              </EuiText>
+            }
             helpText={i18n.translate(
               'xpack.spaces.management.manageSpacePage.spaceDescriptionHelpText',
               {
@@ -176,7 +182,7 @@ export class CustomizeSpace extends Component<Props, State> {
                   <LazySpaceAvatar
                     space={{
                       ...space,
-                      initials: undefined,
+                      initials: '?',
                       name: undefined,
                     }}
                     size="xl"
diff --git a/x-pack/plugins/spaces/public/management/edit_space/customize_space/customize_space_avatar.tsx b/x-pack/plugins/spaces/public/management/edit_space/customize_space/customize_space_avatar.tsx
index 83688715c8ce27..827ef592459f74 100644
--- a/x-pack/plugins/spaces/public/management/edit_space/customize_space/customize_space_avatar.tsx
+++ b/x-pack/plugins/spaces/public/management/edit_space/customize_space/customize_space_avatar.tsx
@@ -29,7 +29,7 @@ interface Props {
 }
 
 export class CustomizeSpaceAvatar extends Component<Props> {
-  private storeImageChanges(imageUrl: string) {
+  private storeImageChanges(imageUrl: string | undefined) {
     this.props.onChange({
       ...this.props.space,
       imageUrl,
@@ -80,7 +80,10 @@ export class CustomizeSpaceAvatar extends Component<Props> {
   };
 
   private onFileUpload = (files: FileList | null) => {
-    if (files == null) return;
+    if (files == null || files.length === 0) {
+      this.storeImageChanges(undefined);
+      return;
+    }
     const file = files[0];
     if (imageTypes.indexOf(file.type) > -1) {
       encode(file).then((dataurl: string) => this.handleImageUpload(dataurl));