From d32206ad7e5bb1cb52ecf57d9cebd91a3f897f78 Mon Sep 17 00:00:00 2001
From: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
Date: Fri, 29 Nov 2024 23:20:56 +1100
Subject: [PATCH] [8.x] [ResponseOps][Cases]Issues with List Display on
 Different Viewports (#201785) (#202271)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

# Backport

This will backport the following commits from `main` to `8.x`:
- [[ResponseOps][Cases]Issues with List Display on Different Viewports
(#201785)](https://github.com/elastic/kibana/pull/201785)

<!--- Backport version: 9.4.3 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT [{"author":{"name":"Georgiana-Andreea
Onoleață","email":"georgiana.onoleata@elastic.co"},"sourceCommit":{"committedDate":"2024-11-29T10:25:40Z","message":"[ResponseOps][Cases]Issues
with List Display on Different Viewports (#201785)\n\nCloses
https://github.com/elastic/kibana/issues/169196\r\n\r\n##
Summary\r\n\r\n- The columns 'created at', 'updated at', 'closed at',
'severity', and\r\n'external incident' were missing the 'width'
property, resulting in a\r\ndisplay issue where these columns appeared
squeezed on screen\r\nresolutions below 1450px.\r\n- To address this,
the 'width' properties for these columns have been\r\nadded and adjusted
to ensure proper
display\r\n\r\n\r\nhttps://github.com/user-attachments/assets/b5d6735e-49b8-4b35-9648-a1ea1b30e1ef","sha":"f3369930425abc93bb09964029b1ebe7bb516e7a","branchLabelMapping":{"^v9.0.0$":"main","^v8.18.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["bug","release_note:skip","Team:ResponseOps","v9.0.0","backport:prev-minor","v8.17.0"],"title":"[ResponseOps][Cases]Issues
with List Display on Different
Viewports","number":201785,"url":"https://github.com/elastic/kibana/pull/201785","mergeCommit":{"message":"[ResponseOps][Cases]Issues
with List Display on Different Viewports (#201785)\n\nCloses
https://github.com/elastic/kibana/issues/169196\r\n\r\n##
Summary\r\n\r\n- The columns 'created at', 'updated at', 'closed at',
'severity', and\r\n'external incident' were missing the 'width'
property, resulting in a\r\ndisplay issue where these columns appeared
squeezed on screen\r\nresolutions below 1450px.\r\n- To address this,
the 'width' properties for these columns have been\r\nadded and adjusted
to ensure proper
display\r\n\r\n\r\nhttps://github.com/user-attachments/assets/b5d6735e-49b8-4b35-9648-a1ea1b30e1ef","sha":"f3369930425abc93bb09964029b1ebe7bb516e7a"}},"sourceBranch":"main","suggestedTargetBranches":["8.17"],"targetPullRequestStates":[{"branch":"main","label":"v9.0.0","branchLabelMappingKey":"^v9.0.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/201785","number":201785,"mergeCommit":{"message":"[ResponseOps][Cases]Issues
with List Display on Different Viewports (#201785)\n\nCloses
https://github.com/elastic/kibana/issues/169196\r\n\r\n##
Summary\r\n\r\n- The columns 'created at', 'updated at', 'closed at',
'severity', and\r\n'external incident' were missing the 'width'
property, resulting in a\r\ndisplay issue where these columns appeared
squeezed on screen\r\nresolutions below 1450px.\r\n- To address this,
the 'width' properties for these columns have been\r\nadded and adjusted
to ensure proper
display\r\n\r\n\r\nhttps://github.com/user-attachments/assets/b5d6735e-49b8-4b35-9648-a1ea1b30e1ef","sha":"f3369930425abc93bb09964029b1ebe7bb516e7a"}},{"branch":"8.17","label":"v8.17.0","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"}]}]
BACKPORT-->

Co-authored-by: Georgiana-Andreea Onoleață <georgiana.onoleata@elastic.co>
---
 .../all_cases/use_cases_columns.test.tsx      | 67 ++++++++++++-------
 .../all_cases/use_cases_columns.tsx           | 16 +++--
 2 files changed, 55 insertions(+), 28 deletions(-)

diff --git a/x-pack/plugins/cases/public/components/all_cases/use_cases_columns.test.tsx b/x-pack/plugins/cases/public/components/all_cases/use_cases_columns.test.tsx
index 550240060ddf6..fc50c7a61a64a 100644
--- a/x-pack/plugins/cases/public/components/all_cases/use_cases_columns.test.tsx
+++ b/x-pack/plugins/cases/public/components/all_cases/use_cases_columns.test.tsx
@@ -83,12 +83,13 @@ describe('useCasesColumns ', () => {
             "name": "Name",
             "render": [Function],
             "sortable": true,
-            "width": "20%",
+            "width": "17%",
           },
           Object {
             "field": "assignees",
             "name": "Assignees",
             "render": [Function],
+            "width": "10%",
           },
           Object {
             "field": "tags",
@@ -101,50 +102,54 @@ describe('useCasesColumns ', () => {
             "field": "totalAlerts",
             "name": "Alerts",
             "render": [Function],
-            "width": "80px",
+            "width": "70px",
           },
           Object {
             "align": "right",
             "field": "totalComment",
             "name": "Comments",
             "render": [Function],
-            "width": "90px",
+            "width": "75px",
           },
           Object {
             "field": "category",
             "name": "Category",
             "render": [Function],
             "sortable": true,
-            "width": "120px",
+            "width": "12%",
           },
           Object {
             "field": "createdAt",
             "name": "Created on",
             "render": [Function],
             "sortable": true,
+            "width": "15%",
           },
           Object {
             "field": "updatedAt",
             "name": "Updated on",
             "render": [Function],
             "sortable": true,
+            "width": "15%",
           },
           Object {
             "field": "closedAt",
             "name": "Closed on",
             "render": [Function],
             "sortable": true,
+            "width": "10%",
           },
           Object {
             "name": "External incident",
             "render": [Function],
+            "width": "10%",
           },
           Object {
             "field": "status",
             "name": "Status",
             "render": [Function],
             "sortable": true,
-            "width": "110px",
+            "width": "100px",
           },
           Object {
             "field": "severity",
@@ -185,12 +190,13 @@ describe('useCasesColumns ', () => {
             "name": "Name",
             "render": [Function],
             "sortable": true,
-            "width": "20%",
+            "width": "17%",
           },
           Object {
             "field": "assignees",
             "name": "Assignees",
             "render": [Function],
+            "width": "10%",
           },
           Object {
             "field": "tags",
@@ -203,44 +209,47 @@ describe('useCasesColumns ', () => {
             "field": "totalAlerts",
             "name": "Alerts",
             "render": [Function],
-            "width": "80px",
+            "width": "70px",
           },
           Object {
             "align": "right",
             "field": "totalComment",
             "name": "Comments",
             "render": [Function],
-            "width": "90px",
+            "width": "75px",
           },
           Object {
             "field": "category",
             "name": "Category",
             "render": [Function],
             "sortable": true,
-            "width": "120px",
+            "width": "12%",
           },
           Object {
             "field": "createdAt",
             "name": "Created on",
             "render": [Function],
             "sortable": true,
+            "width": "15%",
           },
           Object {
             "field": "updatedAt",
             "name": "Updated on",
             "render": [Function],
             "sortable": true,
+            "width": "15%",
           },
           Object {
             "name": "External incident",
             "render": [Function],
+            "width": "10%",
           },
           Object {
             "field": "status",
             "name": "Status",
             "render": [Function],
             "sortable": true,
-            "width": "110px",
+            "width": "100px",
           },
           Object {
             "field": "severity",
@@ -291,13 +300,14 @@ describe('useCasesColumns ', () => {
             "name": "Category",
             "render": [Function],
             "sortable": true,
-            "width": "120px",
+            "width": "12%",
           },
           Object {
             "field": "createdAt",
             "name": "Created on",
             "render": [Function],
             "sortable": true,
+            "width": "15%",
           },
           Object {
             "field": "severity",
@@ -309,6 +319,7 @@ describe('useCasesColumns ', () => {
           Object {
             "align": "right",
             "render": [Function],
+            "width": "70px",
           },
         ],
         "isLoadingColumns": false,
@@ -340,13 +351,14 @@ describe('useCasesColumns ', () => {
             "name": "Category",
             "render": [Function],
             "sortable": true,
-            "width": "120px",
+            "width": "12%",
           },
           Object {
             "field": "createdAt",
             "name": "Created on",
             "render": [Function],
             "sortable": true,
+            "width": "15%",
           },
           Object {
             "field": "severity",
@@ -358,6 +370,7 @@ describe('useCasesColumns ', () => {
           Object {
             "align": "right",
             "render": [Function],
+            "width": "70px",
           },
         ],
         "isLoadingColumns": false,
@@ -389,13 +402,14 @@ describe('useCasesColumns ', () => {
             "name": "Category",
             "render": [Function],
             "sortable": true,
-            "width": "120px",
+            "width": "12%",
           },
           Object {
             "field": "createdAt",
             "name": "Created on",
             "render": [Function],
             "sortable": true,
+            "width": "15%",
           },
           Object {
             "field": "severity",
@@ -407,6 +421,7 @@ describe('useCasesColumns ', () => {
           Object {
             "align": "right",
             "render": [Function],
+            "width": "70px",
           },
         ],
         "isLoadingColumns": false,
@@ -430,7 +445,7 @@ describe('useCasesColumns ', () => {
             "name": "Name",
             "render": [Function],
             "sortable": true,
-            "width": "20%",
+            "width": "17%",
           },
           Object {
             "field": "tags",
@@ -443,44 +458,47 @@ describe('useCasesColumns ', () => {
             "field": "totalAlerts",
             "name": "Alerts",
             "render": [Function],
-            "width": "80px",
+            "width": "70px",
           },
           Object {
             "align": "right",
             "field": "totalComment",
             "name": "Comments",
             "render": [Function],
-            "width": "90px",
+            "width": "75px",
           },
           Object {
             "field": "category",
             "name": "Category",
             "render": [Function],
             "sortable": true,
-            "width": "120px",
+            "width": "12%",
           },
           Object {
             "field": "createdAt",
             "name": "Created on",
             "render": [Function],
             "sortable": true,
+            "width": "15%",
           },
           Object {
             "field": "updatedAt",
             "name": "Updated on",
             "render": [Function],
             "sortable": true,
+            "width": "15%",
           },
           Object {
             "name": "External incident",
             "render": [Function],
+            "width": "10%",
           },
           Object {
             "field": "status",
             "name": "Status",
             "render": [Function],
             "sortable": true,
-            "width": "110px",
+            "width": "100px",
           },
           Object {
             "field": "severity",
@@ -538,7 +556,7 @@ describe('useCasesColumns ', () => {
             "name": "Name",
             "render": [Function],
             "sortable": true,
-            "width": "20%",
+            "width": "17%",
           },
           Object {
             "field": "tags",
@@ -551,44 +569,47 @@ describe('useCasesColumns ', () => {
             "field": "totalAlerts",
             "name": "Alerts",
             "render": [Function],
-            "width": "80px",
+            "width": "70px",
           },
           Object {
             "align": "right",
             "field": "totalComment",
             "name": "Comments",
             "render": [Function],
-            "width": "90px",
+            "width": "75px",
           },
           Object {
             "field": "category",
             "name": "Category",
             "render": [Function],
             "sortable": true,
-            "width": "120px",
+            "width": "12%",
           },
           Object {
             "field": "createdAt",
             "name": "Created on",
             "render": [Function],
             "sortable": true,
+            "width": "15%",
           },
           Object {
             "field": "updatedAt",
             "name": "Updated on",
             "render": [Function],
             "sortable": true,
+            "width": "15%",
           },
           Object {
             "name": "External incident",
             "render": [Function],
+            "width": "10%",
           },
           Object {
             "field": "status",
             "name": "Status",
             "render": [Function],
             "sortable": true,
-            "width": "110px",
+            "width": "100px",
           },
           Object {
             "field": "severity",
diff --git a/x-pack/plugins/cases/public/components/all_cases/use_cases_columns.tsx b/x-pack/plugins/cases/public/components/all_cases/use_cases_columns.tsx
index efdc443366886..73292ac9d71bd 100644
--- a/x-pack/plugins/cases/public/components/all_cases/use_cases_columns.tsx
+++ b/x-pack/plugins/cases/public/components/all_cases/use_cases_columns.tsx
@@ -122,7 +122,7 @@ export const useCasesColumns = ({
           }
           return getEmptyCellValue();
         },
-        width: !isSelectorView ? '20%' : '55%',
+        width: !isSelectorView ? '17%' : '55%',
       },
       assignees: {
         field: casesColumnsConfig.assignees.field,
@@ -130,6 +130,7 @@ export const useCasesColumns = ({
         render: (assignees: CaseUI['assignees']) => (
           <AssigneesColumn assignees={assignees} userProfiles={userProfiles} />
         ),
+        width: '10%',
       },
       tags: {
         field: casesColumnsConfig.tags.field,
@@ -193,7 +194,7 @@ export const useCasesColumns = ({
           totalAlerts != null
             ? renderStringField(`${totalAlerts}`, `case-table-column-alertsCount`)
             : getEmptyCellValue(),
-        width: !isSelectorView ? '80px' : '55px',
+        width: !isSelectorView ? '70px' : '55px',
       },
       totalComment: {
         field: casesColumnsConfig.totalComment.field,
@@ -203,7 +204,7 @@ export const useCasesColumns = ({
           totalComment != null
             ? renderStringField(`${totalComment}`, `case-table-column-commentCount`)
             : getEmptyCellValue(),
-        width: '90px',
+        width: '75px',
       },
       category: {
         field: casesColumnsConfig.category.field,
@@ -217,7 +218,7 @@ export const useCasesColumns = ({
           }
           return getEmptyCellValue();
         },
-        width: '120px',
+        width: '12%',
       },
       closedAt: {
         field: casesColumnsConfig.closedAt.field,
@@ -233,6 +234,7 @@ export const useCasesColumns = ({
           }
           return getEmptyCellValue();
         },
+        width: '10%',
       },
       createdAt: {
         field: casesColumnsConfig.createdAt.field,
@@ -248,6 +250,7 @@ export const useCasesColumns = ({
           }
           return getEmptyCellValue();
         },
+        width: '15%',
       },
       updatedAt: {
         field: casesColumnsConfig.updatedAt.field,
@@ -263,6 +266,7 @@ export const useCasesColumns = ({
           }
           return getEmptyCellValue();
         },
+        width: '15%',
       },
       externalIncident: {
         // no field
@@ -273,6 +277,7 @@ export const useCasesColumns = ({
           }
           return getEmptyCellValue();
         },
+        width: '10%',
       },
       status: {
         field: casesColumnsConfig.status.field,
@@ -285,7 +290,7 @@ export const useCasesColumns = ({
 
           return getEmptyCellValue();
         },
-        width: '110px',
+        width: '100px',
       },
       severity: {
         field: casesColumnsConfig.severity.field,
@@ -326,6 +331,7 @@ export const useCasesColumns = ({
           }
           return getEmptyCellValue();
         },
+        width: '70px',
       },
     }),
     [assignCaseAction, casesColumnsConfig, connectors, isSelectorView, userProfiles]