All files / libs/tenants/teams/views/details/src/lib/components/header TeamDetailsHeader.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
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import { css } from '@emotion/react';
import { memo } from 'react';
import { FormattedMessage, useIntl } from 'react-intl';
import { generatePath } from 'react-router-dom';

import { Breadcrumbs, PageHeader, Stack, TextLink, Typography } from '@allshares/studio-design-system';
import { routes } from '@amalia/core/routes';
import { Link } from '@amalia/ext/react-router-dom';
import { canModifyTeams } from '@amalia/kernel/auth/shared';
import { useAbilityContext } from '@amalia/kernel/auth/state';
import { type TeamContract, type TeamTreeNode } from '@amalia/tenants/teams/types';

import { TeamActions } from './team-actions/TeamActions';
import { TeamBreadcrumbsSelector } from './team-breacrumbs-selector/TeamBreadcrumbsSelector';
import { TeamNameQuickEdit } from './team-name-quick-edit/TeamNameQuickEdit';

export type TeamDetailsHeaderProps = {
  readonly allTeamNodes: TeamTreeNode<TeamContract>[];
  readonly teamNode: TeamTreeNode<TeamContract>;
};

export const TeamDetailsHeader = memo(function TeamDetailsHeader({ allTeamNodes, teamNode }: TeamDetailsHeaderProps) {
  const ability = useAbilityContext();
  const { formatMessage } = useIntl();

  return (
    <PageHeader>
      <PageHeader.Row
        left={
          <Breadcrumbs
            back={
              <Breadcrumbs.BackLink
                label={formatMessage({ defaultMessage: 'Go back to teams' })}
                to={generatePath(routes.TEAMS)}
              />
            }
          >
            {allTeamNodes.length > 1 && (
              <TeamBreadcrumbsSelector
                allTeamNodes={allTeamNodes}
                selectedTeamId={teamNode.team.id}
              />
            )}
          </Breadcrumbs>
        }
      />

      <PageHeader.Row
        key={teamNode.team.id}
        right={canModifyTeams(ability) && <TeamActions teamNode={teamNode} />}
        left={
          <Stack gap={8}>
            <TeamNameQuickEdit team={teamNode.team} />

            {!!teamNode.parent && (
              <Typography
                variant="bodyBaseRegular"
                css={(theme) => css`
                  color: ${theme.ds.colors.gray[700]};

                  [data-color-scheme='dark'] & {
                    color: ${theme.ds.colors.gray[400]};
                  }
                `}
              >
                <FormattedMessage
                  defaultMessage="Child team of {parentTeamName}"
                  values={{
                    parentTeamName: (
                      <TextLink
                        to={
                          <Link
                            openInNewTab
                            to={generatePath(routes.TEAM_DETAILS, { teamId: teamNode.parent.team.id })}
                          />
                        }
                      >
                        {teamNode.parent.team.name}
                      </TextLink>
                    ),
                  }}
                />
              </Typography>
            )}
          </Stack>
        }
      />
    </PageHeader>
  );
});