Skip to content

Commit

Permalink
🐛 Fix effort width & visibility conditional removed in app table (#1947)
Browse files Browse the repository at this point in the history 
Noticed some odd behavior in the app table. 

Width and column visibility conditional removed from the effort col here:

https://github.com/konveyor/tackle2-ui/pull/1846/files#diff-7215462f9c61fbbe2362b5f02a64aa2f56a9b6b47fab387f8a7e9c5819c92a8eL848

Before: 
![image](https://github.com/konveyor/tackle2-ui/assets/11218376/249e9953-1d41-49ec-a6a7-526e63eeacba)

After:
<img width="1912" alt="Screenshot 2024-06-07 at 10 58 22 AM"
src="https://github.com/konveyor/tackle2-ui/assets/11218376/79211a81-7ad2-4472-b687-84f1de767187">

This PR fixes these regressions in the app table and replaces custom
tooltips with the tooltip behavior included within the <Th/> component
via the info prop.

---------

Signed-off-by: Ian Bolton <ibolton@redhat.com>
  • Loading branch information
@ibolton336
ibolton336 committed Jun 10, 2024
1 parent 799ee18 commit 2d55320
Show file tree
Hide file tree
Showing 4 changed files with 28 additions and 93 deletions.
36 changes: 10 additions & 26 deletions client/src/app/pages/applications/applications-table/applications-table.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,14 +15,8 @@ import {
DropdownItem,
Modal,
Tooltip,
Flex,
FlexItem,
} from "@patternfly/react-core";
import {
PencilAltIcon,
QuestionCircleIcon,
TagIcon,
} from "@patternfly/react-icons";
import { PencilAltIcon, TagIcon } from "@patternfly/react-icons";
import {
Table,
Thead,
Expand Down Expand Up @@ -847,25 +841,15 @@ export const ApplicationsTable: React.FC = () => {
{getColumnVisibility("tags") && (
<Th {...getThProps({ columnKey: "tags" })} width={10} />
)}
<Th {...getThProps({ columnKey: "effort" })}>
<Flex
flexWrap={{ default: "nowrap" }}
spaceItems={{ default: "spaceItemsSm" }}
alignItems={{ default: "alignItemsCenter" }}
>
<FlexItem>{t("terms.effort")}</FlexItem>
<FlexItem>
<Tooltip
content={t("message.applicationEffortTooltip")}
position="top"
>
<Flex>
<QuestionCircleIcon />
</Flex>
</Tooltip>
</FlexItem>
</Flex>
</Th>
{getColumnVisibility("effort") && (
<Th
{...getThProps({ columnKey: "effort" })}
width={10}
info={{
tooltip: `${t("message.applicationEffortTooltip")}`,
}}
/>
)}
<Th width={10} />
</TableHeaderContentWithControls>
</Tr>
Expand Down
28 changes: 4 additions & 24 deletions client/src/app/pages/issues/affected-applications/affected-applications.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,16 +2,13 @@ import * as React from "react";
import {
Breadcrumb,
BreadcrumbItem,
Flex,
FlexItem,
PageSection,
PageSectionVariants,
Text,
TextContent,
Toolbar,
ToolbarContent,
ToolbarItem,
Tooltip,
} from "@patternfly/react-core";
import { useTranslation } from "react-i18next";
import { Table, Tbody, Td, Th, Thead, Tr } from "@patternfly/react-table";
Expand Down Expand Up @@ -39,7 +36,6 @@ import {
} from "../helpers";
import { IssueDetailDrawer } from "../issue-detail-drawer";
import { TablePersistenceKeyPrefix } from "@app/Constants";
import { QuestionCircleIcon } from "@patternfly/react-icons";

interface IAffectedApplicationsRouteParams {
ruleset: string;
Expand Down Expand Up @@ -187,26 +183,10 @@ export const AffectedApplications: React.FC = () => {
<Th {...getThProps({ columnKey: "businessService" })} />
<Th
{...getThProps({ columnKey: "effort" })}
style={{ paddingRight: 0 }}
>
<Flex
flexWrap={{ default: "nowrap" }}
spaceItems={{ default: "spaceItemsSm" }}
alignItems={{ default: "alignItemsCenter" }}
>
<FlexItem>{t("terms.effort")}</FlexItem>
<FlexItem>
<Tooltip
content={t("message.applicationEffortTooltip")}
position="top"
>
<Flex>
<QuestionCircleIcon />
</Flex>
</Tooltip>
</FlexItem>
</Flex>
</Th>
info={{
tooltip: `${t("message.applicationEffortTooltip")}`,
}}
/>
<Th {...getThProps({ columnKey: "incidents" })} />
</TableHeaderContentWithControls>
</Tr>
Expand Down
31 changes: 8 additions & 23 deletions client/src/app/pages/issues/issue-detail-drawer/issue-affected-files-table.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,9 @@ import * as React from "react";
import { useTranslation } from "react-i18next";
import {
Button,
Flex,
FlexItem,
Toolbar,
ToolbarContent,
ToolbarItem,
Tooltip,
} from "@patternfly/react-core";
import { Table, Tbody, Td, Th, Thead, Tr } from "@patternfly/react-table";
import spacing from "@patternfly/react-styles/css/utilities/Spacing/spacing";
Expand All @@ -29,7 +26,6 @@ import { SimplePagination } from "@app/components/SimplePagination";
import { FileIncidentsDetailModal } from "./file-incidents-detail-modal";
import { FilterToolbar, FilterType } from "@app/components/FilterToolbar";
import PathDisplay from "./path-display";
import { QuestionCircleIcon } from "@patternfly/react-icons";

export interface IIssueAffectedFilesTableProps {
issue: AnalysisIssue;
Expand Down Expand Up @@ -140,25 +136,14 @@ export const IssueAffectedFilesTable: React.FC<
{...getThProps({ columnKey: "incidents" })}
modifier="nowrap"
/>
<Th {...getThProps({ columnKey: "effort" })}>
<Flex
flexWrap={{ default: "nowrap" }}
spaceItems={{ default: "spaceItemsSm" }}
alignItems={{ default: "alignItemsCenter" }}
>
<FlexItem>{t("terms.effort")}</FlexItem>
<FlexItem>
<Tooltip
content={t("message.affectedAppEffortTooltip")}
position="top"
>
<Flex>
<QuestionCircleIcon />
</Flex>
</Tooltip>
</FlexItem>
</Flex>
</Th>
<Th
{...getThProps({ columnKey: "effort" })}
width={10}
info={{
tooltip: `${t("message.affectedAppEffortTooltip")}`,
}}
modifier="nowrap"
/>
</TableHeaderContentWithControls>
</Tr>
</Thead>
Expand Down
26 changes: 6 additions & 20 deletions client/src/app/pages/issues/issues-table.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -70,7 +70,6 @@ import { AffectedAppsLink } from "./affected-apps-link";
import { ConditionalTooltip } from "@app/components/ConditionalTooltip";
import { IssueDetailDrawer } from "./issue-detail-drawer";
import { IssueDescriptionAndLinks } from "./components/issue-description-and-links";
import { QuestionCircleIcon } from "@patternfly/react-icons";

export interface IIssuesTableProps {
mode: "allIssues" | "singleApp";
Expand Down Expand Up @@ -329,25 +328,12 @@ export const IssuesTable: React.FC<IIssuesTableProps> = ({ mode }) => {
<Th {...getThProps({ columnKey: "category" })} />
<Th {...getThProps({ columnKey: "source" })} />
<Th {...getThProps({ columnKey: "target" })} />
<Th {...getThProps({ columnKey: "effort" })}>
<Flex
flexWrap={{ default: "nowrap" }}
spaceItems={{ default: "spaceItemsSm" }}
alignItems={{ default: "alignItemsCenter" }}
>
<FlexItem>{t("terms.effort")}</FlexItem>
<FlexItem>
<Tooltip
content={t("message.issuesEffortTooltip")}
position="top"
>
<Flex>
<QuestionCircleIcon />
</Flex>
</Tooltip>
</FlexItem>
</Flex>
</Th>
<Th
{...getThProps({ columnKey: "effort" })}
info={{
tooltip: `${t("message.issuesEffortTooltip")}`,
}}
/>
<Th {...getThProps({ columnKey: "affected" })} />
</TableHeaderContentWithControls>
</Tr>
Expand Down

0 comments on commit 2d55320

Please sign in to comment.