[Spaces] Create Space: show features picker only when solution not "c…

…lassic" (#191528)

## Summary

Users may only choose visible features of a Space when their solution
view is set to "classic" (or empty).

### Checklist

Delete any items that are not applicable to this PR.

- [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] Any UI touched in this PR is usable by keyboard only (learn more
about [keyboard accessibility](https://webaim.org/techniques/keyboard/))
- [x] Any UI touched in this PR does not create any new axe failures
(run axe in browser:
[FF](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/),
[Chrome](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US))
- [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/plugins/spaces/public/management/edit_space/manage_space_page.test.tsx

@@ -237,6 +237,51 @@ describe('ManageSpacePage', () => {
     expect(wrapper.find(EnabledFeatures)).toHaveLength(0);
   });
 
+  it('hides feature visibility controls when solution view is not "classic"', async () => {
+    const spacesManager = spacesManagerMock.create();
+
+    const wrapper = mountWithIntl(
+      <ManageSpacePage
+        spacesManager={spacesManager}
+        getFeatures={featuresStart.getFeatures}
+        notifications={notificationServiceMock.createStartContract()}
+        history={history}
+        capabilities={{
+          navLinks: {},
+          management: {},
+          catalogue: {},
+          spaces: { manage: true },
+        }}
+        eventTracker={eventTracker}
+        allowFeatureVisibility
+        allowSolutionVisibility
+      />
+    );
+
+    await waitFor(async () => {
+      await Promise.resolve();
+
+      wrapper.update();
+
+      // default for create space: expect visible features table to exist
+      expect(wrapper.find(EnabledFeatures)).toHaveLength(1);
+    });
+
+    await waitFor(() => {
+      // switch to observability view
+      updateSpace(wrapper, false, 'oblt');
+      // expect visible features table to not exist
+      expect(wrapper.find(EnabledFeatures)).toHaveLength(0);
+    });
+
+    await waitFor(() => {
+      // switch to classic
+      updateSpace(wrapper, false, 'classic');
+      // expect visible features table to exist again
+      expect(wrapper.find(EnabledFeatures)).toHaveLength(1);
+    });
+  });
+
   it('allows a space to be updated', async () => {
     const spaceToUpdate = {
       id: 'existing-space',

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

@@ -66,6 +66,7 @@ interface State {
   features: KibanaFeature[];
   originalSpace?: Partial<Space>;
   showAlteringActiveSpaceDialog: boolean;
+  showVisibleFeaturesPicker: boolean;
   haveDisabledFeaturesChanged: boolean;
   hasSolutionViewChanged: boolean;
   isLoading: boolean;
@@ -85,6 +86,7 @@ export class ManageSpacePage extends Component<Props, State> {
     this.state = {
       isLoading: true,
       showAlteringActiveSpaceDialog: false,
+      showVisibleFeaturesPicker: !!props.allowFeatureVisibility,
       saveInProgress: false,
       space: {
         color: getSpaceColor({}),
@@ -203,7 +205,7 @@ export class ManageSpacePage extends Component<Props, State> {
             <EuiSpacer size="l" />
             <SolutionView
               space={this.state.space}
-              onChange={this.onSpaceChange}
+              onChange={this.onSolutionViewChange}
               sectionTitle={i18n.translate(
                 'xpack.spaces.management.manageSpacePage.navigationTitle',
                 { defaultMessage: 'Navigation' }
@@ -212,7 +214,7 @@ export class ManageSpacePage extends Component<Props, State> {
           </>
         )}
 
-        {this.props.allowFeatureVisibility && (
+        {this.state.showVisibleFeaturesPicker && (
           <>
             <EuiSpacer />
             <EnabledFeatures
@@ -348,6 +350,17 @@ export class ManageSpacePage extends Component<Props, State> {
     return null;
   };
 
+  private onSolutionViewChange = (space: Partial<Space>) => {
+    if (this.props.allowFeatureVisibility) {
+      let showVisibleFeaturesPicker = false;
+      if (space.solution === 'classic' || space.solution == null) {
+        showVisibleFeaturesPicker = true;
+      }
+      this.setState((state) => ({ ...state, showVisibleFeaturesPicker }));
+    }
+    this.onSpaceChange(space);
+  };
+
   public onSpaceChange = (updatedSpace: FormValues) => {
     this.setState({
       space: updatedSpace,