From 5d8e1a8877ec0f76de6defa5ab6d68815dae901e Mon Sep 17 00:00:00 2001
From: Herve Dombya <herve.dombya@scality.com>
Date: Fri, 9 Jun 2023 18:30:44 +0200
Subject: [PATCH] ZKUI-364 - ability to delete non empty objects

upgrade confirm modal

add test and made some changes in ui

add summary and handle auto pagination

review fixes and improvement

minor change

review fixes

add some tests

update empty confirm

Update uiBuckets.ts

update some ui elements

add unit tests

update tests

update emptysummary

objectLock instead of governancemode

remove unused var

review changes

some improvement

fix from review

banner when delete is too big

modify useEmptyBucket

empty summary test

update empty confirmation

remove chunkobject

push fix on useAwSInfinity

fix tests

minor fixes

add utils test

review fixes

add new tests for empty bucket

review fixes

add mockobject empty

add unique message test

update empty bucket test

review fixes

fix some tests

ZKUI-364 - ability to delete non empty objects

upgrade confirm modal

add test and made some changes in ui

add summary and handle auto pagination

review fixes and improvement

minor change

review fixes

add some tests

update empty confirm

Update uiBuckets.ts

update some ui elements

add unit tests

update tests

update emptysummary

objectLock instead of governancemode

remove unused var

review changes

some improvement

fix from review

banner when delete is too big

modify useEmptyBucket

empty summary test

update empty confirmation

remove chunkobject

push fix on useAwSInfinity

fix tests

minor fixes

add utils test

review fixes

add new tests for empty bucket

review fixes

add mockobject empty

add unique message test

update empty bucket test

review fixes

fix some tests

ZKUI-364 - ability to delete non empty objects

upgrade confirm modal

add test and made some changes in ui

add summary and handle auto pagination

review fixes and improvement

minor change

review fixes

add some tests

update empty confirm

Update uiBuckets.ts

update some ui elements

add unit tests

update tests

update emptysummary

objectLock instead of governancemode

remove unused var

review changes

some improvement

fix from review

banner when delete is too big

modify useEmptyBucket

empty summary test

update empty confirmation

remove chunkobject

push fix on useAwSInfinity

fix tests

minor fixes

add utils test

review fixes

add new tests for empty bucket

review fixes

add mockobject empty

add unique message test

update empty bucket test

review fixes

fix some tests

ZKUI-364 - ability to delete non empty objects

upgrade confirm modal

add test and made some changes in ui

add summary and handle auto pagination

review fixes and improvement

minor change

review fixes

add some tests

update empty confirm

Update uiBuckets.ts

update some ui elements

add unit tests

update tests

update emptysummary

objectLock instead of governancemode

remove unused var

review changes

some improvement

fix from review

banner when delete is too big

modify useEmptyBucket

empty summary test

update empty confirmation

remove chunkobject

push fix on useAwSInfinity

fix tests

minor fixes

add utils test

review fixes

add new tests for empty bucket

review fixes

add mockobject empty

add unique message test

update empty bucket test

review fixes

fix some tests

ZKUI-364 - ability to delete non empty objects

upgrade confirm modal

add test and made some changes in ui

add summary and handle auto pagination

review fixes and improvement

minor change

review fixes

add some tests

update empty confirm

Update uiBuckets.ts

update some ui elements

add unit tests

update tests

update emptysummary

objectLock instead of governancemode

remove unused var

review changes

some improvement

fix from review

banner when delete is too big

modify useEmptyBucket

empty summary test

update empty confirmation

remove chunkobject

push fix on useAwSInfinity

fix tests

minor fixes

add utils test

review fixes

add new tests for empty bucket

review fixes

add mockobject empty

add unique message test

update empty bucket test

review fixes

fix some tests

ZKUI-369: identity-group-names-become-long

fix account policies and workflow list

add in modal title

fix Overview

fix workflow

overview and endpointlist

add wrap in endpointlist
---
 src/react/account/AccountList.tsx             | 25 ++++----
 src/react/account/AccountPoliciesList.tsx     | 38 +++++++-----
 src/react/databrowser/buckets/BucketList.tsx  | 60 ++++++++++---------
 .../databrowser/buckets/details/Overview.tsx  |  6 +-
 .../databrowser/buckets/details/Workflow.tsx  | 49 +++++++++------
 src/react/endpoint/EndpointList.tsx           | 13 ++--
 src/react/ui-elements/TableKeyValue2.tsx      |  3 +-
 src/react/workflow/WorkflowList.tsx           | 12 +++-
 8 files changed, 126 insertions(+), 80 deletions(-)

diff --git a/src/react/account/AccountList.tsx b/src/react/account/AccountList.tsx
index 901c8c6a1..e1e5224c9 100644
--- a/src/react/account/AccountList.tsx
+++ b/src/react/account/AccountList.tsx
@@ -6,7 +6,7 @@ import { spacing } from '@scality/core-ui/dist/style/theme';
 import { Button } from '@scality/core-ui/dist/next';
 import { Table } from '@scality/core-ui/dist/components/tablev2/Tablev2.component';
 import { formatSimpleDate } from '../utils';
-import { Icon, Link } from '@scality/core-ui';
+import { ConstrainedText, Icon, Link } from '@scality/core-ui';
 import { Account } from '../next-architecture/domain/entities/account';
 import { CellProps, CoreUIColumn } from 'react-table';
 import { useSetAssumedRole } from '../DataServiceRoleProvider';
@@ -33,15 +33,20 @@ function AccountList({ accounts }: { accounts: Account[] }) {
     }
 
     return (
-      <Link
-        href="#"
-        onClick={() => {
-          setRole({ roleArn: row.original.preferredAssumableRoleArn });
-          dispatch(push(`/accounts/${value}`));
-        }}
-      >
-        {value}
-      </Link>
+      <ConstrainedText
+        text={
+          <Link
+            href="#"
+            onClick={() => {
+              setRole({ roleArn: row.original.preferredAssumableRoleArn });
+              dispatch(push(`/accounts/${value}`));
+            }}
+          >
+            {value}
+          </Link>
+        }
+        lineClamp={2}
+      />
     );
   };
 
diff --git a/src/react/account/AccountPoliciesList.tsx b/src/react/account/AccountPoliciesList.tsx
index e7fb97ae6..ad5aed8ae 100644
--- a/src/react/account/AccountPoliciesList.tsx
+++ b/src/react/account/AccountPoliciesList.tsx
@@ -4,7 +4,7 @@ import { Box, Button, CopyButton } from '@scality/core-ui/dist/next';
 import { spacing } from '@scality/core-ui/dist/style/theme';
 import { formatShortDate } from '../utils';
 import { useIAMClient } from '../IAMProvider';
-import { Icon, Tooltip } from '@scality/core-ui';
+import { ConstrainedText, Icon, Tooltip } from '@scality/core-ui';
 import { notFalsyTypeGuard } from '../../types/typeGuards';
 import { useMutation, useQuery } from 'react-query';
 import { queryClient } from '../App';
@@ -276,23 +276,33 @@ const DeletePolicyAction = ({
 const AccessPolicyNameCell = ({ rowValues }: { rowValues: InternalPolicy }) => {
   const { policyPath, policyName } = rowValues;
   const isInternalPolicy = policyPath.includes('scality-internal');
+  const styleProps = { style: { marginLeft: spacing.sp16 } };
   return (
     <>
       {isInternalPolicy && (
-        <Tooltip
-          overlay={'This is a predefined Scality Policy'}
-          overlayStyle={{ width: '13rem' }}
-        >
-          {policyName}
-          <Icon
-            name="Info"
-            size="xs"
-            color="buttonSecondary"
-            style={{ marginLeft: spacing.sp16 }}
-          />
-        </Tooltip>
+        <ConstrainedText
+          text={
+            <Tooltip
+              overlay={'This is a predefined Scality Policy'}
+              overlayStyle={{ width: '13rem' }}
+            >
+              {policyName}{' '}
+              <Icon
+                name="Info"
+                size="xs"
+                color="buttonSecondary"
+                {...styleProps}
+              />
+            </Tooltip>
+          }
+          lineClamp={2}
+        />
+      )}
+      {!isInternalPolicy && (
+        <>
+          <ConstrainedText text={policyName} lineClamp={2} />
+        </>
       )}
-      {!isInternalPolicy && <>{policyName} </>}
     </>
   );
 };
diff --git a/src/react/databrowser/buckets/BucketList.tsx b/src/react/databrowser/buckets/BucketList.tsx
index 9b8e9395b..ede27de9e 100644
--- a/src/react/databrowser/buckets/BucketList.tsx
+++ b/src/react/databrowser/buckets/BucketList.tsx
@@ -1,27 +1,26 @@
-import type { LocationName, Locations } from '../../../types/config';
-import { useMemo } from 'react';
-import * as T from '../../ui-elements/Table';
-import { TextAligner } from '../../ui-elements/Utility';
-import { formatShortDate } from '../../utils';
-import { getLocationIngestionState } from '../../utils/storageOptions';
+import { ConstrainedText, Icon, Link, spacing } from '@scality/core-ui';
+import { EmptyCell } from '@scality/core-ui/dist/components/tablev2/Tablev2.component';
+import { Box, Table } from '@scality/core-ui/dist/next';
 import { push } from 'connected-react-router';
+import { useMemo } from 'react';
 import { useDispatch } from 'react-redux';
-import type { WorkflowScheduleUnitState } from '../../../types/stats';
-import { XDM_FEATURE } from '../../../js/config';
 import { useHistory, useParams } from 'react-router';
-import { Icon, Link, spacing } from '@scality/core-ui';
-import { Box, Table } from '@scality/core-ui/dist/next';
-import { useAuthGroups, useQueryParams } from '../../utils/hooks';
-import { useCurrentAccount } from '../../DataServiceRoleProvider';
-import { Bucket } from '../../next-architecture/domain/entities/bucket';
 import { CoreUIColumn } from 'react-table';
+import { XDM_FEATURE } from '../../../js/config';
+import type { LocationName, Locations } from '../../../types/config';
+import type { WorkflowScheduleUnitState } from '../../../types/stats';
+import { useCurrentAccount } from '../../DataServiceRoleProvider';
 import { useBucketLatestUsedCapacity } from '../../next-architecture/domain/business/buckets';
-import { useMetricsAdapter } from '../../next-architecture/ui/MetricsAdapterProvider';
-import { UsedCapacityInlinePromiseResult } from '../../next-architecture/ui/metrics/LatestUsedCapacity';
+import { Bucket } from '../../next-architecture/domain/entities/bucket';
 import { useConfig } from '../../next-architecture/ui/ConfigProvider';
-import { BucketLocationNameAndType } from '../../workflow/SourceBucketOption';
-import { EmptyCell } from '@scality/core-ui/dist/components/tablev2/Tablev2.component';
+import { useMetricsAdapter } from '../../next-architecture/ui/MetricsAdapterProvider';
 import { getDataUsedColumn } from '../../next-architecture/ui/metrics/DataUsedColumn';
+import * as T from '../../ui-elements/Table';
+import { TextAligner } from '../../ui-elements/Utility';
+import { formatShortDate } from '../../utils';
+import { useAuthGroups, useQueryParams } from '../../utils/hooks';
+import { getLocationIngestionState } from '../../utils/storageOptions';
+import { BucketLocationNameAndType } from '../../workflow/SourceBucketOption';
 
 const SEARCH_QUERY_PARAM = 'search';
 
@@ -63,17 +62,22 @@ export default function BucketList({
         Cell({ value: name }: { value: string }) {
           const history = useHistory();
           return (
-            <Link
-              href="#"
-              onClick={(e) => {
-                e.stopPropagation();
-                history.push(
-                  `/accounts/${accountName}/buckets/${name}/objects`,
-                );
-              }}
-            >
-              {name}
-            </Link>
+            <ConstrainedText
+              text={
+                <Link
+                  href="#"
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    history.push(
+                      `/accounts/${accountName}/buckets/${name}/objects`,
+                    );
+                  }}
+                >
+                  {name}
+                </Link>
+              }
+              lineClamp={2}
+            />
           );
         },
         cellStyle: {
diff --git a/src/react/databrowser/buckets/details/Overview.tsx b/src/react/databrowser/buckets/details/Overview.tsx
index 36e7e2989..8235ae26a 100644
--- a/src/react/databrowser/buckets/details/Overview.tsx
+++ b/src/react/databrowser/buckets/details/Overview.tsx
@@ -1,4 +1,4 @@
-import { Icon, Toggle } from '@scality/core-ui';
+import { ConstrainedText, Icon, Toggle } from '@scality/core-ui';
 import { SmallerText } from '@scality/core-ui/dist/components/text/Text.component';
 import { Button } from '@scality/core-ui/dist/next';
 import { push } from 'connected-react-router';
@@ -129,7 +129,9 @@ function Overview({ bucket, ingestionStates }: Props) {
             <T.GroupContent>
               <T.Row>
                 <T.Key> Name </T.Key>
-                <T.Value>{bucketInfo.name}</T.Value>
+                <T.Value width="15rem">
+                  <ConstrainedText text={bucketInfo.name} lineClamp={2} />
+                </T.Value>
               </T.Row>
               <T.Row>
                 <T.Key> Versioning </T.Key>
diff --git a/src/react/databrowser/buckets/details/Workflow.tsx b/src/react/databrowser/buckets/details/Workflow.tsx
index f98f4eb6c..4e9b92bc6 100644
--- a/src/react/databrowser/buckets/details/Workflow.tsx
+++ b/src/react/databrowser/buckets/details/Workflow.tsx
@@ -1,16 +1,21 @@
-import { useHistory } from 'react-router';
-import styled from 'styled-components';
+import { ConstrainedText } from '@scality/core-ui';
+import { Icon } from '@scality/core-ui/dist/components/icon/Icon.component';
 import { Table } from '@scality/core-ui/dist/components/tablev2/Tablev2.component';
 import { Button } from '@scality/core-ui/dist/next';
 import { spacing } from '@scality/core-ui/dist/style/theme';
-import { Icon } from '@scality/core-ui/dist/components/icon/Icon.component';
-import { TextTransformer } from '../../../ui-elements/Utility';
-import { useWorkflowsWithSelect } from '../../../workflow/Workflows';
+import { useHistory } from 'react-router';
+import { CellProps, CoreUIColumn } from 'react-table';
+import styled from 'styled-components';
+import {
+  APIWorkflows,
+  Workflow as WorflowType,
+} from '../../../../types/workflow';
+import { useCurrentAccount } from '../../../DataServiceRoleProvider';
 import { makeWorkflows } from '../../../queries';
-import { APIWorkflows } from '../../../../types/workflow';
 import { NameLinkContaner } from '../../../ui-elements/NameLink';
-import { useCurrentAccount } from '../../../DataServiceRoleProvider';
 import { WorkflowTypeIcon } from '../../../workflow/WorkflowList';
+import { useWorkflowsWithSelect } from '../../../workflow/Workflows';
+import { PropsWithChildren } from 'react';
 
 const TableAction = styled.div`
   display: flex;
@@ -25,25 +30,35 @@ function Workflow({ bucketName }: { bucketName: string }) {
   const select = (workflows: APIWorkflows) => makeWorkflows(workflows);
   const { data, status } = useWorkflowsWithSelect(select, [bucketName]);
 
-  const nameCell = (value) => {
+  const nameCell = (
+    value: PropsWithChildren<CellProps<WorflowType, string>>,
+  ) => {
     const id = value.row.original.id;
     const workflowName = value.value;
     return (
-      <NameLinkContaner
-        onClick={() => history.push(`/accounts/${accountName}/workflows/${id}`)}
-      >
-        {workflowName}
-      </NameLinkContaner>
+      <ConstrainedText
+        text={
+          <NameLinkContaner
+            onClick={() =>
+              history.push(`/accounts/${accountName}/workflows/${id}`)
+            }
+          >
+            {workflowName}
+          </NameLinkContaner>
+        }
+        lineClamp={2}
+      />
     );
   };
-  const columns = [
+  const columns: CoreUIColumn<WorflowType>[] = [
     {
       Header: 'Workflow Description',
       accessor: 'name',
       cellStyle: {
         flex: 2,
       },
-      Cell: (value) => nameCell(value),
+      Cell: (value: PropsWithChildren<CellProps<WorflowType, string>>) =>
+        nameCell(value),
       width: 0,
     },
     {
@@ -62,9 +77,7 @@ function Workflow({ bucketName }: { bucketName: string }) {
         flex: 1,
         textAlign: 'right',
       },
-      Cell: ({ value }) => {
-        return value ? 'Active' : 'Inactive';
-      },
+      Cell: ({ value }: { value: boolean }) => (value ? 'Active' : 'Inactive'),
       width: 0,
     },
   ];
diff --git a/src/react/endpoint/EndpointList.tsx b/src/react/endpoint/EndpointList.tsx
index abba89173..3d0647579 100644
--- a/src/react/endpoint/EndpointList.tsx
+++ b/src/react/endpoint/EndpointList.tsx
@@ -20,7 +20,7 @@ import { push } from 'connected-react-router';
 import { spacing } from '@scality/core-ui/dist/style/theme';
 import { Clipboard } from '../ui-elements/Clipboard';
 import { AuthorizedAdvancedMetricsButton } from './AdvancedMetricsButton';
-import { Icon } from '@scality/core-ui';
+import { ConstrainedText, Icon, Stack, Wrap } from '@scality/core-ui';
 type CellProps = {
   row: {
     original: Endpoint;
@@ -64,10 +64,15 @@ function EndpointList({ endpoints, locations }: Props) {
         },
         Cell({ value: hostName }: { value: Hostname }) {
           return (
-            <div style={{ display: 'flex' }}>
-              <span style={{ paddingRight: spacing.sp14 }}>{hostName}</span>
+            <Wrap paddingRight="2rem">
+              <ConstrainedText
+                text={
+                  <span style={{ paddingRight: spacing.sp14 }}>{hostName}</span>
+                }
+                lineClamp={2}
+              />
               <Clipboard text={hostName} />
-            </div>
+            </Wrap>
           );
         },
       },
diff --git a/src/react/ui-elements/TableKeyValue2.tsx b/src/react/ui-elements/TableKeyValue2.tsx
index ac68ac7cc..267aa790e 100644
--- a/src/react/ui-elements/TableKeyValue2.tsx
+++ b/src/react/ui-elements/TableKeyValue2.tsx
@@ -129,13 +129,14 @@ export const KeyTooltip = ({
     )}
   </KeyContainer>
 );
-export const Value = styled.div<{ size?: string }>`
+export const Value = styled.div<{ size?: string; width?: string }>`
   flex: ${(props) => props.size || '0.65'};
   flex-direction: column;
   i {
     margin-right: ${spacing.sp8};
   }
   min-width: 0;
+  width: ${(props) => props.width};
 `;
 export const GroupValues = styled.div<{ size?: string }>`
   display: flex;
diff --git a/src/react/workflow/WorkflowList.tsx b/src/react/workflow/WorkflowList.tsx
index 38f7ad254..edd2abf3c 100644
--- a/src/react/workflow/WorkflowList.tsx
+++ b/src/react/workflow/WorkflowList.tsx
@@ -8,7 +8,8 @@ import { Button } from '@scality/core-ui/dist/next';
 import { TitleRow as TableHeader } from '../ui-elements/TableKeyValue';
 import { useTheme } from 'styled-components';
 import { Icon } from '@scality/core-ui/dist/components/icon/Icon.component';
-import { Row } from 'react-table';
+import { CoreUIColumn, Row } from 'react-table';
+import { ConstrainedText } from '@scality/core-ui';
 
 const SEARCH_QUERY_PARAM = 'search';
 export function WorkflowTypeIcon({ value: type }: { value: string }) {
@@ -37,7 +38,12 @@ function WorkflowList({ workflows, workflowId }: Props) {
   const theme = useTheme();
 
   function DataComponent({ row }: { row: Row<Workflow> }) {
-    return <span> {`${row.values.name}`} </span>;
+    return (
+      <ConstrainedText
+        text={<span> {`${row.values.name}`} </span>}
+        lineClamp={2}
+      />
+    );
   }
 
   function RowAsync({ row }: { row: Row<Workflow> }) {
@@ -53,7 +59,7 @@ function WorkflowList({ workflows, workflowId }: Props) {
     return row.id;
   };
 
-  const columns = [
+  const columns: CoreUIColumn<Workflow>[] = [
     {
       Header: 'Workflow Description',
       accessor: 'name',