Skip to content

Commit 89210c9

Browse files
gilluminategilluminate
committed
utilize new EllipsisCell component elsewhere
1 parent ccc3119 commit 89210c9

File tree

6 files changed

+25
-65
lines changed

6 files changed

+25
-65
lines changed

‎clients/admin-ui/src/features/custom-fields/useCustomFieldsTable.tsx‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
1-
import { Button, ColumnsType, Flex, Typography } from "fidesui";
1+
import { Button, ColumnsType, Flex } from "fidesui";
22
import { useRouter } from "next/router";
33
import { useMemo } from "react";
44

55
import { LegacyResourceTypes } from "~/features/common/custom-fields";
66
import { CUSTOM_FIELDS_ROUTE } from "~/features/common/nav/routes";
77
import { useHasPermission } from "~/features/common/Restrict";
8+
import { EllipsisCell } from "~/features/common/table/cells/EllipsisCell";
89
import { useAntTable, useTableState } from "~/features/common/table/hooks";
910
import { RESOURCE_TYPE_MAP } from "~/features/custom-fields/constants";
1011
import EnableCustomFieldCellV2 from "~/features/custom-fields/EnableCustomFieldCell";
@@ -55,9 +56,7 @@ const useCustomFieldsTable = () => {
5556
dataIndex: "description",
5657
key: "description",
5758
render: (text: string) => (
58-
<Typography.Text ellipsis={{ tooltip: text }} className="w-96">
59-
{text}
60-
</Typography.Text>
59+
<EllipsisCell className="w-96">{text}</EllipsisCell>
6160
),
6261
width: 384,
6362
},

‎clients/admin-ui/src/features/data-discovery-and-detection/action-center/hooks/useConsentBreakdownTable.tsx‎

Lines changed: 3 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import {
99
import { useMemo } from "react";
1010

1111
import { PRIVACY_NOTICE_REGION_RECORD } from "~/features/common/privacy-notice-regions";
12+
import { EllipsisCell } from "~/features/common/table/cells/EllipsisCell";
1213
import { DEFAULT_PAGE_SIZES } from "~/features/common/table/constants";
1314
import { useAntTable, useTableState } from "~/features/common/table/hooks";
1415
import { truncateUrl } from "~/features/common/utils";
@@ -101,11 +102,7 @@ export const useConsentBreakdownTable = ({
101102
location as PrivacyNoticeRegion
102103
] ?? location);
103104

104-
return (
105-
<Typography.Text ellipsis={{ tooltip: location }}>
106-
{locationText}
107-
</Typography.Text>
108-
);
105+
return <EllipsisCell>{locationText}</EllipsisCell>;
109106
},
110107
width: 180,
111108
},
@@ -122,9 +119,7 @@ export const useConsentBreakdownTable = ({
122119
rel="noopener noreferrer"
123120
variant="primary"
124121
>
125-
<Typography.Text ellipsis={{ tooltip: page }} unStyled>
126-
{truncatedPage}
127-
</Typography.Text>
122+
<EllipsisCell unStyled>{truncatedPage}</EllipsisCell>
128123
</Link>
129124
);
130125
},

‎clients/admin-ui/src/features/integrations/configure-tasks/useManualTaskColumns.tsx‎

Lines changed: 5 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
1-
import { Button, Flex, Icons, Typography } from "fidesui";
1+
import { Button, Flex, Icons } from "fidesui";
22
import { useMemo } from "react";
33

4+
import { EllipsisCell } from "~/features/common/table/cells/EllipsisCell";
5+
46
import { FIELD_TYPE_LABELS, REQUEST_TYPE_LABELS } from "./constants";
57
import { Task } from "./types";
68

@@ -23,12 +25,7 @@ export const useManualTaskColumns = ({
2325
showTitle: false,
2426
},
2527
render: (text: string) => (
26-
<Typography.Text
27-
ellipsis={{ tooltip: text }}
28-
style={{ maxWidth: 200 }}
29-
>
30-
{text}
31-
</Typography.Text>
28+
<EllipsisCell style={{ maxWidth: 200 }}>{text}</EllipsisCell>
3229
),
3330
},
3431
{
@@ -39,12 +36,7 @@ export const useManualTaskColumns = ({
3936
showTitle: false,
4037
},
4138
render: (text: string) => (
42-
<Typography.Text
43-
ellipsis={{ tooltip: text }}
44-
style={{ maxWidth: 300 }}
45-
>
46-
{text}
47-
</Typography.Text>
39+
<EllipsisCell style={{ maxWidth: 300 }}>{text}</EllipsisCell>
4840
),
4941
},
5042
{

‎clients/admin-ui/src/features/integrations/hooks/useMonitorConfigTable.tsx‎

Lines changed: 7 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,8 @@
1-
import {
2-
ColumnsType,
3-
formatIsoLocation,
4-
isoStringToEntry,
5-
Typography,
6-
} from "fidesui";
1+
import { ColumnsType, formatIsoLocation, isoStringToEntry } from "fidesui";
72
import { useMemo } from "react";
83

94
import { PRIVACY_NOTICE_REGION_RECORD } from "~/features/common/privacy-notice-regions";
5+
import { EllipsisCell } from "~/features/common/table/cells/EllipsisCell";
106
import { useAntTable, useTableState } from "~/features/common/table/hooks";
117
import { pluralize } from "~/features/common/utils";
128
import {
@@ -25,8 +21,6 @@ import {
2521

2622
import { MonitorConfigEnableCell } from "../configure-monitor/MonitorConfigEnableCell";
2723

28-
const { Text } = Typography;
29-
3024
enum MonitorConfigColumnKeys {
3125
NAME = "name",
3226
PROJECTS = "projects",
@@ -107,9 +101,7 @@ export const useMonitorConfigTable = ({
107101
dataIndex: MonitorConfigColumnKeys.NAME,
108102
key: MonitorConfigColumnKeys.NAME,
109103
render: (name: string) => (
110-
<Text ellipsis={{ tooltip: name }} style={{ maxWidth: 150 }}>
111-
{name}
112-
</Text>
104+
<EllipsisCell style={{ maxWidth: 150 }}>{name}</EllipsisCell>
113105
),
114106
fixed: "left" as const,
115107
};
@@ -134,9 +126,9 @@ export const useMonitorConfigTable = ({
134126
render: () => {
135127
const secrets = integration.secrets as WebsiteSchema | null;
136128
return (
137-
<Text ellipsis={{ tooltip: secrets?.url }} style={{ maxWidth: 150 }}>
129+
<EllipsisCell style={{ maxWidth: 150 }}>
138130
{secrets?.url ?? "Not scheduled"}
139-
</Text>
131+
</EllipsisCell>
140132
);
141133
},
142134
};
@@ -201,12 +193,9 @@ export const useMonitorConfigTable = ({
201193
.join(", ");
202194

203195
return (
204-
<Text
205-
ellipsis={{ tooltip: formattedLocations }}
206-
style={{ maxWidth: 150 }}
207-
>
196+
<EllipsisCell style={{ maxWidth: 150 }}>
208197
{formattedLocations}
209-
</Text>
198+
</EllipsisCell>
210199
);
211200
},
212201
};

‎clients/admin-ui/src/features/manual-tasks/hooks/useManualTaskColumns.tsx‎

Lines changed: 5 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { ColumnsType, SelectInline, Tag, Typography } from "fidesui";
22

33
import DaysLeftTag from "~/features/common/DaysLeftTag";
4+
import { EllipsisCell } from "~/features/common/table/cells/EllipsisCell";
45
import { formatUser } from "~/features/common/utils";
56
import { SubjectRequestActionTypeMap } from "~/features/privacy-requests/constants";
67
import {
@@ -58,9 +59,7 @@ export const useManualTaskColumns = ({
5859
dataIndex: "name",
5960
key: "name",
6061
minWidth: 100,
61-
render: (name) => (
62-
<Typography.Text ellipsis={{ tooltip: name }}>{name}</Typography.Text>
63-
),
62+
render: (name) => <EllipsisCell>{name}</EllipsisCell>,
6463
},
6564
{
6665
title: "Status",
@@ -83,11 +82,7 @@ export const useManualTaskColumns = ({
8382
dataIndex: ["system", "name"],
8483
key: "system_name",
8584
minWidth: 100,
86-
render: (systemName: string) => (
87-
<Typography.Text ellipsis={{ tooltip: systemName }}>
88-
{systemName}
89-
</Typography.Text>
90-
),
85+
render: (systemName: string) => <EllipsisCell>{systemName}</EllipsisCell>,
9186
filters: systemFilters,
9287
filterMultiple: false,
9388
},
@@ -102,11 +97,7 @@ export const useManualTaskColumns = ({
10297
? ActionType.ACCESS
10398
: ActionType.ERASURE;
10499
const displayName = SubjectRequestActionTypeMap.get(actionType) || type;
105-
return (
106-
<Typography.Text ellipsis={{ tooltip: displayName }}>
107-
{displayName}
108-
</Typography.Text>
109-
);
100+
return <EllipsisCell>{displayName}</EllipsisCell>;
110101
},
111102
filters: REQUEST_TYPE_FILTER_OPTIONS,
112103
filterMultiple: false,
@@ -169,11 +160,7 @@ export const useManualTaskColumns = ({
169160
// Display email or phone_number if available
170161
const identity =
171162
subjectIdentities.email || subjectIdentities.phone_number || "";
172-
return (
173-
<Typography.Text ellipsis={{ tooltip: identity }}>
174-
{identity}
175-
</Typography.Text>
176-
);
163+
return <EllipsisCell>{identity}</EllipsisCell>;
177164
},
178165
},
179166
{

‎clients/admin-ui/src/features/system/table/useSystemsTable.tsx‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@ import {
44
Flex,
55
FlexProps,
66
Icons,
7-
Typography,
87
useMessage,
98
} from "fidesui";
109
import { uniq } from "lodash";
@@ -16,6 +15,7 @@ import { getErrorMessage } from "~/features/common/helpers";
1615
import { useHasPermission } from "~/features/common/Restrict";
1716
import { ListExpandableCell } from "~/features/common/table/cells";
1817
import { expandCollapseAllMenuItems } from "~/features/common/table/cells/constants";
18+
import { EllipsisCell } from "~/features/common/table/cells/EllipsisCell";
1919
import { LinkCell } from "~/features/common/table/cells/LinkCell";
2020
import { useAntTable, useTableState } from "~/features/common/table/hooks";
2121
import { convertToAntFilters } from "~/features/common/utils";
@@ -325,9 +325,7 @@ const useSystemsTable = () => {
325325
key: SystemColumnKeys.DESCRIPTION,
326326
render: (description: string | null) => (
327327
<div className="max-w-96">
328-
<Typography.Text ellipsis={{ tooltip: description }}>
329-
{description}
330-
</Typography.Text>
328+
<EllipsisCell>{description}</EllipsisCell>
331329
</div>
332330
),
333331
ellipsis: true,

0 commit comments

Comments
 (0)