All files / libs/reporting/dashboards/components/src/lib/home-legacy/widget-title WidgetTitle.tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import { IconArrowUpRight } from '@tabler/icons-react';
import { memo, type ReactNode } from 'react';
import { generatePath } from 'react-router-dom';

import { Group, IconButtonLink, Typography } from '@allshares/studio-design-system';
import { routes } from '@amalia/core/routes';
import { Link } from '@amalia/ext/react-router-dom';
import { canViewThisCustomReport } from '@amalia/kernel/auth/shared';
import { useAbilityContext } from '@amalia/kernel/auth/state';
import { type CustomReportsPresetsEnum } from '@amalia/reporting/custom-reports/shared';

interface WidgetTitleProps {
  readonly customReportId?: CustomReportsPresetsEnum;
  readonly actions?: ReactNode;
  readonly title: ReactNode;
}

export const WidgetTitle = memo(function WidgetTitle({ customReportId, title, actions }: WidgetTitleProps) {
  const ability = useAbilityContext();

  const canVisitCustomReport =
    !!customReportId &&
    // Presets don't have folders.
    canViewThisCustomReport(ability, { folder: null });

  return (
    <Group
      align="center"
      gap={36}
      justify="space-between"
    >
      <Link
        openInNewTab
        unsetStyle
        to={canVisitCustomReport ? generatePath(routes.CUSTOM_REPORT_ITEM, { reportId: customReportId }) : undefined}
      >
        <Typography variant="heading3Bold">{title}</Typography>
      </Link>

      <Group gap={12}>
        {actions}

        {!!canVisitCustomReport && (
          <IconButtonLink
            icon={<IconArrowUpRight />}
            label=""
            to={
              <Link
                openInNewTab
                to={generatePath(routes.CUSTOM_REPORT_ITEM, { reportId: customReportId })}
              />
            }
          />
        )}
      </Group>
    </Group>
  );
});