Skip to content

Commit cdc518f

Browse files
alexandrudanpopalexandrudanpop
committed
fix comment
1 parent dd783e6 commit cdc518f

4 files changed

Lines changed: 65 additions & 35 deletions

File tree

‎packages/react-ui/src/app/features/home/components/home-onboarding-view.tsx‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import { PermissionGuard } from '@/app/common/components/permission-guard';
21
import { useAuthorization } from '@/app/common/hooks/authorization-hooks';
32
import {
43
SETTINGS_KEYS,
@@ -62,7 +61,9 @@ const HomeOnboardingView = ({
6261
}));
6362

6463
const { checkAccess } = useAuthorization();
65-
const hasWriteFlowPermission = checkAccess(Permission.WRITE_FLOW);
64+
const hasBenchmarkPermissions =
65+
checkAccess(Permission.WRITE_FLOW) &&
66+
checkAccess(Permission.READ_APP_CONNECTION);
6667

6768
const { mutate: createFlow } = flowsHooks.useCreateFlow(navigate);
6869
const openBenchmarkWizard = useOpenBenchmarkWizard();
@@ -110,14 +111,13 @@ const HomeOnboardingView = ({
110111
return (
111112
<div className="flex flex-col gap-6 flex-1">
112113
{isFinOpsBenchmarkEnabled && (
113-
<PermissionGuard permission={Permission.WRITE_FLOW}>
114-
<FinOpsBenchmarkBanner
115-
variation={benchmarkVariation}
116-
provider={benchmarkProvider}
117-
onActionClick={openBenchmarkWizard}
118-
onViewReportClick={onViewBenchmarkReportClick}
119-
/>
120-
</PermissionGuard>
114+
<FinOpsBenchmarkBanner
115+
variation={benchmarkVariation}
116+
provider={benchmarkProvider}
117+
onActionClick={openBenchmarkWizard}
118+
onViewReportClick={onViewBenchmarkReportClick}
119+
disabled={!hasBenchmarkPermissions}
120+
/>
121121
)}
122122
<ExploreTemplatesCarousel
123123
onSeeAllClick={onExploreTemplatesClick}
@@ -145,7 +145,7 @@ const HomeOnboardingView = ({
145145
<NoWorkflowsPlaceholder
146146
onExploreTemplatesClick={onExploreTemplatesClick}
147147
onNewWorkflowClick={
148-
hasWriteFlowPermission
148+
checkAccess(Permission.WRITE_FLOW)
149149
? () => {
150150
createFlow(undefined);
151151
}

‎packages/react-ui/src/app/features/home/components/home-operational-view.tsx‎

Lines changed: 13 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { PermissionGuard } from '@/app/common/components/permission-guard';
1+
import { useAuthorization } from '@/app/common/hooks/authorization-hooks';
22
import { HomeFlowsTable } from '@/app/features/home/flows-table';
33
import {
44
useDashboardData,
@@ -49,6 +49,11 @@ const HomeOperationalView = ({
4949
variation: benchmarkVariation,
5050
provider: benchmarkProvider,
5151
} = useBenchmarkBannerState();
52+
const { checkAccess } = useAuthorization();
53+
const hasBenchmarkPermissions =
54+
checkAccess(Permission.WRITE_FLOW) &&
55+
checkAccess(Permission.READ_APP_CONNECTION);
56+
5257
const openBenchmarkWizard = useOpenBenchmarkWizard();
5358
const onViewBenchmarkReportClick = () =>
5459
navigate(`/analytics?dashboard=${benchmarkProvider}_benchmark`);
@@ -103,14 +108,13 @@ const HomeOperationalView = ({
103108
)}
104109

105110
{isFinOpsBenchmarkEnabled && (
106-
<PermissionGuard permission={Permission.WRITE_FLOW}>
107-
<FinOpsBenchmarkBanner
108-
variation={benchmarkVariation}
109-
provider={benchmarkProvider}
110-
onActionClick={openBenchmarkWizard}
111-
onViewReportClick={onViewBenchmarkReportClick}
112-
/>
113-
</PermissionGuard>
111+
<FinOpsBenchmarkBanner
112+
variation={benchmarkVariation}
113+
provider={benchmarkProvider}
114+
onActionClick={openBenchmarkWizard}
115+
onViewReportClick={onViewBenchmarkReportClick}
116+
disabled={!hasBenchmarkPermissions}
117+
/>
114118
)}
115119

116120
<HomeFlowsTable

‎packages/ui-components/src/components/finops-benchmark-banner/finops-benchmark-banner.tsx‎

Lines changed: 27 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,8 @@ import { t } from 'i18next';
33
import { LucideBarChart2, Sparkles } from 'lucide-react';
44
import { cn } from '../../lib/cn';
55
import { Button } from '../../ui/button';
6+
import { usePermissionMessage } from '../../ui/permission-message-context';
7+
import { TooltipWrapper } from '../tooltip-wrapper';
68

79
const finOpsBenchmarkBannerClasses =
810
'flex w-full items-center justify-between gap-4 rounded-[8px] border border-input bg-background-800 p-4';
@@ -30,6 +32,7 @@ type FinOpsBenchmarkBannerProps = {
3032
onActionClick?: () => void;
3133
onViewReportClick?: () => void;
3234
className?: string;
35+
disabled?: boolean;
3336
};
3437

3538
const FinOpsBenchmarkBanner = ({
@@ -38,7 +41,10 @@ const FinOpsBenchmarkBanner = ({
3841
onActionClick,
3942
onViewReportClick,
4043
className,
44+
disabled = false,
4145
}: FinOpsBenchmarkBannerProps) => {
46+
const permissionMessage = usePermissionMessage();
47+
const disabledTooltip = disabled ? permissionMessage : undefined;
4248
const providerLabel = PROVIDER_LABELS[provider];
4349

4450
const content =
@@ -70,25 +76,31 @@ const FinOpsBenchmarkBanner = ({
7076
</div>
7177
<div className={finOpsActionsVariants({ variation })}>
7278
{variation === 'report' && (
79+
<TooltipWrapper tooltipText={disabledTooltip}>
80+
<Button
81+
type="button"
82+
variant="ghost"
83+
disabled={disabled}
84+
className="h-auto gap-1 px-0 py-0 text-sm font-bold leading-5 text-primary-200 hover:bg-transparent hover:underline disabled:pointer-events-auto disabled:cursor-not-allowed disabled:opacity-50"
85+
onClick={onViewReportClick}
86+
>
87+
<LucideBarChart2 className="size-[18px]" />
88+
{content.reportLabel}
89+
</Button>
90+
</TooltipWrapper>
91+
)}
92+
<TooltipWrapper tooltipText={disabledTooltip}>
7393
<Button
7494
type="button"
75-
variant="ghost"
76-
className="h-auto gap-1 px-0 py-0 text-sm font-bold leading-5 text-primary-200 hover:bg-transparent hover:underline"
77-
onClick={onViewReportClick}
95+
variant="outline"
96+
disabled={disabled}
97+
className="h-[38px] gap-2 rounded-[8px] border-input bg-background px-3 py-[9px] text-sm font-bold leading-5 text-primary-200 hover:bg-accent/50 disabled:pointer-events-auto disabled:cursor-not-allowed"
98+
onClick={onActionClick}
7899
>
79-
<LucideBarChart2 className="size-[18px]" />
80-
{content.reportLabel}
100+
<Sparkles className="size-5" />
101+
{content.actionLabel}
81102
</Button>
82-
)}
83-
<Button
84-
type="button"
85-
variant="outline"
86-
className="h-[38px] gap-2 rounded-[8px] border-input bg-background px-3 py-[9px] text-sm font-bold leading-5 text-primary-200 hover:bg-accent/50"
87-
onClick={onActionClick}
88-
>
89-
<Sparkles className="size-5" />
90-
{content.actionLabel}
91-
</Button>
103+
</TooltipWrapper>
92104
</div>
93105
</div>
94106
);

‎packages/ui-components/src/stories/finops-benchmark-banner/finops-benchmark-banner.stories.tsx‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,3 +41,17 @@ export const AzureReport: Story = {
4141
provider: 'azure',
4242
},
4343
};
44+
45+
export const DisabledDefault: Story = {
46+
args: {
47+
disabled: true,
48+
},
49+
};
50+
51+
export const DisabledReport: Story = {
52+
args: {
53+
variation: 'report',
54+
provider: 'aws',
55+
disabled: true,
56+
},
57+
};

0 commit comments

Comments
 (0)