[Spaces and Roles] Updates for finalized contents and UX (#193923)

## Summary

Follows #191795

* Minor content updates to Spaces Management
* [spaces grid] More space for "description" column in Spaces Grid
* [create space and edit space] Add "New" badge to Solution View picker
* [create space and edit space] Move avatar section down
* [create space] Remove the edit/update functionality from the Create
Space page
* [create space] Only show the Feature Visibility section if the
selected solution is `classic`
* [edit space] Rearrange the footer icons in the General tab
* [edit space] Show callout when classic is selected by default
* [edit space] Update the action icons shown on hover on the Assigned
Roles table

### Checklist

Delete any items that are not applicable to this PR.

- [X] Any text added follows [EUI's writing
guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses
sentence case text and includes [i18n
support](https://github.com/elastic/kibana/blob/main/packages/kbn-i18n/README.md)
- [ ]
[Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html)
was added for features that require explanation or tutorials
- [x] [Unit or functional
tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)
were updated or added to match the most common scenarios
- [X] This renders correctly on smaller devices using a responsive
layout. (You can test this [in your
browser](https://www.browserstack.com/guide/responsive-testing-on-local-server))
- [X] This was checked for [cross-browser
compatibility](https://www.elastic.co/support/matrix#matrix_browsers)

x-pack/packages/security/ui_components/src/kibana_privilege_table/feature_table.tsx

@@ -160,9 +160,7 @@ export class FeatureTable extends Component<Props, State> {
             <EuiSpacer size="s" />
             {helpText && (
               <>
-                <EuiCallOut iconType="iInCircle" size="s">
-                  {helpText}
-                </EuiCallOut>
+                <EuiCallOut size="s" title={helpText} />
                 <EuiSpacer size="s" />
               </>
             )}
@@ -404,7 +402,7 @@ export class FeatureTable extends Component<Props, State> {
         'xpack.security.management.editRole.featureTable.managementCategoryHelpText',
         {
           defaultMessage:
-            'Access to Stack Management is determined by both Elasticsearch and Kibana privileges, and cannot be explicitly disabled.',
+            'Additional Stack Management permissions can be found outside of this menu, in index and cluster privileges.',
         }
       );
     }

x-pack/plugins/spaces/public/management/components/customize_avatar/customize_avatar.tsx

@@ -0,0 +1,106 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { EuiDescribedFormGroup, EuiLoadingSpinner, EuiTitle } from '@elastic/eui';
+import React, { Component, lazy, Suspense } from 'react';
+
+import { i18n } from '@kbn/i18n';
+import { FormattedMessage } from '@kbn/i18n-react';
+
+import { CustomizeSpaceAvatar } from './customize_space_avatar';
+import { getSpaceAvatarComponent } from '../../../space_avatar';
+import type { SpaceValidator } from '../../lib';
+import type { CustomizeSpaceFormValues } from '../../types';
+import { SectionPanel } from '../section_panel';
+
+// No need to wrap LazySpaceAvatar in an error boundary, because it is one of the first chunks loaded when opening Kibana.
+const LazySpaceAvatar = lazy(() =>
+  getSpaceAvatarComponent().then((component) => ({ default: component }))
+);
+
+interface Props {
+  validator: SpaceValidator;
+  space: CustomizeSpaceFormValues;
+  onChange: (space: CustomizeSpaceFormValues) => void;
+  title?: string;
+}
+
+interface State {
+  customizingAvatar: boolean;
+  usingCustomIdentifier: boolean;
+}
+
+export class CustomizeAvatar extends Component<Props, State> {
+  public state = {
+    customizingAvatar: false,
+    usingCustomIdentifier: false,
+  };
+
+  public render() {
+    const { validator, space } = this.props;
+
+    return (
+      <SectionPanel dataTestSubj="customizeAvatarSection">
+        <EuiDescribedFormGroup
+          title={
+            <EuiTitle size="xs">
+              <h3>
+                <FormattedMessage
+                  id="xpack.spaces.management.manageSpacePage.avatarTitle"
+                  defaultMessage="Define an avatar"
+                />
+              </h3>
+            </EuiTitle>
+          }
+          description={
+            <>
+              <p>
+                {i18n.translate('xpack.spaces.management.manageSpacePage.avatarDescription', {
+                  defaultMessage: 'Choose how your space avatar appears across Kibana.',
+                })}
+              </p>
+              {space.avatarType === 'image' ? (
+                <Suspense fallback={<EuiLoadingSpinner />}>
+                  <LazySpaceAvatar
+                    space={{
+                      ...space,
+                      initials: '?',
+                      name: undefined,
+                    }}
+                    size="xl"
+                  />
+                </Suspense>
+              ) : (
+                <Suspense fallback={<EuiLoadingSpinner />}>
+                  <LazySpaceAvatar
+                    space={{
+                      name: '?',
+                      ...space,
+                      imageUrl: undefined,
+                    }}
+                    size="xl"
+                  />
+                </Suspense>
+              )}
+            </>
+          }
+          fullWidth
+        >
+          <CustomizeSpaceAvatar
+            space={this.props.space}
+            onChange={this.onAvatarChange}
+            validator={validator}
+          />
+        </EuiDescribedFormGroup>
+      </SectionPanel>
+    );
+  }
+
+  public onAvatarChange = (space: CustomizeSpaceFormValues) => {
+    this.props.onChange(space);
+  };
+}

x-pack/plugins/spaces/public/management/components/customize_avatar/index.ts

@@ -0,0 +1,8 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+export { CustomizeAvatar } from './customize_avatar';

x-pack/plugins/spaces/public/management/components/customize_space/customize_space.tsx

@@ -9,29 +9,22 @@ import {
   EuiDescribedFormGroup,
   EuiFieldText,
   EuiFormRow,
-  EuiLoadingSpinner,
   EuiText,
   EuiTextArea,
   EuiTitle,
 } from '@elastic/eui';
 import type { ChangeEvent } from 'react';
-import React, { Component, lazy, Suspense } from 'react';
+import React, { Component } from 'react';
 
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n-react';
 
-import { CustomizeSpaceAvatar } from './customize_space_avatar';
-import { getSpaceAvatarComponent, getSpaceColor, getSpaceInitials } from '../../../space_avatar';
+import { getSpaceColor, getSpaceInitials } from '../../../space_avatar';
 import type { SpaceValidator } from '../../lib';
 import { toSpaceIdentifier } from '../../lib';
 import type { CustomizeSpaceFormValues } from '../../types';
 import { SectionPanel } from '../section_panel';
 
-// No need to wrap LazySpaceAvatar in an error boundary, because it is one of the first chunks loaded when opening Kibana.
-const LazySpaceAvatar = lazy(() =>
-  getSpaceAvatarComponent().then((component) => ({ default: component }))
-);
-
 interface Props {
   validator: SpaceValidator;
   space: CustomizeSpaceFormValues;
@@ -112,7 +105,7 @@ export class CustomizeSpace extends Component<Props, State> {
             helpText={i18n.translate(
               'xpack.spaces.management.manageSpacePage.spaceDescriptionHelpText',
               {
-                defaultMessage: 'The description appears on the space selection screen.',
+                defaultMessage: 'Appears on the space selection screen and spaces list.',
               }
             )}
             {...validator.validateSpaceDescription(this.props.space)}
@@ -156,58 +149,6 @@ export class CustomizeSpace extends Component<Props, State> {
             </EuiFormRow>
           )}
         </EuiDescribedFormGroup>
-
-        <EuiDescribedFormGroup
-          title={
-            <EuiTitle size="xs">
-              <h3>
-                <FormattedMessage
-                  id="xpack.spaces.management.manageSpacePage.avatarTitle"
-                  defaultMessage="Create an avatar"
-                />
-              </h3>
-            </EuiTitle>
-          }
-          description={
-            <>
-              <p>
-                {i18n.translate('xpack.spaces.management.manageSpacePage.avatarDescription', {
-                  defaultMessage: 'Choose how your space avatar appears across Kibana.',
-                })}
-              </p>
-              {space.avatarType === 'image' ? (
-                <Suspense fallback={<EuiLoadingSpinner />}>
-                  <LazySpaceAvatar
-                    space={{
-                      ...space,
-                      initials: '?',
-                      name: undefined,
-                    }}
-                    size="xl"
-                  />
-                </Suspense>
-              ) : (
-                <Suspense fallback={<EuiLoadingSpinner />}>
-                  <LazySpaceAvatar
-                    space={{
-                      name: '?',
-                      ...space,
-                      imageUrl: undefined,
-                    }}
-                    size="xl"
-                  />
-                </Suspense>
-              )}
-            </>
-          }
-          fullWidth
-        >
-          <CustomizeSpaceAvatar
-            space={this.props.space}
-            onChange={this.onAvatarChange}
-            validator={validator}
-          />
-        </EuiDescribedFormGroup>
       </SectionPanel>
     );
   }