ResourcesTable.js 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309
  1. function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
  2. /*
  3. * Copyright 2018 Red Hat, Inc. and/or its affiliates.
  4. *
  5. * Licensed under the Apache License, Version 2.0 (the "License");
  6. * you may not use this file except in compliance with the License.
  7. * You may obtain a copy of the License at
  8. *
  9. * http://www.apache.org/licenses/LICENSE-2.0
  10. *
  11. * Unless required by applicable law or agreed to in writing, software
  12. * distributed under the License is distributed on an "AS IS" BASIS,
  13. * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  14. * See the License for the specific language governing permissions and
  15. * limitations under the License.
  16. */
  17. import * as React from "../../../../common/keycloak/web_modules/react.js";
  18. import { DataList, DataListItem, DataListItemRow, DataListCell, DataListToggle, DataListContent, DataListItemCells, Level, LevelItem, Button, DataListAction, DataListActionVisibility, Dropdown, DropdownPosition, DropdownItem, KebabToggle } from "../../../../common/keycloak/web_modules/@patternfly/react-core.js";
  19. import { css } from "../../../../common/keycloak/web_modules/@patternfly/react-styles.js";
  20. import { Remove2Icon, RepositoryIcon, ShareAltIcon, EditAltIcon } from "../../../../common/keycloak/web_modules/@patternfly/react-icons.js";
  21. import { AccountServiceContext } from "../../account-service/AccountServiceContext.js";
  22. import { PermissionRequest } from "./PermissionRequest.js";
  23. import { ShareTheResource } from "./ShareTheResource.js";
  24. import { Msg } from "../../widgets/Msg.js";
  25. import { AbstractResourcesTable } from "./AbstractResourceTable.js";
  26. import { EditTheResource } from "./EditTheResource.js";
  27. import { ContentAlert } from "../ContentAlert.js";
  28. import EmptyMessageState from "../../widgets/EmptyMessageState.js";
  29. import { ContinueCancelModal } from "../../widgets/ContinueCancelModal.js";
  30. export class ResourcesTable extends AbstractResourcesTable {
  31. constructor(props, context) {
  32. super(props);
  33. _defineProperty(this, "context", void 0);
  34. _defineProperty(this, "onToggle", row => {
  35. const newIsRowOpen = this.state.isRowOpen;
  36. newIsRowOpen[row] = !newIsRowOpen[row];
  37. if (newIsRowOpen[row]) this.fetchPermissions(this.props.resources.data[row], row);
  38. this.setState({
  39. isRowOpen: newIsRowOpen
  40. });
  41. });
  42. _defineProperty(this, "onContextToggle", (row, isOpen) => {
  43. if (this.state.isModalActive) return;
  44. const data = this.props.resources.data;
  45. const contextOpen = this.state.contextOpen;
  46. contextOpen[row] = isOpen;
  47. if (isOpen) {
  48. const index = row > data.length ? row - data.length - 1 : row;
  49. this.fetchPermissions(data[index], index);
  50. }
  51. this.setState({
  52. contextOpen
  53. });
  54. });
  55. this.context = context;
  56. this.state = {
  57. isRowOpen: [],
  58. contextOpen: [],
  59. isModalActive: false,
  60. permissions: new Map()
  61. };
  62. }
  63. fetchPermissions(resource, row) {
  64. this.context.doGet(`/resources/${resource._id}/permissions`).then(response => {
  65. const newPermissions = new Map(this.state.permissions);
  66. newPermissions.set(row, response.data || []);
  67. this.setState({
  68. permissions: newPermissions
  69. });
  70. });
  71. }
  72. removeShare(resource, row) {
  73. const permissions = this.state.permissions.get(row).map(a => ({
  74. username: a.username,
  75. scopes: []
  76. }));
  77. return this.context.doPut(`/resources/${resource._id}/permissions`, permissions).then(() => {
  78. ContentAlert.success(Msg.localize('unShareSuccess'));
  79. });
  80. }
  81. render() {
  82. if (this.props.resources.data.length === 0) {
  83. return React.createElement(EmptyMessageState, {
  84. icon: RepositoryIcon,
  85. messageKey: "notHaveAnyResource"
  86. });
  87. }
  88. return React.createElement(DataList, {
  89. "aria-label": Msg.localize('resources'),
  90. id: "resourcesList"
  91. }, React.createElement(DataListItem, {
  92. key: "resource-header",
  93. "aria-labelledby": "resource-header"
  94. }, React.createElement(DataListItemRow, null, "// invisible toggle allows headings to line up properly", React.createElement("span", {
  95. style: {
  96. visibility: 'hidden'
  97. }
  98. }, React.createElement(DataListToggle, {
  99. isExpanded: false,
  100. id: "resource-header-invisible-toggle",
  101. "aria-controls": "ex-expand1"
  102. })), React.createElement(DataListItemCells, {
  103. dataListCells: [React.createElement(DataListCell, {
  104. key: "resource-name-header",
  105. width: 5
  106. }, React.createElement("strong", null, React.createElement(Msg, {
  107. msgKey: "resourceName"
  108. }))), React.createElement(DataListCell, {
  109. key: "application-name-header",
  110. width: 5
  111. }, React.createElement("strong", null, React.createElement(Msg, {
  112. msgKey: "application"
  113. }))), React.createElement(DataListCell, {
  114. key: "permission-request-header",
  115. width: 5
  116. }, React.createElement("strong", null, React.createElement(Msg, {
  117. msgKey: "permissionRequests"
  118. })))]
  119. }))), this.props.resources.data.map((resource, row) => React.createElement(DataListItem, {
  120. key: 'resource-' + row,
  121. "aria-labelledby": resource.name,
  122. isExpanded: this.state.isRowOpen[row]
  123. }, React.createElement(DataListItemRow, null, React.createElement(DataListToggle, {
  124. onClick: () => this.onToggle(row),
  125. isExpanded: this.state.isRowOpen[row],
  126. id: 'resourceToggle-' + row,
  127. "aria-controls": "ex-expand1"
  128. }), React.createElement(DataListItemCells, {
  129. dataListCells: [React.createElement(DataListCell, {
  130. id: 'resourceName-' + row,
  131. key: 'resourceName-' + row,
  132. width: 5
  133. }, React.createElement(Msg, {
  134. msgKey: resource.name
  135. })), React.createElement(DataListCell, {
  136. id: 'resourceClient-' + row,
  137. key: 'resourceClient-' + row,
  138. width: 5
  139. }, React.createElement("a", {
  140. href: resource.client.baseUrl
  141. }, this.getClientName(resource.client))), React.createElement(DataListCell, {
  142. id: 'resourceRequests-' + row,
  143. key: 'permissionRequests-' + row,
  144. width: 5
  145. }, resource.shareRequests.length > 0 && React.createElement(PermissionRequest, {
  146. resource: resource,
  147. onClose: () => this.fetchPermissions(resource, row)
  148. }))]
  149. }), React.createElement(DataListAction, {
  150. className: DataListActionVisibility.hiddenOnLg,
  151. "aria-labelledby": "check-action-item3 check-action-action3",
  152. id: "check-action-action3",
  153. "aria-label": "Actions"
  154. }, React.createElement(Dropdown, {
  155. isPlain: true,
  156. position: DropdownPosition.right,
  157. onSelect: () => this.setState({
  158. isModalActive: true
  159. }),
  160. toggle: React.createElement(KebabToggle, {
  161. onToggle: isOpen => this.onContextToggle(row + this.props.resources.data.length + 1, isOpen)
  162. }),
  163. isOpen: this.state.contextOpen[row + this.props.resources.data.length + 1],
  164. dropdownItems: [React.createElement(ShareTheResource, {
  165. resource: resource,
  166. permissions: this.state.permissions.get(row),
  167. sharedWithUsersMsg: this.sharedWithUsersMessage(row),
  168. onClose: () => {
  169. this.setState({
  170. isModalActive: false
  171. }, () => {
  172. this.onContextToggle(row + this.props.resources.data.length + 1, false);
  173. this.fetchPermissions(resource, row + this.props.resources.data.length + 1);
  174. });
  175. }
  176. }, toggle => React.createElement(DropdownItem, {
  177. id: 'mob-share-' + row,
  178. key: "mob-share",
  179. onClick: toggle
  180. }, React.createElement(ShareAltIcon, null), " ", React.createElement(Msg, {
  181. msgKey: "share"
  182. }))), React.createElement(EditTheResource, {
  183. resource: resource,
  184. permissions: this.state.permissions.get(row),
  185. onClose: () => {
  186. this.setState({
  187. isModalActive: false
  188. }, () => {
  189. this.onContextToggle(row + this.props.resources.data.length + 1, false);
  190. this.fetchPermissions(resource, row + this.props.resources.data.length + 1);
  191. });
  192. }
  193. }, toggle => React.createElement(DropdownItem, {
  194. id: 'mob-edit-' + row,
  195. key: "mob-edit",
  196. isDisabled: this.numOthers(row) < 0,
  197. onClick: toggle
  198. }, React.createElement(EditAltIcon, null), " ", React.createElement(Msg, {
  199. msgKey: "edit"
  200. }))), React.createElement(ContinueCancelModal, {
  201. render: toggle => React.createElement(DropdownItem, {
  202. id: 'mob-remove-' + row,
  203. key: "mob-remove",
  204. isDisabled: this.numOthers(row) < 0,
  205. onClick: toggle
  206. }, React.createElement(Remove2Icon, null), " ", React.createElement(Msg, {
  207. msgKey: "unShare"
  208. })),
  209. modalTitle: "unShare",
  210. modalMessage: "unShareAllConfirm",
  211. onClose: () => this.setState({
  212. isModalActive: false
  213. }, () => {
  214. this.onContextToggle(row + this.props.resources.data.length + 1, false);
  215. }),
  216. onContinue: () => this.removeShare(resource, row).then(() => this.fetchPermissions(resource, row + this.props.resources.data.length + 1))
  217. })]
  218. })), React.createElement(DataListAction, {
  219. id: `actions-${row}`,
  220. className: css(DataListActionVisibility.visibleOnLg, DataListActionVisibility.hidden),
  221. "aria-labelledby": "Row actions",
  222. "aria-label": "Actions"
  223. }, React.createElement(ShareTheResource, {
  224. resource: resource,
  225. permissions: this.state.permissions.get(row),
  226. sharedWithUsersMsg: this.sharedWithUsersMessage(row),
  227. onClose: () => this.fetchPermissions(resource, row)
  228. }, toggle => React.createElement(Button, {
  229. id: `share-${row}`,
  230. variant: "link",
  231. onClick: toggle
  232. }, React.createElement(ShareAltIcon, null), " ", React.createElement(Msg, {
  233. msgKey: "share"
  234. }))), React.createElement(Dropdown, {
  235. id: `action-menu-${row}`,
  236. isPlain: true,
  237. position: DropdownPosition.right,
  238. toggle: React.createElement(KebabToggle, {
  239. onToggle: isOpen => this.onContextToggle(row, isOpen)
  240. }),
  241. onSelect: () => this.setState({
  242. isModalActive: true
  243. }),
  244. isOpen: this.state.contextOpen[row],
  245. dropdownItems: [React.createElement(EditTheResource, {
  246. resource: resource,
  247. permissions: this.state.permissions.get(row),
  248. onClose: () => {
  249. this.setState({
  250. isModalActive: false
  251. }, () => {
  252. this.onContextToggle(row, false);
  253. this.fetchPermissions(resource, row);
  254. });
  255. }
  256. }, toggle => React.createElement(DropdownItem, {
  257. id: 'edit-' + row,
  258. key: "edit",
  259. component: "button",
  260. isDisabled: this.numOthers(row) < 0,
  261. onClick: toggle
  262. }, React.createElement(EditAltIcon, null), " ", React.createElement(Msg, {
  263. msgKey: "edit"
  264. }))), React.createElement(ContinueCancelModal, {
  265. render: toggle => React.createElement(DropdownItem, {
  266. id: 'remove-' + row,
  267. key: "remove",
  268. component: "button",
  269. isDisabled: this.numOthers(row) < 0,
  270. onClick: toggle
  271. }, React.createElement(Remove2Icon, null), " ", React.createElement(Msg, {
  272. msgKey: "unShare"
  273. })),
  274. modalTitle: "unShare",
  275. modalMessage: "unShareAllConfirm",
  276. onClose: () => this.setState({
  277. isModalActive: false
  278. }, () => {
  279. this.onContextToggle(row, false);
  280. }),
  281. onContinue: () => this.removeShare(resource, row).then(() => this.fetchPermissions(resource, row))
  282. })]
  283. }))), React.createElement(DataListContent, {
  284. noPadding: false,
  285. "aria-label": "Session Details",
  286. id: 'ex-expand' + row,
  287. isHidden: !this.state.isRowOpen[row]
  288. }, React.createElement(Level, {
  289. gutter: "md"
  290. }, React.createElement(LevelItem, null, React.createElement("span", null)), React.createElement(LevelItem, {
  291. id: 'shared-with-user-message-' + row
  292. }, this.sharedWithUsersMessage(row)), React.createElement(LevelItem, null, React.createElement("span", null)))))));
  293. }
  294. }
  295. _defineProperty(ResourcesTable, "contextType", AccountServiceContext);
  296. //# sourceMappingURL=ResourcesTable.js.map