Design feedback

tsullivan · Jul 9, 2024 · e5f24ac · e5f24ac
1 parent b92d1e5
commit e5f24ac
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 37 deletions.
diff --git a/x-pack/plugins/spaces/public/management/spaces_grid/spaces_grid_page.tsx b/x-pack/plugins/spaces/public/management/spaces_grid/spaces_grid_page.tsx
@@ -6,9 +6,12 @@
  */
 
 import {
+  EuiBadge,
   type EuiBasicTableColumn,
   EuiButton,
   EuiCallOut,
+  EuiFlexGroup,
+  EuiFlexItem,
   EuiInMemoryTable,
   EuiLink,
   EuiLoadingSpinner,
@@ -278,12 +281,25 @@ export class SpacesGridPage extends Component<Props, State> {
         }),
         sortable: true,
         render: (value: string, rowRecord) => (
-          <EuiLink
-            {...reactRouterNavigate(this.props.history, this.getViewSpacePath(rowRecord))}
-            data-test-subj={`${rowRecord.id}-hyperlink`}
-          >
-            {value}
-          </EuiLink>
+          <EuiFlexGroup responsive={false} alignItems="center" gutterSize="m">
+            <EuiFlexItem grow={false}>
+              <EuiLink
+                {...reactRouterNavigate(this.props.history, this.getViewSpacePath(rowRecord))}
+                data-test-subj={`${rowRecord.id}-hyperlink`}
+              >
+                {value}
+              </EuiLink>
+            </EuiFlexItem>
+            {this.state.activeSpace?.name === rowRecord.name && (
+              <EuiFlexItem grow={false}>
+                <EuiBadge color="primary">
+                  {i18n.translate('xpack.spaces.management.spacesGridPage.currentSpaceMarkerText', {
+                    defaultMessage: 'current',
+                  })}
+                </EuiBadge>
+              </EuiFlexItem>
+            )}
+          </EuiFlexGroup>
         ),
       },
       {

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
@@ -201,32 +201,6 @@ export const ViewSpacePage: FC<PageProps> = (props) => {
     ) : null;
   };
 
-  const SwitchButton = () => {
-    if (userActiveSpace?.id === space.id) {
-      return null;
-    }
-
-    const { serverBasePath } = props;
-
-    // use href to force full page reload (needed in order to change spaces)
-    return (
-      <EuiButton
-        iconType="merge"
-        href={addSpaceIdToPath(
-          serverBasePath,
-          space.id,
-          `${ENTER_SPACE_PATH}?next=/app/management/kibana/spaces/view/${space.id}`
-        )}
-        data-test-subj="spaceSwitcherButton"
-      >
-        <FormattedMessage
-          id="xpack.spaces.management.spaceDetails.space.switchToSpaceButton.label"
-          defaultMessage="Switch to this space"
-        />
-      </EuiButton>
-    );
-  };
-
   return (
     <ViewSpaceContextProvider
       getRolesAPIClient={getRolesAPIClient}
@@ -236,7 +210,7 @@ export const ViewSpacePage: FC<PageProps> = (props) => {
       getUrlForApp={getUrlForApp}
     >
       <EuiText>
-        <EuiFlexGroup data-test-subj="spaceDetailsHeader">
+        <EuiFlexGroup data-test-subj="spaceDetailsHeader" alignItems="flexStart">
           <EuiFlexItem grow={false}>
             <HeaderAvatar />
           </EuiFlexItem>
@@ -280,13 +254,28 @@ export const ViewSpacePage: FC<PageProps> = (props) => {
             </EuiText>
           </EuiFlexItem>
           <EuiFlexItem grow={false}>
-            <EuiFlexGroup alignItems="center">
+            <EuiFlexGroup justifyContent="flexEnd" responsive={false}>
               <EuiFlexItem>
                 <SettingsButton />
               </EuiFlexItem>
-              <EuiFlexItem>
-                <SwitchButton />
-              </EuiFlexItem>
+              {userActiveSpace?.id !== space.id ? (
+                <EuiFlexItem>
+                  <EuiButton
+                    iconType="merge"
+                    href={addSpaceIdToPath(
+                      props.serverBasePath,
+                      space.id,
+                      `${ENTER_SPACE_PATH}?next=/app/management/kibana/spaces/view/${space.id}`
+                    )}
+                    data-test-subj="spaceSwitcherButton"
+                  >
+                    <FormattedMessage
+                      id="xpack.spaces.management.spaceDetails.space.switchToSpaceButton.label"
+                      defaultMessage="Switch to this space"
+                    />
+                  </EuiButton>
+                </EuiFlexItem>
+              ) : null}
             </EuiFlexGroup>
           </EuiFlexItem>
         </EuiFlexGroup>