ConsentTable:FC<{}> = observer(() => {const {consentStore,optionStore: { contexts }} = useStores();const {busyConsent,pageCollection,perPage,count,truncatedIpsCount,filters: {page: currentPage,referer: currentReferer,context: currentContext,dates: currentDates,ip: currentIp}} = consentStore;const [bannerRecord, setBannerRecord] = useState<Consent>();const [bannerVisible, setBannerVisible] = useState(true);const contextKeys = Object.keys(contexts);// Provide preset ranges to the userconst availableRanges = useAvailableDateRangesForFilter();const fetchAll = useCallback(async () => {try {await consentStore.fetchAll();} catch (e) {message.error(e.responseJSON.message);}}, []);// Initially fetch first pageuseEffect(() => {fetchAll();}, []);const hintText = useConfigHintText("list-of-consents");const hintTextDeleted = useConfigHintText("consents-deleted");const getColumnSearchProps = useCallback((): Partial<ComponentProps<typeof Column>> => {return {// eslint-disable-next-line react/display-namefilterDropdown: ({ setSelectedKeys, selectedKeys, confirm, clearFilters }) => (<div style={{ padding: 8 }}><InputautoFocusvalue={selectedKeys[0]}onChange={(e) => setSelectedKeys(e.target.value ? [e.target.value] : [])}style={{ width: 188, marginBottom: 8, display: "block" }}/><button className="button-primary right" style={{ marginLeft: 10 }} onClick={() => confirm()}><SearchOutlined /> {__("Search")}</button><button className="button right" onClick={clearFilters}>{__("Reset")}</button><div className="clear" /></div>),// eslint-disable-next-line react/display-namefilterIcon: (filtered) => <SearchOutlined style={{ color: filtered ? "#1890ff" : undefined }} />};}, []);return (<>{bannerRecord && (<ConsentRecordBannerrecord={bannerRecord}visible={bannerVisible}onClose={() => setBannerVisible(false)}/>)}<div style={{ textAlign: "right", marginBottom: 15 }}>{contextKeys.length > 1 && (<><label><Selectstyle={{ width: 200, textAlign: "left" }}value={currentContext}onSelect={(value) => {consentStore.applyPage(1);consentStore.applyContext(value);fetchAll();}}>{contextKeys.map((context) => (<Select.Option value={context} key={context}>{contexts[context]}</Select.Option>))}</Select></label><Divider type="vertical" /></>)}<label>{__("Period")}:{" "}<DateRangePickervalue={/* Ant design relies on moment 2.27 and typings are currently incompatible with other moment typings */ currentDates as any}ranges={availableRanges as any}onChange={(dates) => {consentStore.applyPage(1);consentStore.applyDates(dates || [undefined, undefined]);fetchAll();}}/></label><Divider type="vertical" /><label style={{ textAlign: "left" }}><ConsentRefererSelectvalue={currentReferer}onChange={(referer) => {consentStore.applyPage(1);consentStore.applyReferer(referer);fetchAll();}}/></label></div>{truncatedIpsCount > 0 && !!currentIp && (<div className="notice notice-warning inline below-h2 notice-alt" style={{ margin: "10px 0" }}><p>{__("For data protection reasons, IP addresses, depending on the configuration of the cookie banner, were only shortened by the last octet and stored hashed. In this case, you can only assign consents to individual IP addresses with a high probability, but not with absolute certainty. Therefore, also match the time of consent to narrow down your search for the proper consent!")}</p></div>)}<Table<Consent>pagination={{current: currentPage,pageSize: perPage,total: count,showTotal: (total, range) => `${range[0]}-${range[1]} / ${total}`,showSizeChanger: false}}locale={{ emptyText: <Empty description={__("No data")} /> }}loading={busyConsent}dataSource={Array.from(pageCollection.values())}rowKey="id"size="small"borderedexpandable={{// eslint-disable-next-line react/display-nameexpandedRowRender: (record) => (<div style={{ background: "white", padding: 10 }}><ConsentTableRecordExpandrecord={record}onPreview={(r) => {setBannerRecord(r);setBannerVisible(true);}}/></div>),rowExpandable: () => true,// eslint-disable-next-line react/display-nameexpandIcon: ({ expanded, onExpand, record }) => (<Tagstyle={{ cursor: "pointer" }}onClick={(e) => onExpand(record, e)}icon={expanded ? <MinusSquareOutlined /> : <PlusSquareOutlined />}>{expanded ? __("Less") : __("More")}</Tag>)}}onChange={({ current }, filters) => {const uuid = (filters.uuid?.[0] as string) || "";const ip = (filters.ip?.[0] as string) || "";consentStore.applyPage(current);consentStore.applyUuid(uuid);consentStore.applyIp(ip);fetchAll();}}footer={() => (<PopconfirmoverlayStyle={{ maxWidth: 300 }}arrowPointAtCentertitle={_i(__("Are you sure you want to delete all consents? You should only do this if it is absolutely necessary. In case you want to continue, make sure you have {{a}}exported{{/a}} all consents beforehand (for legal reasons)."),{a: <a href="#/import" />})}okText={__("I am sure!")}cancelText={__("Cancel")}placement="topRight"onConfirm={() =>window.confirm(__("Just to be sure: Do you really want to delete all consents?")) &&consentStore.deleteAll()}><button className="button-link">{__("Delete all consents")}</button></Popconfirm>)}><Column<Consent>title={__("Time of consent")}dataIndex="created"key="created"render={(value, record) => {const { created } = record;return (<>{new Date(created).toLocaleString(document.documentElement.lang)}{" "}{record.dnt && (<Tooltiptitle={__("This consent was given automatically because the browser sent a 'Do Not Track' header. Accordingly, only essential services have been consented to.")}><Tag color="magenta">{__("Do Not Track")}</Tag></Tooltip>)}{record.blocker > 0 && (<Tooltip title={__("This consent has been given in a content blocker.")}><Tag color="cyan">{__("Content Blocker")}</Tag></Tooltip>)}{record.forwarded > 0 && (<Tooltip title={__("This consent was implicitly given by Consent Forwarding.")}><Tag color="green">{record.forwarded_blocker? __("Forwarded through Content Blocker"): __("Forwarded")}</Tag></Tooltip>)}{record.custom_bypass && (<Tooltip title={__("This consent was implicitly given by a configured bypass.")}><Tag color="magenta">{record.custom_bypass_readable}</Tag></Tooltip>)}</>);}}/><Column<Consent>title={<Tooltip title={__("Unique name of the consent given")}><span>{__("UUID")} <QuestionCircleOutlined style={{ color: "#9a9a9a" }} /></span></Tooltip>}dataIndex="uuid"key="uuid"render={(value, record) => <code>{record.uuid}</code>}{...(getColumnSearchProps() as any)}/><Column<Consent>title={<Tooltiptitle={__("If you have allowed to log IP addresses, you can view them here. Otherwise you will see a salted hash of the IP address (truncated).")}><span>{__("IP")} <QuestionCircleOutlined style={{ color: "#9a9a9a" }} /></span></Tooltip>}dataIndex="ip"key="ip"render={(value, record) =>record.ipv4 ? (<><code>{record.ipv4}</code>{!!currentIp && record.ipv4 === currentIp && (<Tag style={{ marginLeft: 5 }} color="blue">{__("Exact match")}</Tag>)}</>) : record.ipv6 ? (<><code>{record.ipv6}</code>{!!currentIp && record.ipv6 === currentIp && (<Tag style={{ marginLeft: 5 }} color="blue">{__("Exact match")}</Tag>)}</>) : record.ipv4_hash ? (<Tooltip title={record.ipv4_hash}><code>{record.ipv4_hash.slice(0, 8)}</code></Tooltip>) : (<Tooltip title={record.ipv6_hash}><code>{record.ipv6_hash.slice(0, 8)}</code></Tooltip>)}{...(getColumnSearchProps() as any)}/><Column<Consent>title={__("Accepted services")}dataIndex="decision"key="decision"render={(value, record) => record.decision_labels.map((label) => <Tag key={label}>{label}</Tag>)}/></Table><p className="description" style={{ maxWidth: 800, margin: "30px auto 0", textAlign: "center" }}>{hintText}</p><p className="description" style={{ maxWidth: 800, margin: "30px auto 0", textAlign: "center" }}>{hintTextDeleted}</p></>);})