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
scality · Jul 10, 2023 · d0bb354 · d0bb354
1 parent ad9a7af
commit d0bb354
Show file tree

Hide file tree

Showing 8 changed files with 125 additions and 79 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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 } from '@scality/core-ui';
 type CellProps = {
   row: {
     original: Endpoint;
@@ -64,8 +64,13 @@ function EndpointList({ endpoints, locations }: Props) {
         },
         Cell({ value: hostName }: { value: Hostname }) {
           return (
-            <div style={{ display: 'flex' }}>
-              <span style={{ paddingRight: spacing.sp14 }}>{hostName}</span>
+            <div style={{ display: 'flex', width: `calc(100% - 100px)` }}>
+              <ConstrainedText
+                text={
+                  <span style={{ paddingRight: spacing.sp14 }}>{hostName}</span>
+                }
+                lineClamp={2}
+              />
               <Clipboard text={hostName} />
             </div>
           );

diff --git 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
@@ -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',