1import { css } from '@emotion/react';
2import React from 'react';
3
4import { androidPermissions, AndroidPermission, PermissionReference } from './data';
5
6import Permalink from '~/components/Permalink';
7import { InlineCode } from '~/components/base/code';
8import { Quote } from '~/components/base/paragraph';
9import { Cell, HeaderCell, Row, Table, TableHead } from '~/ui/components/Table';
10
11// TODO(cedric): all commented code is related to the "granter" column.
12// This column defines if the permission is granted by the system or user (requires notification).
13// We have to clearly communicate what it means before showing it to the user.
14
15type AndroidPermissionsProps = {
16  permissions: PermissionReference<AndroidPermission>[];
17};
18
19// const grantedByInfo = 'Some permissions are granted by the system without user approval';
20
21export function AndroidPermissions({ permissions }: AndroidPermissionsProps) {
22  const list = React.useMemo(() => getPermissions(permissions), [permissions]);
23
24  return (
25    <Table>
26      <TableHead>
27        <Row>
28          <HeaderCell>Android Permission</HeaderCell>
29          {/* <HeaderCell>
30            <span css={grantedByInfoStyle} title={grantedByInfo}>
31              Granted by <QuestionIcon size={12} title={grantedByInfo} />
32            </span>
33          </HeaderCell> */}
34          <HeaderCell>Description</HeaderCell>
35        </Row>
36      </TableHead>
37      <tbody>
38        {list.map(permission => (
39          <AndroidPermissionRow key={permission.name} {...permission} />
40        ))}
41      </tbody>
42    </Table>
43  );
44}
45
46function AndroidPermissionRow({
47  name,
48  description,
49  explanation,
50  warning,
51  apiDeprecated,
52}: AndroidPermission) {
53  return (
54    <Row subtle={!!apiDeprecated}>
55      <Cell>
56        <Permalink id={`permission-${name.toLowerCase()}`}>
57          <span>
58            <InlineCode>{name}</InlineCode>
59          </span>
60        </Permalink>
61      </Cell>
62      {/* <Cell>
63        <i>{getPermissionGranter(permission)}</i>
64      </Cell> */}
65      <Cell>
66        {!!description && (
67          <p css={(warning || explanation) && descriptionSpaceStyle}>{description}</p>
68        )}
69        {!!warning && (
70          <Quote css={quoteStyle}>
71            <span>⚠️ {warning}</span>
72          </Quote>
73        )}
74        {explanation && !warning && (
75          <Quote css={quoteStyle}>
76            <span dangerouslySetInnerHTML={{ __html: explanation }} />
77          </Quote>
78        )}
79      </Cell>
80    </Row>
81  );
82}
83
84function getPermissions(permissions: AndroidPermissionsProps['permissions']) {
85  return permissions
86    .map(permission =>
87      typeof permission === 'string'
88        ? androidPermissions[permission]
89        : { ...androidPermissions[permission.name], ...permission }
90    )
91    .filter(Boolean);
92}
93
94// const grantedByInfoStyle = css`
95//   white-space: nowrap;
96// `;
97
98const descriptionSpaceStyle = css`
99  margin-bottom: 1rem;
100`;
101
102const quoteStyle = css`
103  margin-bottom: 0;
104`;
105
106// function getPermissionGranter(permission: AndroidPermission): 'user' | 'system' | 'none' {
107//   if (!permission.protection) return 'none';
108//   if (permission.protection.includes('dangerous')) return 'user';
109//   return 'system';
110// }
111