marking optional fields optional

src/plugins/dashboard/public/dashboard_container/embeddable/api/overlays/save_modal.tsx

@@ -9,7 +9,7 @@
 import { i18n } from '@kbn/i18n';
 import React, { Fragment } from 'react';
 import { FormattedMessage } from '@kbn/i18n-react';
-import { EuiFormRow, EuiTextArea, EuiSwitch } from '@elastic/eui';
+import { EuiFormRow, EuiSwitch } from '@elastic/eui';
 import { SavedObjectSaveModal } from '@kbn/saved-objects-plugin/public';
 
 import type { DashboardSaveOptions } from '../../../types';
@@ -39,14 +39,12 @@ interface Props {
 }
 
 interface State {
-  description: string;
   tags: string[];
   timeRestore: boolean;
 }
 
 export class DashboardSaveModal extends React.Component<Props, State> {
   state: State = {
-    description: this.props.description,
     timeRestore: this.props.timeRestore,
     tags: this.props.tags ?? [],
   };
@@ -57,18 +55,20 @@ export class DashboardSaveModal extends React.Component<Props, State> {
 
   saveDashboard = ({
     newTitle,
+    newDescription,
     newCopyOnSave,
     isTitleDuplicateConfirmed,
     onTitleDuplicate,
   }: {
     newTitle: string;
+    newDescription: string;
     newCopyOnSave: boolean;
     isTitleDuplicateConfirmed: boolean;
     onTitleDuplicate: () => void;
   }) => {
     this.props.onSave({
       newTitle,
-      newDescription: this.state.description,
+      newDescription,
       newCopyOnSave,
       newTimeRestore: this.state.timeRestore,
       isTitleDuplicateConfirmed,
@@ -77,12 +77,6 @@ export class DashboardSaveModal extends React.Component<Props, State> {
     });
   };
 
-  onDescriptionChange = (event: any) => {
-    this.setState({
-      description: event.target.value,
-    });
-  };
-
   onTimeRestoreChange = (event: any) => {
     this.setState({
       timeRestore: event.target.checked,
@@ -102,28 +96,12 @@ export class DashboardSaveModal extends React.Component<Props, State> {
             tags,
           });
         }}
+        markOptional
       />
     ) : undefined;
 
     return (
       <Fragment>
-        <EuiFormRow
-          label={
-            <FormattedMessage
-              id="dashboard.topNav.saveModal.descriptionFormRowLabel"
-              defaultMessage="Description"
-            />
-          }
-          fullWidth
-        >
-          <EuiTextArea
-            fullWidth
-            data-test-subj="dashboardDescription"
-            value={this.state.description}
-            onChange={this.onDescriptionChange}
-          />
-        </EuiFormRow>
-
         {tagSelector}
 
         <EuiFormRow
@@ -156,13 +134,14 @@ export class DashboardSaveModal extends React.Component<Props, State> {
         onSave={this.saveDashboard}
         onClose={this.props.onClose}
         title={this.props.title}
+        description={this.props.description}
+        showDescription
         showCopyOnSave={this.props.showCopyOnSave}
         initialCopyOnSave={this.props.showCopyOnSave}
         objectType={i18n.translate('dashboard.topNav.saveModal.objectType', {
           defaultMessage: 'dashboard',
         })}
         options={this.renderDashboardSaveOptions()}
-        showDescription={false}
       />
     );
   }

src/plugins/saved_objects/public/save_modal/saved_object_save_modal.tsx

@@ -194,6 +194,11 @@ export class SavedObjectSaveModal extends React.Component<Props, SaveModalState>
     return (
       <EuiFormRow
         fullWidth
+        labelAppend={
+          <EuiText size="xs" color="subdued">
+            <FormattedMessage id="savedObjects.saveModal.optional" defaultMessage="Optional" />
+          </EuiText>
+        }
         label={
           <FormattedMessage
             id="savedObjects.saveModal.descriptionLabel"

src/plugins/saved_objects_tagging_oss/public/api.ts

@@ -268,6 +268,11 @@ export type SavedObjectSaveModalTagSelectorComponentProps = EuiComboBoxProps<
    * tags selection callback
    */
   onTagsSelected: (ids: string[]) => void;
+
+  /**
+   * Add "Optional" to the label
+   */
+  markOptional?: boolean;
 };
 
 /**

src/plugins/visualizations/public/visualize_app/utils/get_top_nav_config.tsx

@@ -544,6 +544,7 @@ export const getTopNavConfig = (
                     onTagsSelected={(newSelection) => {
                       selectedTags = newSelection;
                     }}
+                    markOptional
                   />
                 );
               }

x-pack/plugins/lens/public/app_plugin/tags_saved_object_save_modal_dashboard_wrapper.tsx

@@ -43,6 +43,7 @@ export const TagEnhancedSavedObjectSaveModalDashboard: FC<
         <savedObjectsTagging.ui.components.SavedObjectSaveModalTagSelector
           initialSelection={initialTags}
           onTagsSelected={setSelectedTags}
+          markOptional
         />
       ) : undefined,
     [savedObjectsTagging, initialTags]

x-pack/plugins/lens/public/visualizations/xy/annotations/actions/save_action.tsx

@@ -84,6 +84,7 @@ export const SaveModal = ({
           <savedObjectsTagging.ui.components.SavedObjectSaveModalTagSelector
             initialSelection={selectedTags}
             onTagsSelected={setSelectedTags}
+            markOptional
           />
         ) : undefined
       }

x-pack/plugins/maps/public/routes/map_page/top_nav_config.tsx

@@ -161,6 +161,7 @@ export function getTopNavConfig({
           <savedObjectsTagging.ui.components.SavedObjectSaveModalTagSelector
             initialSelection={selectedTags}
             onTagsSelected={onTagsSelected}
+            markOptional
           />
         ) : undefined;
 

x-pack/plugins/saved_objects_tagging/public/components/connected/saved_object_save_modal_tag_selector.tsx

@@ -7,7 +7,7 @@
 
 import React, { FC, useCallback, useState } from 'react';
 import useObservable from 'react-use/lib/useObservable';
-import { EuiFormRow } from '@elastic/eui';
+import { EuiFormRow, EuiText } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n-react';
 import { SavedObjectSaveModalTagSelectorComponentProps } from '@kbn/saved-objects-tagging-oss-plugin/public';
 import { TagsCapabilities } from '../../../common';
@@ -29,6 +29,7 @@ export const getConnectedSavedObjectModalTagSelectorComponent = ({
   return ({
     initialSelection,
     onTagsSelected: notifySelectionChange,
+    markOptional,
     ...rest
   }: SavedObjectSaveModalTagSelectorComponentProps) => {
     const tags = useObservable(cache.getState$(), cache.getState());
@@ -51,6 +52,16 @@ export const getConnectedSavedObjectModalTagSelectorComponent = ({
             defaultMessage="Tags"
           />
         }
+        labelAppend={
+          markOptional && (
+            <EuiText color="subdued" size="xs">
+              <FormattedMessage
+                id="xpack.savedObjectsTagging.uiApi.saveModal.optional"
+                defaultMessage="Optional"
+              />
+            </EuiText>
+          )
+        }
       >
         <TagSelector
           selected={selected}