All files / libs/lti/components/src/lib/header LtiPlanDetailsHeader.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
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import { css } from '@emotion/react';
import { memo, useMemo } from 'react';
import { useIntl } from 'react-intl';
import { generatePath } from 'react-router-dom';
import { match } from 'ts-pattern';

import { Breadcrumbs, Group, PageHeader, Typography } from '@allshares/studio-design-system';
import { routes } from '@amalia/core/routes';
import { type LtiPlan } from '@amalia/lti/types';

import { LtiPlanAdminStatusBadge } from '../plan/LtiPlanAdminStatusBadge';

import { LtiPlansBreadcrumb } from './breadcrumbs/LtiPlansBreadcrumb';
import { LtiUserBreadcrumb } from './breadcrumbs/LtiUserBreadcrumb';
import { DeleteLtiPlanModalWithButton } from './DeleteLtiPlanModalWithButton';
import { type LtiPlanDetailsTab } from './LtiPlanDetailsHeader.types';

export type LtiPlanDetailsHeaderProps = {
  readonly selectedLtiPlanId: LtiPlan['id'];
  readonly ltiPlan?: LtiPlan;
  readonly withUserBreadcrumb?: boolean;
  readonly currentTab: LtiPlanDetailsTab;
};

export const LtiPlanDetailsHeader = memo(function LtiPlanDetailsHeader({
  selectedLtiPlanId,
  ltiPlan,
  withUserBreadcrumb = false,
  currentTab,
}: LtiPlanDetailsHeaderProps) {
  const { formatMessage } = useIntl();

  const backButtonLink = useMemo(
    () =>
      match(currentTab)
        .with('participant-dashboard', () => generatePath(routes.LTI_PLAN_DETAILS, { ltiPlanId: selectedLtiPlanId }))
        .otherwise(() => generatePath(routes.LTI_PLANS)),
    [currentTab, selectedLtiPlanId],
  );

  return (
    <PageHeader>
      <PageHeader.Row
        left={
          <Breadcrumbs
            back={
              <Breadcrumbs.BackLink
                label={formatMessage({ defaultMessage: 'Go back to the list of plans' })}
                to={backButtonLink}
              />
            }
          >
            <LtiPlansBreadcrumb
              currentTab={currentTab}
              selectedLtiPlanId={selectedLtiPlanId}
            />
            {!!withUserBreadcrumb && <LtiUserBreadcrumb />}
          </Breadcrumbs>
        }
      />

      {!!ltiPlan && (
        <PageHeader.Row
          css={css`
            :hover {
              .delete-button-container {
                opacity: 1;
              }
            }
          `}
          left={
            <Group
              align="center"
              gap={16}
            >
              <Typography variant="heading1Bold">{ltiPlan.name}</Typography>

              <LtiPlanAdminStatusBadge
                withShadow
                ltiPlan={ltiPlan}
                size="large"
              />
            </Group>
          }
          right={
            <div
              className="delete-button-container"
              css={css`
                opacity: 0;
                transition: opacity 0.2s;
              `}
            >
              <DeleteLtiPlanModalWithButton ltiPlan={ltiPlan} />
            </div>
          }
        />
      )}
    </PageHeader>
  );
});