From e9b20acd48eae409debc06c1c927fadca34b04eb Mon Sep 17 00:00:00 2001
From: Eyo Okon Eyo <eyo.eyo@elastic.co>
Date: Mon, 3 Jun 2024 13:32:04 +0200
Subject: [PATCH] display switch to space only when space is not active space

---
 .../enabled_features/feature_table.tsx        |   8 +-
 .../management/view_space/view_space.tsx      | 139 ++++++++++--------
 2 files changed, 76 insertions(+), 71 deletions(-)

diff --git a/x-pack/plugins/spaces/public/management/edit_space/enabled_features/feature_table.tsx b/x-pack/plugins/spaces/public/management/edit_space/enabled_features/feature_table.tsx
index 19e41b7ca9d03..1fec0ad8d3f2f 100644
--- a/x-pack/plugins/spaces/public/management/edit_space/enabled_features/feature_table.tsx
+++ b/x-pack/plugins/spaces/public/management/edit_space/enabled_features/feature_table.tsx
@@ -256,9 +256,7 @@ export class FeatureTable extends Component<Props, {}> {
     }
 
     updatedSpace.disabledFeatures = disabledFeatures;
-    if (this.props.onChange) {
-      this.props.onChange(updatedSpace);
-    }
+    this.props.onChange?.(updatedSpace);
   };
 
   private getAllFeatureIds = () =>
@@ -287,9 +285,7 @@ export class FeatureTable extends Component<Props, {}> {
       );
     }
 
-    if (this.props.onChange) {
-      this.props.onChange(updatedSpace);
-    }
+    this.props.onChange?.(updatedSpace);
   };
 
   private getCategoryHelpText = (category: AppCategory) => {
diff --git a/x-pack/plugins/spaces/public/management/view_space/view_space.tsx b/x-pack/plugins/spaces/public/management/view_space/view_space.tsx
index f15bae1c36dfe..f6bc90f244675 100644
--- a/x-pack/plugins/spaces/public/management/view_space/view_space.tsx
+++ b/x-pack/plugins/spaces/public/management/view_space/view_space.tsx
@@ -16,12 +16,14 @@ import {
   EuiTab,
   EuiTabs,
   EuiText,
+  EuiTitle,
 } from '@elastic/eui';
 import React, { lazy, Suspense, useEffect, useState } from 'react';
 import type { FC } from 'react';
 
 import type { ApplicationStart, Capabilities, ScopedHistory } from '@kbn/core/public';
 import type { FeaturesPluginStart, KibanaFeature } from '@kbn/features-plugin/public';
+import { FormattedMessage } from '@kbn/i18n-react';
 import { reactRouterNavigate } from '@kbn/kibana-react-plugin/public';
 import type { Role } from '@kbn/security-plugin-types-common';
 
@@ -76,6 +78,7 @@ export const ViewSpacePage: FC<PageProps> = (props) => {
   const [activeSpaceId, setActiveSpaceId] = useState<string | null>(null);
   const selectedTabId = getSelectedTabId(_selectedTabId);
   const [space, setSpace] = useState<Space | null>(null);
+  const [userActiveSpace, setUserActiveSpace] = useState<Space | null>(null);
   const [features, setFeatures] = useState<KibanaFeature[] | null>(null);
   const [roles, setRoles] = useState<Role[]>([]);
   const [isLoadingSpace, setIsLoadingSpace] = useState(true);
@@ -94,27 +97,21 @@ export const ViewSpacePage: FC<PageProps> = (props) => {
     if (!spaceId) {
       return;
     }
-    const getSpace = async () => {
-      const result = await spacesManager.getSpace(spaceId);
-      if (!result) {
-        throw new Error(`Could not get resulting space by id ${spaceId}`);
-      }
-      setSpace(result);
+
+    const getSpaceInfo = async () => {
+      const [activeSpace, currentSpace] = await Promise.all([
+        spacesManager.getActiveSpace(),
+        spacesManager.getSpace(spaceId),
+      ]);
+
+      setSpace(currentSpace);
+      setUserActiveSpace(activeSpace);
       setIsLoadingSpace(false);
     };
 
-    getSpace().catch(handleApiError);
+    getSpaceInfo().catch(handleApiError);
   }, [spaceId, spacesManager]);
 
-  useEffect(() => {
-    const _getFeatures = async () => {
-      const result = await getFeatures();
-      setFeatures(result);
-      setIsLoadingFeatures(false);
-    };
-    _getFeatures().catch(handleApiError);
-  }, [getFeatures]);
-
   useEffect(() => {
     if (spaceId) {
       const getRoles = async () => {
@@ -127,14 +124,25 @@ export const ViewSpacePage: FC<PageProps> = (props) => {
     }
   }, [spaceId, spacesManager]);
 
+  useEffect(() => {
+    const _getFeatures = async () => {
+      const result = await getFeatures();
+      setFeatures(result);
+      setIsLoadingFeatures(false);
+    };
+    _getFeatures().catch(handleApiError);
+  }, [getFeatures]);
+
+  useEffect(() => {
+    if (space) {
+      onLoadSpace?.(space);
+    }
+  }, [onLoadSpace, space]);
+
   if (!space) {
     return null;
   }
 
-  if (onLoadSpace) {
-    onLoadSpace(space);
-  }
-
   if (isLoadingSpace || isLoadingFeatures || isLoadingRoles) {
     return (
       <EuiFlexGroup justifyContent="spaceAround">
@@ -146,27 +154,9 @@ export const ViewSpacePage: FC<PageProps> = (props) => {
   }
 
   const HeaderAvatar = () => {
-    return space.imageUrl != null ? (
-      <Suspense fallback={<EuiLoadingSpinner />}>
-        <LazySpaceAvatar
-          space={{
-            ...space,
-            initials: space.initials ?? 'X',
-            name: undefined,
-          }}
-          size="xl"
-        />
-      </Suspense>
-    ) : (
+    return (
       <Suspense fallback={<EuiLoadingSpinner />}>
-        <LazySpaceAvatar
-          space={{
-            ...space,
-            name: space.name ?? 'Y',
-            imageUrl: undefined,
-          }}
-          size="xl"
-        />
+        <LazySpaceAvatar space={space} size="xl" />
       </Suspense>
     );
   };
@@ -184,7 +174,9 @@ export const ViewSpacePage: FC<PageProps> = (props) => {
           navigateToUrl(href);
         }}
       >
-        <EuiButtonEmpty iconType="gear">Settings</EuiButtonEmpty>
+        <EuiButtonEmpty iconType="gear">
+          <FormattedMessage id="viewSpace.spaceSettingsButton.label" defaultMessage="Settings" />
+        </EuiButtonEmpty>
       </a>
     ) : null;
   };
@@ -201,10 +193,17 @@ export const ViewSpacePage: FC<PageProps> = (props) => {
       `${ENTER_SPACE_PATH}?next=/app/management/kibana/spaces/view/${space.id}`
     );
 
+    if (userActiveSpace?.id === space.id) {
+      return null;
+    }
+
     // use href to force full page reload (needed in order to change spaces)
     return (
       <EuiButton iconType="merge" href={urlToSelectedSpace}>
-        Switch to this space
+        <FormattedMessage
+          id="viewSpace.switchToSpaceButton.label"
+          defaultMessage="Switch to this space"
+        />
       </EuiButton>
     );
   };
@@ -222,13 +221,19 @@ export const ViewSpacePage: FC<PageProps> = (props) => {
             <HeaderAvatar />
           </EuiFlexItem>
           <EuiFlexItem>
-            <h1>{space.name}</h1>
-            <p>
-              <small>
-                {space.description ??
-                  'Organize your saved objects and show related features for creating new content.'}
-              </small>
-            </p>
+            <EuiTitle size="l">
+              <h1>{space.name}</h1>
+            </EuiTitle>
+            <EuiText size="s">
+              <p>
+                {space.description ?? (
+                  <FormattedMessage
+                    id="viewSpace.description"
+                    defaultMessage="Organize your saved objects and show related features for creating new content."
+                  />
+                )}
+              </p>
+            </EuiText>
           </EuiFlexItem>
           <EuiFlexItem grow={false}>
             <EuiFlexGroup alignItems="center">
@@ -244,22 +249,26 @@ export const ViewSpacePage: FC<PageProps> = (props) => {
 
         <EuiSpacer />
 
-        <EuiTabs>
-          {tabs.map((tab, index) => (
-            <EuiTab
-              key={index}
-              isSelected={tab.id === selectedTabId}
-              append={tab.append}
-              {...reactRouterNavigate(history, `/view/${encodeURIComponent(space.id)}/${tab.id}`)}
-            >
-              {tab.name}
-            </EuiTab>
-          ))}
-        </EuiTabs>
-
-        <EuiSpacer />
-
-        {selectedTabContent ?? null}
+        <EuiFlexGroup direction="column">
+          <EuiFlexItem>
+            <EuiTabs>
+              {tabs.map((tab, index) => (
+                <EuiTab
+                  key={index}
+                  isSelected={tab.id === selectedTabId}
+                  append={tab.append}
+                  {...reactRouterNavigate(
+                    history,
+                    `/view/${encodeURIComponent(space.id)}/${tab.id}`
+                  )}
+                >
+                  {tab.name}
+                </EuiTab>
+              ))}
+            </EuiTabs>
+          </EuiFlexItem>
+          <EuiFlexItem>{selectedTabContent ?? null}</EuiFlexItem>
+        </EuiFlexGroup>
       </EuiText>
     </ViewSpaceContextProvider>
   );