Files
redash/client/app/components/groups/DetailsPageSidebar.jsx
Rafael Wendel fb90b501cb Improve icon a11y (#5424)
* Added screen reader CSS

* Added description to external links

* Added spinner icon accessibility

* Added accessibility to exclamation and big message

* Added question and exclamation accessibility

* Hide decorative icons

* Standardized link design

* Added a11y to refresh icons

* Added aria-label to anchors and buttons

* Added a11y to conditional icons

* Added applicable labels to Ant Icons

* Changed escape to interpolation

* Replaced external links with opens in new tab

* Improved Tooltip hosts

* Added aria live to temporary elements

* Removed mistakenly added redundant helper

* Undoes unnecessarily added interpolation

* Replaced empty label with hidden

* Improved full icon label

* Improved display of live regions

* Added note

* remove unused class

* Created unique id

* Remove TODOs

* Proper action label

* Improved feedback for autocomplete toggle

* feature: add id hook

* refactor: use id hook

* standardize white space
2021-03-22 19:49:36 -03:00

76 lines
2.1 KiB
JavaScript

import React from "react";
import PropTypes from "prop-types";
import Button from "antd/lib/button";
import Divider from "antd/lib/divider";
import * as Sidebar from "@/components/items-list/components/Sidebar";
import { ControllerType } from "@/components/items-list/ItemsList";
import DeleteGroupButton from "./DeleteGroupButton";
import { currentUser } from "@/services/auth";
export default function DetailsPageSidebar({
controller,
group,
items,
canAddMembers,
onAddMembersClick,
canAddDataSources,
onAddDataSourcesClick,
onGroupDeleted,
}) {
const canRemove = group && currentUser.isAdmin && group.type !== "builtin";
return (
<React.Fragment>
<Sidebar.Menu items={items} selected={controller.params.currentPage} />
{canAddMembers && (
<Button className="w-100 m-t-5" type="primary" onClick={onAddMembersClick}>
<i className="fa fa-plus m-r-5" aria-hidden="true" />
Add Members
</Button>
)}
{canAddDataSources && (
<Button className="w-100 m-t-5" type="primary" onClick={onAddDataSourcesClick}>
<i className="fa fa-plus m-r-5" aria-hidden="true" />
Add Data Sources
</Button>
)}
{canRemove && (
<React.Fragment>
<Divider dashed className="m-t-10 m-b-10" />
<DeleteGroupButton className="w-100" group={group} onClick={onGroupDeleted}>
Delete Group
</DeleteGroupButton>
</React.Fragment>
)}
</React.Fragment>
);
}
DetailsPageSidebar.propTypes = {
controller: ControllerType.isRequired,
group: PropTypes.object, // eslint-disable-line react/forbid-prop-types
items: PropTypes.array.isRequired, // eslint-disable-line react/forbid-prop-types
canAddMembers: PropTypes.bool,
onAddMembersClick: PropTypes.func,
canAddDataSources: PropTypes.bool,
onAddDataSourcesClick: PropTypes.func,
onGroupDeleted: PropTypes.func,
};
DetailsPageSidebar.defaultProps = {
group: null,
canAddMembers: false,
onAddMembersClick: null,
canAddDataSources: false,
onAddDataSourcesClick: null,
onGroupDeleted: null,
};