Skip to content

Commit 2bc1aed

Browse files
ibolton336ibolton336
authored
✨ Add empty state for empty groups / stakeholders list (#1817)
Resolves #1816 <img width="1650" alt="Screenshot 2024-04-04 at 3 25 17 PM" src="https://github.com/konveyor/tackle2-ui/assets/11218376/b4c3d099-83ee-49e6-b498-0877ddd8caee"> <img width="1647" alt="Screenshot 2024-04-04 at 3 25 06 PM" src="https://github.com/konveyor/tackle2-ui/assets/11218376/f2d4519d-dcb9-49c8-aab9-e0734d3f322a"> <img width="1654" alt="Screenshot 2024-04-04 at 3 24 59 PM" src="https://github.com/konveyor/tackle2-ui/assets/11218376/5861a412-b1ff-48f6-82d6-410a4a7d1411"> --------- Signed-off-by: Ian Bolton <[email protected]>
1 parent deb390b commit 2bc1aed

File tree

11 files changed

+82
-30
lines changed

11 files changed

+82
-30
lines changed

‎client/public/locales/en/translation.json

+3-1
Original file line numberDiff line numberDiff line change
@@ -88,7 +88,7 @@
8888
"error": "{{what}} error",
8989
"manage": "Manage {{what}}",
9090
"manageDependenciesFor": "Manage dependencies for {{what}}",
91-
"noDataStateBody": "Create a new {{what}} to start seeing data here.",
91+
"noDataStateBody": "{{how}} a new {{what}} to start seeing data here.",
9292
"noDataStateTitle": "No {{what}} available",
9393
"Nquestions": "{{n}} questions",
9494
"ofTotalApplications": "Of {{count}} application",
@@ -272,6 +272,7 @@
272272
"applicationName": "Application name",
273273
"archetypeName": "Archetype name",
274274
"applicationInformation": "Application information",
275+
"applicationFile": "Application file",
275276
"archetype": "Archetype",
276277
"archetypes": "Archetypes",
277278
"archetypes_plural": "Archetypes",
@@ -304,6 +305,7 @@
304305
"connected": "Connected",
305306
"contributors": "Contributors",
306307
"controls": "Controls",
308+
"create": "Create",
307309
"createdBy": "Created By",
308310
"credential": "Credential",
309311
"credentials": "Credentials",

‎client/src/app/pages/applications/applications-table/applications-table.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -860,6 +860,7 @@ export const ApplicationsTable: React.FC = () => {
860860
what: t("terms.applications").toLowerCase(),
861861
})}
862862
description={t("composed.noDataStateBody", {
863+
how: t("terms.create"),
863864
what: t("terms.application").toLowerCase(),
864865
})}
865866
/>

‎client/src/app/pages/applications/manage-imports/manage-imports.tsx

+2-1
Original file line numberDiff line numberDiff line change
@@ -243,7 +243,8 @@ export const ManageImports: React.FC = () => {
243243
</Title>
244244
<EmptyStateBody>
245245
{t("composed.noDataStateBody", {
246-
what: t("terms.importSummary").toLowerCase(),
246+
how: t("actions.import"),
247+
what: t("terms.applicationFile").toLowerCase(),
247248
})}
248249
</EmptyStateBody>
249250
</EmptyState>

‎client/src/app/pages/controls/business-services/business-services.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -228,6 +228,7 @@ export const BusinessServices: React.FC = () => {
228228
</Title>
229229
<EmptyStateBody>
230230
{t("composed.noDataStateBody", {
231+
how: t("terms.create"),
231232
what: t("terms.businessService").toLowerCase(),
232233
})}
233234
</EmptyStateBody>

‎client/src/app/pages/controls/job-functions/job-functions.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -216,6 +216,7 @@ export const JobFunctions: React.FC = () => {
216216
})}
217217
// t('terms.jobFunction')
218218
description={t("composed.noDataStateBody", {
219+
how: t("terms.create"),
219220
what: t("terms.jobFunction").toLowerCase(),
220221
})}
221222
/>

‎client/src/app/pages/controls/stakeholder-groups/stakeholder-groups.tsx

+33-14
Original file line numberDiff line numberDiff line change
@@ -246,6 +246,7 @@ export const StakeholderGroups: React.FC = () => {
246246
</Title>
247247
<EmptyStateBody>
248248
{t("composed.noDataStateBody", {
249+
how: t("terms.add"),
249250
what: t("terms.stakeholderGroup").toLowerCase(),
250251
})}
251252
</EmptyStateBody>
@@ -254,6 +255,7 @@ export const StakeholderGroups: React.FC = () => {
254255
numRenderedColumns={numRenderedColumns}
255256
>
256257
{currentPageItems?.map((stakeholderGroup, rowIndex) => {
258+
const hasStakeholders = stakeholderGroup.stakeholders?.length;
257259
return (
258260
<Tbody
259261
key={stakeholderGroup.id}
@@ -297,20 +299,37 @@ export const StakeholderGroups: React.FC = () => {
297299
className={spacing.pyLg}
298300
>
299301
<ExpandableRowContent>
300-
<DescriptionList>
301-
<DescriptionListGroup>
302-
<DescriptionListTerm>
303-
{t("terms.member(s)")}
304-
</DescriptionListTerm>
305-
{!!stakeholderGroup.stakeholders?.length && (
306-
<DescriptionListDescription>
307-
{stakeholderGroup.stakeholders
308-
?.map((f) => f.name)
309-
.join(", ")}
310-
</DescriptionListDescription>
311-
)}
312-
</DescriptionListGroup>
313-
</DescriptionList>
302+
{hasStakeholders ? (
303+
<DescriptionList>
304+
<DescriptionListGroup>
305+
<DescriptionListTerm>
306+
{t("terms.member(s)")}
307+
</DescriptionListTerm>
308+
{!!stakeholderGroup.stakeholders?.length && (
309+
<DescriptionListDescription>
310+
{stakeholderGroup.stakeholders
311+
?.map((f) => f.name)
312+
.join(", ")}
313+
</DescriptionListDescription>
314+
)}
315+
</DescriptionListGroup>
316+
</DescriptionList>
317+
) : (
318+
<EmptyState variant="sm">
319+
<EmptyStateIcon icon={CubesIcon} />
320+
<Title headingLevel="h2" size="lg">
321+
{t("composed.noDataStateTitle", {
322+
what: t("terms.stakeholder").toLowerCase(),
323+
})}
324+
</Title>
325+
<EmptyStateBody>
326+
{t("composed.noDataStateBody", {
327+
how: t("terms.add"),
328+
what: t("terms.stakeholder").toLowerCase(),
329+
})}
330+
</EmptyStateBody>
331+
</EmptyState>
332+
)}
314333
</ExpandableRowContent>
315334
</Td>
316335
</Tr>

‎client/src/app/pages/controls/stakeholders/stakeholders.tsx

+37-14
Original file line numberDiff line numberDiff line change
@@ -255,6 +255,7 @@ export const Stakeholders: React.FC = () => {
255255
</Title>
256256
<EmptyStateBody>
257257
{t("composed.noDataStateBody", {
258+
how: t("terms.add"),
258259
what: t("terms.stakeholder").toLowerCase(),
259260
})}
260261
</EmptyStateBody>
@@ -263,6 +264,7 @@ export const Stakeholders: React.FC = () => {
263264
numRenderedColumns={numRenderedColumns}
264265
>
265266
{currentPageItems?.map((stakeholder, rowIndex) => {
267+
const hasGroups = stakeholder.stakeholderGroups?.length;
266268
return (
267269
<Tbody
268270
key={stakeholder.id}
@@ -310,20 +312,41 @@ export const Stakeholders: React.FC = () => {
310312
className={spacing.pyLg}
311313
>
312314
<ExpandableRowContent>
313-
<DescriptionList>
314-
<DescriptionListGroup>
315-
<DescriptionListTerm>
316-
{t("terms.group(s)")}
317-
</DescriptionListTerm>
318-
{!!stakeholder.stakeholderGroups?.length && (
319-
<DescriptionListDescription>
320-
{stakeholder.stakeholderGroups
321-
?.map((f) => f.name)
322-
.join(", ")}
323-
</DescriptionListDescription>
324-
)}
325-
</DescriptionListGroup>
326-
</DescriptionList>
315+
{hasGroups ? (
316+
<DescriptionList>
317+
<DescriptionListGroup>
318+
<DescriptionListTerm>
319+
{t("terms.group(s)")}
320+
</DescriptionListTerm>
321+
{!!stakeholder.stakeholderGroups?.length && (
322+
<DescriptionListDescription>
323+
{stakeholder.stakeholderGroups
324+
?.map((f) => f.name)
325+
.join(", ")}
326+
</DescriptionListDescription>
327+
)}
328+
</DescriptionListGroup>
329+
</DescriptionList>
330+
) : (
331+
<EmptyState variant="sm">
332+
<EmptyStateIcon icon={CubesIcon} />
333+
<Title headingLevel="h2" size="lg">
334+
{t("composed.noDataStateTitle", {
335+
what: t(
336+
"terms.stakeholderGroups"
337+
).toLowerCase(),
338+
})}
339+
</Title>
340+
<EmptyStateBody>
341+
{t("composed.noDataStateBody", {
342+
how: t("terms.add"),
343+
what: t(
344+
"terms.stakeholderGroup"
345+
).toLowerCase(),
346+
})}
347+
</EmptyStateBody>
348+
</EmptyState>
349+
)}
327350
</ExpandableRowContent>
328351
</Td>
329352
</Tr>

‎client/src/app/pages/controls/tags/tags.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -340,6 +340,7 @@ export const Tags: React.FC = () => {
340340
</Title>
341341
<EmptyStateBody>
342342
{t("composed.noDataStateBody", {
343+
how: t("terms.create"),
343344
what: t("terms.tags").toLowerCase(),
344345
})}
345346
</EmptyStateBody>

‎client/src/app/pages/external/jira/trackers.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -235,6 +235,7 @@ export const JiraTrackers: React.FC = () => {
235235
</Title>
236236
<EmptyStateBody>
237237
{t("composed.noDataStateBody", {
238+
how: t("actions.create"),
238239
what: t("terms.jiraConfig").toLowerCase(),
239240
})}
240241
</EmptyStateBody>

‎client/src/app/pages/identities/identities.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -330,6 +330,7 @@ export const Identities: React.FC = () => {
330330
what: "credentials",
331331
})}
332332
description={t("composed.noDataStateBody", {
333+
how: t("terms.create"),
333334
what: "credential",
334335
})}
335336
/>

‎client/src/app/pages/migration-waves/components/manage-applications-form.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -262,6 +262,7 @@ export const ManageApplicationsForm: React.FC<ManageApplicationsFormProps> = ({
262262
what: t("terms.applications").toLowerCase(),
263263
})}
264264
description={t("composed.noDataStateBody", {
265+
how: t("terms.add"),
265266
what: t("terms.application").toLowerCase(),
266267
})}
267268
/>

0 commit comments

Comments
 (0)