[Spaces] Remove “identifier” column from Spaces listing (#201290)

## Summary Addresses: elastic/kibana-team#1241 Closes: #195590 ### Changes 1. Remove the "identifier" column from the Spaces grid listing 1. Add a readonly text field to the Space edit form to allow users to see the identifier 2. Remove granular width adjustments from the "Description" and "Solution view" columns to avoid header titles from showing ellipses ### Screenshots **Spaces listing, before:** <img width="2102" alt="image" src="https://github.com/user-attachments/assets/7bc5a8d1-d9c2-4e03-af9b-1bf9025f2d70"> **Spaces listing, after:** <img width="2102" alt="image" src="https://github.com/user-attachments/assets/6f69b2cf-c381-43be-a6fd-e294f58b3f15"> **Spaces edit form, before** <img width="2102" alt="image" src="https://github.com/user-attachments/assets/a622695f-400c-436c-9cbd-c110d83d3a53"> **Spaces edit form, after** <img width="2102" alt="image" src="https://github.com/user-attachments/assets/d5f2fd3f-ec4b-49c8-aece-a5b10dec37b2">
elastic · Nov 27, 2024 · 7a2edb4 · 7a2edb4
1 parent 316efc7
commit 7a2edb4
Show file tree

Hide file tree

Showing 6 changed files with 28 additions and 45 deletions.
diff --git a/.../public/management/components/customize_space/__snapshots__/customize_space.test.tsx.snap b/.../public/management/components/customize_space/__snapshots__/customize_space.test.tsx.snap
diff --git a/x-pack/plugins/spaces/public/management/components/customize_space/customize_space.tsx b/x-pack/plugins/spaces/public/management/components/customize_space/customize_space.tsx
@@ -122,32 +122,31 @@ export class CustomizeSpace extends Component<Props, State> {
             />
           </EuiFormRow>
 
-          {editingExistingSpace ? null : (
-            <EuiFormRow
-              label={
-                <FormattedMessage
-                  id="xpack.spaces.management.spaceIdentifier.urlIdentifierTitle"
-                  defaultMessage="URL identifier"
-                />
-              }
-              helpText={
-                <FormattedMessage
-                  id="xpack.spaces.management.spaceIdentifier.kibanaURLForSpaceIdentifierDescription"
-                  defaultMessage="You can't change the URL identifier once created."
-                />
-              }
-              {...this.props.validator.validateURLIdentifier(this.props.space)}
-              fullWidth
-            >
-              <EuiFieldText
-                data-test-subj="spaceURLDisplay"
-                value={this.props.space.id ?? ''}
-                onChange={this.onSpaceIdentifierChange}
-                isInvalid={this.props.validator.validateURLIdentifier(this.props.space).isInvalid}
-                fullWidth
+          <EuiFormRow
+            label={
+              <FormattedMessage
+                id="xpack.spaces.management.spaceIdentifier.urlIdentifierTitle"
+                defaultMessage="URL identifier"
               />
-            </EuiFormRow>
-          )}
+            }
+            helpText={
+              <FormattedMessage
+                id="xpack.spaces.management.spaceIdentifier.kibanaURLForSpaceIdentifierDescription"
+                defaultMessage="You can't change the URL identifier once created."
+              />
+            }
+            {...this.props.validator.validateURLIdentifier(this.props.space)}
+            fullWidth
+          >
+            <EuiFieldText
+              data-test-subj="spaceURLDisplay"
+              value={this.props.space.id ?? ''}
+              onChange={this.onSpaceIdentifierChange}
+              isInvalid={this.props.validator.validateURLIdentifier(this.props.space).isInvalid}
+              disabled={editingExistingSpace}
+              fullWidth
+            />
+          </EuiFormRow>
         </EuiDescribedFormGroup>
       </SectionPanel>
     );

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
@@ -34,7 +34,7 @@ import { reactRouterNavigate } from '@kbn/kibana-react-plugin/public';
 
 import { addSpaceIdToPath, type Space } from '../../../common';
 import { isReservedSpace } from '../../../common';
-import { DEFAULT_SPACE_ID, ENTER_SPACE_PATH } from '../../../common/constants';
+import { ENTER_SPACE_PATH } from '../../../common/constants';
 import { getSpacesFeatureDescription } from '../../constants';
 import { getSpaceAvatarComponent } from '../../space_avatar';
 import { SpaceSolutionBadge } from '../../space_solution_badge';
@@ -317,24 +317,9 @@ export class SpacesGridPage extends Component<Props, State> {
         }),
         sortable: true,
         truncateText: true,
-        width: '40%',
       },
     ];
 
-    config.push({
-      field: 'id',
-      name: i18n.translate('xpack.spaces.management.spacesGridPage.identifierColumnName', {
-        defaultMessage: 'Identifier',
-      }),
-      sortable: true,
-      render(id: string) {
-        if (id === DEFAULT_SPACE_ID) {
-          return '';
-        }
-        return id;
-      },
-    });
-
     if (this.props.allowSolutionVisibility) {
       config.push({
         field: 'solution',
@@ -345,7 +330,7 @@ export class SpacesGridPage extends Component<Props, State> {
         render: (solution: Space['solution'], record: Space) => (
           <SpaceSolutionBadge solution={solution} data-test-subj={`${record.id}-solution`} />
         ),
-        width: '10%',
+        width: '18%',
       });
     }
 
@@ -431,6 +416,7 @@ export class SpacesGridPage extends Component<Props, State> {
           'data-test-subj': (rowRecord) => `${rowRecord.id}-deleteSpace`,
         },
       ],
+      width: '18%',
     });
 
     return config;

diff --git a/x-pack/plugins/translations/translations/fr-FR.json b/x-pack/plugins/translations/translations/fr-FR.json
@@ -44873,7 +44873,6 @@
     "xpack.spaces.management.spacesGridPage.editSpaceActionDescription": "Modifier {spaceName}.",
     "xpack.spaces.management.spacesGridPage.editSpaceActionName": "Modifier",
     "xpack.spaces.management.spacesGridPage.errorTitle": "Erreur lors du chargement des espaces",
-    "xpack.spaces.management.spacesGridPage.identifierColumnName": "Identificateur",
     "xpack.spaces.management.spacesGridPage.loadingTitle": "chargement…",
     "xpack.spaces.management.spacesGridPage.searchPlaceholder": "Recherche",
     "xpack.spaces.management.spacesGridPage.solutionColumnName": "Afficher la solution",

diff --git a/x-pack/plugins/translations/translations/ja-JP.json b/x-pack/plugins/translations/translations/ja-JP.json
@@ -44837,7 +44837,6 @@
     "xpack.spaces.management.spacesGridPage.editSpaceActionDescription": "{spaceName} を編集。",
     "xpack.spaces.management.spacesGridPage.editSpaceActionName": "編集",
     "xpack.spaces.management.spacesGridPage.errorTitle": "スペースの読み込みエラー",
-    "xpack.spaces.management.spacesGridPage.identifierColumnName": "識別子",
     "xpack.spaces.management.spacesGridPage.loadingTitle": "読み込み中…",
     "xpack.spaces.management.spacesGridPage.searchPlaceholder": "検索",
     "xpack.spaces.management.spacesGridPage.solutionColumnName": "ソリューションビュー",

diff --git a/x-pack/plugins/translations/translations/zh-CN.json b/x-pack/plugins/translations/translations/zh-CN.json
@@ -44147,7 +44147,6 @@
     "xpack.spaces.management.spacesGridPage.editSpaceActionDescription": "编辑 {spaceName}。",
     "xpack.spaces.management.spacesGridPage.editSpaceActionName": "编辑",
     "xpack.spaces.management.spacesGridPage.errorTitle": "加载工作区时出错",
-    "xpack.spaces.management.spacesGridPage.identifierColumnName": "标识符",
     "xpack.spaces.management.spacesGridPage.loadingTitle": "正在加载……",
     "xpack.spaces.management.spacesGridPage.searchPlaceholder": "搜索",
     "xpack.spaces.management.spacesGridPage.solutionColumnName": "解决方案视图",