Skip to content

Commit

Permalink
Prevent stacking of action cells on smaller screens
Browse files Browse the repository at this point in the history 
Signed-off-by: EstyBiton <[email protected]>
  • Loading branch information
@EstyBiton
EstyBiton committed Oct 29, 2024
1 parent 1b4a17b commit 03eff5d
Show file tree
Hide file tree
Showing 2 changed files with 96 additions and 96 deletions.
154 changes: 77 additions & 77 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 @@ -16,6 +16,7 @@ import {
DropdownItem,
Modal,
Tooltip,
OverflowMenu,
} from "@patternfly/react-core";
import {
PencilAltIcon,
Expand Down Expand Up @@ -955,89 +956,88 @@ export const ApplicationsTable: React.FC = () => {
{application?.effort ?? "-"}
</Td>
)}

<Td isActionCell id="pencil-action">
{applicationWriteAccess && (
<Tooltip content={t("actions.edit")}>
<Button
variant="plain"
icon={<PencilAltIcon />}
onClick={() =>
setSaveApplicationModalState(application)
}
/>
</Tooltip>
)}
</Td>
<Td isActionCell id="row-actions">
<ActionsColumn
items={[
assessmentWriteAccess && {
title: t("actions.assess"),
onClick: () => assessSelectedApp(application),
},
assessmentWriteAccess &&
(application.assessments?.length ?? 0) > 0 && {
title: t("actions.discardAssessment"),
onClick: () =>
setAssessmentToDiscard(application),
<Td isActionCell id="actions">
<OverflowMenu breakpoint="sm">
{applicationWriteAccess && (
<Tooltip content={t("actions.edit")}>
<Button
variant="plain"
icon={<PencilAltIcon />}
onClick={() =>
setSaveApplicationModalState(application)
}
/>
</Tooltip>
)}
<ActionsColumn
items={[
assessmentWriteAccess && {
title: t("actions.assess"),
onClick: () => assessSelectedApp(application),
},
reviewsWriteAccess && {
title: t("actions.review"),
onClick: () => reviewSelectedApp(application),
},
reviewsWriteAccess &&
application?.review && {
title: t("actions.discardReview"),
onClick: () => setReviewToDiscard(application),
assessmentWriteAccess &&
(application.assessments?.length ?? 0) > 0 && {
title: t("actions.discardAssessment"),
onClick: () =>
setAssessmentToDiscard(application),
},
reviewsWriteAccess && {
title: t("actions.review"),
onClick: () => reviewSelectedApp(application),
},
dependenciesWriteAccess && {
title: t("actions.manageDependencies"),
onClick: () =>
setApplicationDependenciesToManage(application),
},
credentialsReadAccess &&
applicationWriteAccess && {
title: t("actions.manageCredentials"),
reviewsWriteAccess &&
application?.review && {
title: t("actions.discardReview"),
onClick: () => setReviewToDiscard(application),
},
dependenciesWriteAccess && {
title: t("actions.manageDependencies"),
onClick: () =>
setSaveApplicationsCredentialsModalState([
application,
]),
setApplicationDependenciesToManage(application),
},
analysesReadAccess &&
!!application.tasks.currentAnalyzer && {
title: t("actions.analysisDetails"),
onClick: () => {
const taskId =
application.tasks.currentAnalyzer?.id;
if (taskId && application.id) {
history.push(
formatPath(
Paths.applicationsAnalysisDetails,
{
applicationId: application.id,
taskId,
}
)
);
}
credentialsReadAccess &&
applicationWriteAccess && {
title: t("actions.manageCredentials"),
onClick: () =>
setSaveApplicationsCredentialsModalState([
application,
]),
},
analysesReadAccess &&
!!application.tasks.currentAnalyzer && {
title: t("actions.analysisDetails"),
onClick: () => {
const taskId =
application.tasks.currentAnalyzer?.id;
if (taskId && application.id) {
history.push(
formatPath(
Paths.applicationsAnalysisDetails,
{
applicationId: application.id,
taskId,
}
)
);
}
},
},
tasksReadAccess &&
tasksWriteAccess &&
isTaskCancellable(application) && {
title: t("actions.cancelAnalysis"),
onClick: () => cancelAnalysis(application),
},
applicationWriteAccess && { isSeparator: true },
applicationWriteAccess && {
title: t("actions.delete"),
onClick: () =>
setApplicationsToDelete([application]),
isDanger: true,
},
tasksReadAccess &&
tasksWriteAccess &&
isTaskCancellable(application) && {
title: t("actions.cancelAnalysis"),
onClick: () => cancelAnalysis(application),
},
applicationWriteAccess && { isSeparator: true },
applicationWriteAccess && {
title: t("actions.delete"),
onClick: () =>
setApplicationsToDelete([application]),
isDanger: true,
},
].filter(Boolean)}
/>
].filter(Boolean)}
/>
</OverflowMenu>
</Td>
</TableRowContentWithControls>
</Tr>
Expand Down
38 changes: 19 additions & 19 deletions client/src/app/pages/controls/ControlTableActionButtons.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import React from "react";
import { useTranslation } from "react-i18next";
import { controlsWriteScopes, RBAC, RBAC_TYPE } from "@app/rbac";
import { ActionsColumn, Td } from "@patternfly/react-table";
import { Button, Tooltip } from "@patternfly/react-core";
import { Button, OverflowMenu, Tooltip } from "@patternfly/react-core";
import { PencilAltIcon } from "@patternfly/react-icons";

export interface ControlTableActionButtonsProps {
Expand All @@ -23,25 +23,25 @@ export const ControlTableActionButtons: React.FC<
const { t } = useTranslation();
return (
<RBAC allowedPermissions={controlsWriteScopes} rbacType={RBAC_TYPE.Scope}>
<Td isActionCell id="pencil-action">
<Tooltip content={t("actions.edit")}>
<Button variant="plain" icon={<PencilAltIcon />} onClick={onEdit} />
</Tooltip>
</Td>
<Td isActionCell id="row-actions">
<ActionsColumn
items={[
{
isAriaDisabled: isDeleteEnabled,
tooltipProps: {
content: isDeleteEnabled ? deleteTooltipMessage : "",
<Td isActionCell id="action">
<OverflowMenu breakpoint="sm">
<Tooltip content={t("actions.edit")}>
<Button variant="plain" icon={<PencilAltIcon />} onClick={onEdit} />
</Tooltip>
<ActionsColumn
items={[
{
isAriaDisabled: isDeleteEnabled,
tooltipProps: {
content: isDeleteEnabled ? deleteTooltipMessage : "",
},
isDanger: isDeleteEnabled == false,
title: t("actions.delete"),
onClick: onDelete,
},
isDanger: isDeleteEnabled == false,
title: t("actions.delete"),
onClick: onDelete,
},
]}
/>
]}
/>
</OverflowMenu>
</Td>
</RBAC>
);
Expand Down

0 comments on commit 03eff5d

Please sign in to comment.