@atlaskit/teams-public 0.39.3 → 0.41.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +27 -0
- package/dist/cjs/common/ui/team-link-card-actions/index.compiled.css +6 -0
- package/dist/cjs/common/ui/team-link-card-actions/index.js +152 -0
- package/dist/cjs/controllers/hooks/use-team-web-links/index.js +37 -2
- package/dist/cjs/ui/team-containers/disconnect-dialog/index.js +3 -1
- package/dist/cjs/ui/team-containers/team-link-card/index.compiled.css +11 -2
- package/dist/cjs/ui/team-containers/team-link-card/index.js +87 -12
- package/dist/es2019/common/ui/team-link-card-actions/index.compiled.css +6 -0
- package/dist/es2019/common/ui/team-link-card-actions/index.js +140 -0
- package/dist/es2019/controllers/hooks/use-team-web-links/index.js +13 -0
- package/dist/es2019/ui/team-containers/disconnect-dialog/index.js +4 -2
- package/dist/es2019/ui/team-containers/team-link-card/index.compiled.css +11 -2
- package/dist/es2019/ui/team-containers/team-link-card/index.js +73 -4
- package/dist/esm/common/ui/team-link-card-actions/index.compiled.css +6 -0
- package/dist/esm/common/ui/team-link-card-actions/index.js +143 -0
- package/dist/esm/controllers/hooks/use-team-web-links/index.js +37 -2
- package/dist/esm/ui/team-containers/disconnect-dialog/index.js +4 -2
- package/dist/esm/ui/team-containers/team-link-card/index.compiled.css +11 -2
- package/dist/esm/ui/team-containers/team-link-card/index.js +88 -13
- package/dist/types/common/ui/team-link-card-actions/index.d.ts +15 -0
- package/dist/types/controllers/hooks/use-team-web-links/index.d.ts +3 -0
- package/dist/types-ts4.5/common/ui/team-link-card-actions/index.d.ts +15 -0
- package/dist/types-ts4.5/controllers/hooks/use-team-web-links/index.d.ts +3 -0
- package/package.json +7 -5
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,32 @@
|
|
|
1
1
|
# @atlaskit/teams-public
|
|
2
2
|
|
|
3
|
+
## 0.41.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- [#175544](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/175544)
|
|
8
|
+
[`75e1002a3a489`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/75e1002a3a489) -
|
|
9
|
+
PTC-11573 Fix team link card focus border missing issue
|
|
10
|
+
|
|
11
|
+
### Patch Changes
|
|
12
|
+
|
|
13
|
+
- Updated dependencies
|
|
14
|
+
|
|
15
|
+
## 0.40.0
|
|
16
|
+
|
|
17
|
+
### Minor Changes
|
|
18
|
+
|
|
19
|
+
- [#179534](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/179534)
|
|
20
|
+
[`a9ea980ec4a3c`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/a9ea980ec4a3c) -
|
|
21
|
+
Auto fill web link title when creating/updating web link in team profile page
|
|
22
|
+
|
|
23
|
+
### Patch Changes
|
|
24
|
+
|
|
25
|
+
- [#180092](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/180092)
|
|
26
|
+
[`37ba06d5a2d15`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/37ba06d5a2d15) -
|
|
27
|
+
NO-ISSUE Fix container name no wrap issue
|
|
28
|
+
- Updated dependencies
|
|
29
|
+
|
|
3
30
|
## 0.39.3
|
|
4
31
|
|
|
5
32
|
### Patch Changes
|
|
@@ -0,0 +1,152 @@
|
|
|
1
|
+
/* index.tsx generated by @compiled/babel-plugin v0.36.1 */
|
|
2
|
+
"use strict";
|
|
3
|
+
|
|
4
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
5
|
+
var _typeof = require("@babel/runtime/helpers/typeof");
|
|
6
|
+
Object.defineProperty(exports, "__esModule", {
|
|
7
|
+
value: true
|
|
8
|
+
});
|
|
9
|
+
exports.TeamLinkCardActions = void 0;
|
|
10
|
+
require("./index.compiled.css");
|
|
11
|
+
var _runtime = require("@compiled/react/runtime");
|
|
12
|
+
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
13
|
+
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
|
|
14
|
+
var _react = _interopRequireDefault(require("react"));
|
|
15
|
+
var _reactIntlNext = require("react-intl-next");
|
|
16
|
+
var _analyticsNext = require("@atlaskit/analytics-next");
|
|
17
|
+
var _new = require("@atlaskit/button/new");
|
|
18
|
+
var _css = require("@atlaskit/css");
|
|
19
|
+
var _dropdownMenu = _interopRequireWildcard(require("@atlaskit/dropdown-menu"));
|
|
20
|
+
var _close = _interopRequireDefault(require("@atlaskit/icon/core/close"));
|
|
21
|
+
var _showMoreHorizontal = _interopRequireDefault(require("@atlaskit/icon/core/show-more-horizontal"));
|
|
22
|
+
var _compiled = require("@atlaskit/primitives/compiled");
|
|
23
|
+
var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
|
|
24
|
+
var _analytics = require("../../utils/analytics");
|
|
25
|
+
var _excluded = ["triggerRef"];
|
|
26
|
+
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
|
|
27
|
+
var styles = {
|
|
28
|
+
crossIconWrapper: "_1e0c1txw _4cvr1h6o _1bahesu3 _18u01wug",
|
|
29
|
+
showMoreIconWrapper: "_1e0c1txw _4cvr1h6o _1bahesu3 _18u01wug",
|
|
30
|
+
iconHidden: "_tzy4idpf",
|
|
31
|
+
iconVisible: "_tzy4kb7n"
|
|
32
|
+
};
|
|
33
|
+
var messages = (0, _reactIntlNext.defineMessages)({
|
|
34
|
+
disconnectTooltip: {
|
|
35
|
+
id: 'ptc-directory.team-containers.disconnect-button.tooltip',
|
|
36
|
+
defaultMessage: 'Disconnect',
|
|
37
|
+
description: 'Tooltip for the disconnect button'
|
|
38
|
+
},
|
|
39
|
+
editLink: {
|
|
40
|
+
id: 'ptc-directory.team-containers.edit-link',
|
|
41
|
+
defaultMessage: 'Edit link',
|
|
42
|
+
description: 'Edit link option in dropdown'
|
|
43
|
+
},
|
|
44
|
+
removeLink: {
|
|
45
|
+
id: 'ptc-directory.team-containers.remove-link',
|
|
46
|
+
defaultMessage: 'Remove',
|
|
47
|
+
description: 'Remove link option in dropdown'
|
|
48
|
+
}
|
|
49
|
+
});
|
|
50
|
+
var TeamLinkCardActions = exports.TeamLinkCardActions = function TeamLinkCardActions(_ref) {
|
|
51
|
+
var containerType = _ref.containerType,
|
|
52
|
+
title = _ref.title,
|
|
53
|
+
containerId = _ref.containerId,
|
|
54
|
+
hovered = _ref.hovered,
|
|
55
|
+
focused = _ref.focused,
|
|
56
|
+
isDropdownOpen = _ref.isDropdownOpen,
|
|
57
|
+
showKeyboardFocus = _ref.showKeyboardFocus,
|
|
58
|
+
onDisconnectButtonClick = _ref.onDisconnectButtonClick,
|
|
59
|
+
onEditLinkClick = _ref.onEditLinkClick,
|
|
60
|
+
onDropdownOpenChange = _ref.onDropdownOpenChange;
|
|
61
|
+
var _useAnalyticsEvents = (0, _analyticsNext.useAnalyticsEvents)(),
|
|
62
|
+
createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
|
|
63
|
+
var _useIntl = (0, _reactIntlNext.useIntl)(),
|
|
64
|
+
formatMessage = _useIntl.formatMessage;
|
|
65
|
+
var _usePeopleAndTeamAnal = (0, _analytics.usePeopleAndTeamAnalytics)(),
|
|
66
|
+
fireUIEvent = _usePeopleAndTeamAnal.fireUIEvent;
|
|
67
|
+
|
|
68
|
+
// Show icons when:
|
|
69
|
+
// 1. Hovering over the card
|
|
70
|
+
// 2. Dropdown is open
|
|
71
|
+
// 3. Focused via keyboard navigation (when showKeyboardFocus is true)
|
|
72
|
+
var shouldShowIcon = hovered || isDropdownOpen || focused && showKeyboardFocus;
|
|
73
|
+
var handleDisconnectClick = function handleDisconnectClick(e) {
|
|
74
|
+
e.preventDefault();
|
|
75
|
+
e.stopPropagation();
|
|
76
|
+
onDisconnectButtonClick();
|
|
77
|
+
fireUIEvent(createAnalyticsEvent, {
|
|
78
|
+
action: _analytics.AnalyticsAction.CLICKED,
|
|
79
|
+
actionSubject: 'button',
|
|
80
|
+
actionSubjectId: 'containerUnlinkButton',
|
|
81
|
+
attributes: {
|
|
82
|
+
containerSelected: {
|
|
83
|
+
container: containerType,
|
|
84
|
+
containerId: containerId
|
|
85
|
+
}
|
|
86
|
+
}
|
|
87
|
+
});
|
|
88
|
+
};
|
|
89
|
+
var handleEditLinkClick = function handleEditLinkClick(e) {
|
|
90
|
+
e.preventDefault();
|
|
91
|
+
e.stopPropagation();
|
|
92
|
+
onEditLinkClick === null || onEditLinkClick === void 0 || onEditLinkClick();
|
|
93
|
+
fireUIEvent(createAnalyticsEvent, {
|
|
94
|
+
action: _analytics.AnalyticsAction.CLICKED,
|
|
95
|
+
actionSubject: 'button',
|
|
96
|
+
actionSubjectId: 'containerEditLinkButton',
|
|
97
|
+
attributes: {
|
|
98
|
+
containerSelected: {
|
|
99
|
+
container: containerType,
|
|
100
|
+
containerId: containerId
|
|
101
|
+
}
|
|
102
|
+
}
|
|
103
|
+
});
|
|
104
|
+
};
|
|
105
|
+
if (containerType === 'WebLink') {
|
|
106
|
+
return /*#__PURE__*/_react.default.createElement(_compiled.Box, {
|
|
107
|
+
xcss: (0, _css.cx)(styles.showMoreIconWrapper, shouldShowIcon ? styles.iconVisible : styles.iconHidden)
|
|
108
|
+
}, /*#__PURE__*/_react.default.createElement(_dropdownMenu.default, {
|
|
109
|
+
trigger: function trigger(_ref2) {
|
|
110
|
+
var triggerRef = _ref2.triggerRef,
|
|
111
|
+
triggerProps = (0, _objectWithoutProperties2.default)(_ref2, _excluded);
|
|
112
|
+
return /*#__PURE__*/_react.default.createElement(_new.IconButton, (0, _extends2.default)({
|
|
113
|
+
ref: triggerRef
|
|
114
|
+
}, triggerProps, {
|
|
115
|
+
label: "more options for ".concat(title),
|
|
116
|
+
appearance: "subtle",
|
|
117
|
+
icon: function icon(iconProps) {
|
|
118
|
+
return /*#__PURE__*/_react.default.createElement(_showMoreHorizontal.default, (0, _extends2.default)({}, iconProps, {
|
|
119
|
+
size: "small"
|
|
120
|
+
}));
|
|
121
|
+
},
|
|
122
|
+
spacing: "compact"
|
|
123
|
+
}));
|
|
124
|
+
},
|
|
125
|
+
placement: "bottom-end",
|
|
126
|
+
shouldRenderToParent: true,
|
|
127
|
+
onOpenChange: function onOpenChange(attrs) {
|
|
128
|
+
onDropdownOpenChange(attrs.isOpen);
|
|
129
|
+
}
|
|
130
|
+
}, /*#__PURE__*/_react.default.createElement(_dropdownMenu.DropdownItemGroup, null, /*#__PURE__*/_react.default.createElement(_dropdownMenu.DropdownItem, {
|
|
131
|
+
onClick: handleEditLinkClick
|
|
132
|
+
}, formatMessage(messages.editLink)), /*#__PURE__*/_react.default.createElement(_dropdownMenu.DropdownItem, {
|
|
133
|
+
onClick: handleDisconnectClick
|
|
134
|
+
}, formatMessage(messages.removeLink)))));
|
|
135
|
+
}
|
|
136
|
+
return /*#__PURE__*/_react.default.createElement(_compiled.Box, {
|
|
137
|
+
xcss: (0, _css.cx)(styles.crossIconWrapper, shouldShowIcon ? styles.iconVisible : styles.iconHidden)
|
|
138
|
+
}, /*#__PURE__*/_react.default.createElement(_tooltip.default, {
|
|
139
|
+
content: formatMessage(messages.disconnectTooltip),
|
|
140
|
+
position: "top"
|
|
141
|
+
}, /*#__PURE__*/_react.default.createElement(_new.IconButton, {
|
|
142
|
+
label: "disconnect the container ".concat(title),
|
|
143
|
+
appearance: "subtle",
|
|
144
|
+
icon: function icon(iconProps) {
|
|
145
|
+
return /*#__PURE__*/_react.default.createElement(_close.default, (0, _extends2.default)({}, iconProps, {
|
|
146
|
+
size: "small"
|
|
147
|
+
}));
|
|
148
|
+
},
|
|
149
|
+
spacing: "compact",
|
|
150
|
+
onClick: handleDisconnectClick
|
|
151
|
+
})));
|
|
152
|
+
};
|
|
@@ -291,9 +291,44 @@ var actions = exports.actions = {
|
|
|
291
291
|
};
|
|
292
292
|
}();
|
|
293
293
|
},
|
|
294
|
+
fetchWebLinkTitle: function fetchWebLinkTitle(url) {
|
|
295
|
+
return /*#__PURE__*/function () {
|
|
296
|
+
var _ref10 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee6(_ref1) {
|
|
297
|
+
var setState, title;
|
|
298
|
+
return _regenerator.default.wrap(function _callee6$(_context6) {
|
|
299
|
+
while (1) switch (_context6.prev = _context6.next) {
|
|
300
|
+
case 0:
|
|
301
|
+
setState = _ref1.setState;
|
|
302
|
+
if (url) {
|
|
303
|
+
_context6.next = 3;
|
|
304
|
+
break;
|
|
305
|
+
}
|
|
306
|
+
return _context6.abrupt("return", undefined);
|
|
307
|
+
case 3:
|
|
308
|
+
_context6.prev = 3;
|
|
309
|
+
_context6.next = 6;
|
|
310
|
+
return _teamsClient.teamsClient.getWebLinkTitle(url);
|
|
311
|
+
case 6:
|
|
312
|
+
title = _context6.sent;
|
|
313
|
+
return _context6.abrupt("return", title);
|
|
314
|
+
case 10:
|
|
315
|
+
_context6.prev = 10;
|
|
316
|
+
_context6.t0 = _context6["catch"](3);
|
|
317
|
+
return _context6.abrupt("return", undefined);
|
|
318
|
+
case 13:
|
|
319
|
+
case "end":
|
|
320
|
+
return _context6.stop();
|
|
321
|
+
}
|
|
322
|
+
}, _callee6, null, [[3, 10]]);
|
|
323
|
+
}));
|
|
324
|
+
return function (_x6) {
|
|
325
|
+
return _ref10.apply(this, arguments);
|
|
326
|
+
};
|
|
327
|
+
}();
|
|
328
|
+
},
|
|
294
329
|
initialState: function initialState(state) {
|
|
295
|
-
return function (
|
|
296
|
-
var setState =
|
|
330
|
+
return function (_ref11) {
|
|
331
|
+
var setState = _ref11.setState;
|
|
297
332
|
setState(_objectSpread(_objectSpread({}, _initialState), state));
|
|
298
333
|
};
|
|
299
334
|
}
|
|
@@ -94,7 +94,9 @@ var DisconnectDialog = exports.DisconnectDialog = function DisconnectDialog(_ref
|
|
|
94
94
|
space: "space.150"
|
|
95
95
|
}, /*#__PURE__*/_react.default.createElement(_compiled.Box, null, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, messages.disconnectDialogDescription, {
|
|
96
96
|
values: {
|
|
97
|
-
containerName: /*#__PURE__*/_react.default.createElement(
|
|
97
|
+
containerName: /*#__PURE__*/_react.default.createElement(_compiled.Text, {
|
|
98
|
+
weight: "semibold"
|
|
99
|
+
}, containerName),
|
|
98
100
|
containerType: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, description, " ", containerTypeText)
|
|
99
101
|
}
|
|
100
102
|
}))), containerTypeText ? /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, messages.disconnectDialogDisclaimer, {
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
|
|
2
2
|
._2rkoop52{border-radius:var(--ds-border-radius-100,8px)}
|
|
3
|
-
._1h6dz9xs{border-color:var(--ds-border-accent-gray,#758195)}
|
|
3
|
+
._1h6dz9xs{border-color:var(--ds-border-accent-gray,#758195)}
|
|
4
|
+
._12jimuej{outline-color:var(--ds-border,#091e4224)}
|
|
4
5
|
._12y3e4h9{outline-width:var(--ds-border-width,1px)}
|
|
5
6
|
._16jlkb7n{flex-grow:1}
|
|
6
7
|
._18u01wug{margin-left:auto}
|
|
@@ -9,14 +10,22 @@
|
|
|
9
10
|
._1bsb1osq{width:100%}
|
|
10
11
|
._1bsbzwfg{width:2pc}
|
|
11
12
|
._1e0c1txw{display:flex}
|
|
13
|
+
._1hmsglyw{text-decoration-line:none}
|
|
12
14
|
._1o9zkb7n{flex-shrink:1}
|
|
13
15
|
._1qu2nqa1{outline-style:solid}
|
|
14
16
|
._1tkezwfg{min-height:2pc}
|
|
15
17
|
._1ul9zwfg{min-width:2pc}
|
|
18
|
+
._4bfu1r31{text-decoration-color:currentColor}
|
|
16
19
|
._4cvr1h6o{align-items:center}
|
|
17
20
|
._4t3izwfg{height:2pc}
|
|
21
|
+
._ajmmnqa1{text-decoration-style:solid}
|
|
18
22
|
._ca0qutpp{padding-top:var(--ds-space-150,9pt)}
|
|
19
23
|
._i0dlf1ug{flex-basis:0%}
|
|
20
24
|
._n3tdutpp{padding-bottom:var(--ds-space-150,9pt)}
|
|
21
25
|
._syaz1fxt{color:var(--ds-text,#172b4d)}
|
|
22
|
-
._u5f3utpp{padding-right:var(--ds-space-150,9pt)}
|
|
26
|
+
._u5f3utpp{padding-right:var(--ds-space-150,9pt)}._10531fxt:visited{color:var(--ds-text,#172b4d)}
|
|
27
|
+
._1bg4v77o:focus{outline-offset:var(--ds-space-025,2px)}
|
|
28
|
+
._1hvw1bk5:focus{outline-width:var(--ds-border-width-outline,2px)}
|
|
29
|
+
._49pcnqa1:focus{outline-style:solid}
|
|
30
|
+
._nt751p6i:focus{outline-color:var(--ds-border-focused,#388bff)}
|
|
31
|
+
._30l31fxt:hover{color:var(--ds-text,#172b4d)}
|
|
@@ -21,9 +21,11 @@ var _dropdownMenu = _interopRequireWildcard(require("@atlaskit/dropdown-menu"));
|
|
|
21
21
|
var _close = _interopRequireDefault(require("@atlaskit/icon/core/close"));
|
|
22
22
|
var _showMoreHorizontal = _interopRequireDefault(require("@atlaskit/icon/core/show-more-horizontal"));
|
|
23
23
|
var _link = _interopRequireDefault(require("@atlaskit/link"));
|
|
24
|
+
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
24
25
|
var _compiled = require("@atlaskit/primitives/compiled");
|
|
25
26
|
var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
|
|
26
27
|
var _containerIcon = require("../../../common/ui/container-icon");
|
|
28
|
+
var _teamLinkCardActions = require("../../../common/ui/team-link-card-actions");
|
|
27
29
|
var _analytics = require("../../../common/utils/analytics");
|
|
28
30
|
var _getContainerProperties = require("../../../common/utils/get-container-properties");
|
|
29
31
|
var _getLinkDomain = require("../../../common/utils/get-link-domain");
|
|
@@ -34,6 +36,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
|
|
|
34
36
|
var styles = {
|
|
35
37
|
container: "_2rkoop52 _1h6dz9xs _12y3e4h9 _12jimuej _1qu2nqa1 _ca0qutpp _u5f3utpp _n3tdutpp _19bvutpp _syaz1fxt",
|
|
36
38
|
card: "_4cvr1h6o _1bsb1osq",
|
|
39
|
+
anchor: "_4bfu1r31 _1hmsglyw _ajmmnqa1 _2rkoop52 _1bsb1osq _syaz1fxt _10531fxt _1hvw1bk5 _nt751p6i _49pcnqa1 _1bg4v77o _30l31fxt",
|
|
37
40
|
iconWrapper: "_1bsbzwfg _4t3izwfg _1ul9zwfg _1tkezwfg",
|
|
38
41
|
crossIconWrapper: "_1e0c1txw _4cvr1h6o _1bahesu3 _18u01wug",
|
|
39
42
|
showMoreIconWrapper: "_1e0c1txw _4cvr1h6o _1bahesu3 _18u01wug",
|
|
@@ -46,8 +49,8 @@ var TeamLinkCard = exports.TeamLinkCard = function TeamLinkCard(_ref) {
|
|
|
46
49
|
link = _ref.link,
|
|
47
50
|
containerId = _ref.containerId,
|
|
48
51
|
containerTypeProperties = _ref.containerTypeProperties,
|
|
49
|
-
|
|
50
|
-
|
|
52
|
+
_onDisconnectButtonClick = _ref.onDisconnectButtonClick,
|
|
53
|
+
_onEditLinkClick = _ref.onEditLinkClick,
|
|
51
54
|
iconsLoading = _ref.iconsLoading,
|
|
52
55
|
iconHasLoaded = _ref.iconHasLoaded;
|
|
53
56
|
var _useAnalyticsEvents = (0, _analyticsNext.useAnalyticsEvents)(),
|
|
@@ -66,12 +69,20 @@ var TeamLinkCard = exports.TeamLinkCard = function TeamLinkCard(_ref) {
|
|
|
66
69
|
setHovered = _useState2[1];
|
|
67
70
|
var _useState3 = (0, _react.useState)(false),
|
|
68
71
|
_useState4 = (0, _slicedToArray2.default)(_useState3, 2),
|
|
69
|
-
|
|
70
|
-
|
|
72
|
+
focused = _useState4[0],
|
|
73
|
+
setFocused = _useState4[1];
|
|
71
74
|
var _useState5 = (0, _react.useState)(false),
|
|
72
75
|
_useState6 = (0, _slicedToArray2.default)(_useState5, 2),
|
|
73
|
-
|
|
74
|
-
|
|
76
|
+
showCloseIcon = _useState6[0],
|
|
77
|
+
setShowCloseIcon = _useState6[1];
|
|
78
|
+
var _useState7 = (0, _react.useState)(false),
|
|
79
|
+
_useState8 = (0, _slicedToArray2.default)(_useState7, 2),
|
|
80
|
+
isDropdownOpen = _useState8[0],
|
|
81
|
+
setIsDropdownOpen = _useState8[1];
|
|
82
|
+
var _useState9 = (0, _react.useState)(false),
|
|
83
|
+
_useState0 = (0, _slicedToArray2.default)(_useState9, 2),
|
|
84
|
+
showKeyboardFocus = _useState0[0],
|
|
85
|
+
setShowKeyboardFocus = _useState0[1];
|
|
75
86
|
var _useIntl = (0, _reactIntlNext.useIntl)(),
|
|
76
87
|
formatMessage = _useIntl.formatMessage;
|
|
77
88
|
var _usePeopleAndTeamAnal = (0, _analytics.usePeopleAndTeamAnalytics)(),
|
|
@@ -82,12 +93,34 @@ var TeamLinkCard = exports.TeamLinkCard = function TeamLinkCard(_ref) {
|
|
|
82
93
|
setShowCloseIcon(true);
|
|
83
94
|
}
|
|
84
95
|
};
|
|
96
|
+
var handleFocus = function handleFocus() {
|
|
97
|
+
setFocused(true);
|
|
98
|
+
if (containerType !== 'WebLink') {
|
|
99
|
+
setShowCloseIcon(true);
|
|
100
|
+
}
|
|
101
|
+
};
|
|
102
|
+
var handleBlur = function handleBlur() {
|
|
103
|
+
setFocused(false);
|
|
104
|
+
if (containerType !== 'WebLink' && !hovered) {
|
|
105
|
+
setShowCloseIcon(false);
|
|
106
|
+
}
|
|
107
|
+
};
|
|
85
108
|
var handleMouseLeave = function handleMouseLeave() {
|
|
86
109
|
setHovered(false);
|
|
87
|
-
if (containerType !== 'WebLink') {
|
|
110
|
+
if (containerType !== 'WebLink' && !focused) {
|
|
88
111
|
setShowCloseIcon(false);
|
|
89
112
|
}
|
|
90
113
|
};
|
|
114
|
+
var handleIconClick = function handleIconClick() {
|
|
115
|
+
if ((0, _platformFeatureFlags.fg)('fix_team_link_card_a11y')) {
|
|
116
|
+
setShowKeyboardFocus(false);
|
|
117
|
+
}
|
|
118
|
+
};
|
|
119
|
+
var handleKeyDown = function handleKeyDown(e) {
|
|
120
|
+
if ((e.key === 'Enter' || e.key === ' ' || e.key === 'Tab' || e.key === 'Escape') && (0, _platformFeatureFlags.fg)('fix_team_link_card_a11y')) {
|
|
121
|
+
setShowKeyboardFocus(true);
|
|
122
|
+
}
|
|
123
|
+
};
|
|
91
124
|
var handleLinkClick = function handleLinkClick() {
|
|
92
125
|
var baseAttributes = {
|
|
93
126
|
container: containerType,
|
|
@@ -112,6 +145,9 @@ var TeamLinkCard = exports.TeamLinkCard = function TeamLinkCard(_ref) {
|
|
|
112
145
|
xcss: styles.container,
|
|
113
146
|
onMouseEnter: handleMouseEnter,
|
|
114
147
|
onMouseLeave: handleMouseLeave,
|
|
148
|
+
onFocus: handleFocus,
|
|
149
|
+
onBlur: handleBlur,
|
|
150
|
+
onKeyDown: handleKeyDown,
|
|
115
151
|
testId: "team-link-card-inner"
|
|
116
152
|
}, /*#__PURE__*/_react.default.createElement(_compiled.Inline, {
|
|
117
153
|
space: "space.100",
|
|
@@ -123,7 +159,46 @@ var TeamLinkCard = exports.TeamLinkCard = function TeamLinkCard(_ref) {
|
|
|
123
159
|
size: "medium",
|
|
124
160
|
iconsLoading: iconsLoading,
|
|
125
161
|
iconHasLoaded: iconHasLoaded
|
|
126
|
-
}), /*#__PURE__*/_react.default.createElement(_compiled.
|
|
162
|
+
}), (0, _platformFeatureFlags.fg)('fix_team_link_card_a11y') ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_compiled.Anchor, {
|
|
163
|
+
xcss: styles.anchor,
|
|
164
|
+
href: link || '#',
|
|
165
|
+
onClick: handleLinkClick,
|
|
166
|
+
testId: "team-link-card-linkable-content"
|
|
167
|
+
}, /*#__PURE__*/_react.default.createElement(_compiled.Stack, {
|
|
168
|
+
space: "space.025"
|
|
169
|
+
}, /*#__PURE__*/_react.default.createElement(_compiled.Text, {
|
|
170
|
+
maxLines: 1,
|
|
171
|
+
weight: "medium",
|
|
172
|
+
color: "color.text"
|
|
173
|
+
}, title), /*#__PURE__*/_react.default.createElement(_compiled.Flex, {
|
|
174
|
+
gap: "space.050",
|
|
175
|
+
alignItems: "center"
|
|
176
|
+
}, icon, /*#__PURE__*/_react.default.createElement(_compiled.Inline, {
|
|
177
|
+
space: "space.050"
|
|
178
|
+
}, /*#__PURE__*/_react.default.createElement(_compiled.Text, {
|
|
179
|
+
size: "small",
|
|
180
|
+
color: "color.text.subtle"
|
|
181
|
+
}, description), /*#__PURE__*/_react.default.createElement(_compiled.Text, {
|
|
182
|
+
size: "small",
|
|
183
|
+
color: "color.text.subtle"
|
|
184
|
+
}, containerTypeText))))), /*#__PURE__*/_react.default.createElement(_teamLinkCardActions.TeamLinkCardActions, {
|
|
185
|
+
containerType: containerType,
|
|
186
|
+
title: title,
|
|
187
|
+
containerId: containerId,
|
|
188
|
+
hovered: hovered,
|
|
189
|
+
focused: focused,
|
|
190
|
+
isDropdownOpen: isDropdownOpen,
|
|
191
|
+
showKeyboardFocus: showKeyboardFocus,
|
|
192
|
+
onDisconnectButtonClick: function onDisconnectButtonClick() {
|
|
193
|
+
handleIconClick();
|
|
194
|
+
_onDisconnectButtonClick();
|
|
195
|
+
},
|
|
196
|
+
onEditLinkClick: function onEditLinkClick() {
|
|
197
|
+
handleIconClick();
|
|
198
|
+
_onEditLinkClick === null || _onEditLinkClick === void 0 || _onEditLinkClick();
|
|
199
|
+
},
|
|
200
|
+
onDropdownOpenChange: setIsDropdownOpen
|
|
201
|
+
})) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_compiled.Box, {
|
|
127
202
|
xcss: styles.linkableContent,
|
|
128
203
|
testId: "team-link-card-linkable-content"
|
|
129
204
|
}, /*#__PURE__*/_react.default.createElement(_link.default, {
|
|
@@ -164,7 +239,7 @@ var TeamLinkCard = exports.TeamLinkCard = function TeamLinkCard(_ref) {
|
|
|
164
239
|
onClick: function onClick(e) {
|
|
165
240
|
e.preventDefault();
|
|
166
241
|
e.stopPropagation();
|
|
167
|
-
|
|
242
|
+
_onDisconnectButtonClick();
|
|
168
243
|
fireUIEvent(createAnalyticsEvent, {
|
|
169
244
|
action: _analytics.AnalyticsAction.CLICKED,
|
|
170
245
|
actionSubject: 'button',
|
|
@@ -205,7 +280,7 @@ var TeamLinkCard = exports.TeamLinkCard = function TeamLinkCard(_ref) {
|
|
|
205
280
|
onClick: function onClick(e) {
|
|
206
281
|
e.preventDefault();
|
|
207
282
|
e.stopPropagation();
|
|
208
|
-
|
|
283
|
+
_onEditLinkClick === null || _onEditLinkClick === void 0 || _onEditLinkClick();
|
|
209
284
|
fireUIEvent(createAnalyticsEvent, {
|
|
210
285
|
action: _analytics.AnalyticsAction.CLICKED,
|
|
211
286
|
actionSubject: 'button',
|
|
@@ -222,7 +297,7 @@ var TeamLinkCard = exports.TeamLinkCard = function TeamLinkCard(_ref) {
|
|
|
222
297
|
onClick: function onClick(e) {
|
|
223
298
|
e.preventDefault();
|
|
224
299
|
e.stopPropagation();
|
|
225
|
-
|
|
300
|
+
_onDisconnectButtonClick();
|
|
226
301
|
fireUIEvent(createAnalyticsEvent, {
|
|
227
302
|
action: _analytics.AnalyticsAction.CLICKED,
|
|
228
303
|
actionSubject: 'button',
|
|
@@ -235,7 +310,7 @@ var TeamLinkCard = exports.TeamLinkCard = function TeamLinkCard(_ref) {
|
|
|
235
310
|
}
|
|
236
311
|
});
|
|
237
312
|
}
|
|
238
|
-
}, formatMessage(messages.removeLink)))))));
|
|
313
|
+
}, formatMessage(messages.removeLink))))))));
|
|
239
314
|
};
|
|
240
315
|
var messages = (0, _reactIntlNext.defineMessages)({
|
|
241
316
|
disconnectTooltip: {
|
|
@@ -0,0 +1,140 @@
|
|
|
1
|
+
/* index.tsx generated by @compiled/babel-plugin v0.36.1 */
|
|
2
|
+
import _extends from "@babel/runtime/helpers/extends";
|
|
3
|
+
import "./index.compiled.css";
|
|
4
|
+
import { ax, ix } from "@compiled/react/runtime";
|
|
5
|
+
import React from 'react';
|
|
6
|
+
import { defineMessages, useIntl } from 'react-intl-next';
|
|
7
|
+
import { useAnalyticsEvents } from '@atlaskit/analytics-next';
|
|
8
|
+
import { IconButton } from '@atlaskit/button/new';
|
|
9
|
+
import { cx } from '@atlaskit/css';
|
|
10
|
+
import DropdownMenu, { DropdownItem, DropdownItemGroup } from '@atlaskit/dropdown-menu';
|
|
11
|
+
import CrossIcon from '@atlaskit/icon/core/close';
|
|
12
|
+
import ShowMoreHorizontalIcon from '@atlaskit/icon/core/show-more-horizontal';
|
|
13
|
+
import { Box } from '@atlaskit/primitives/compiled';
|
|
14
|
+
import Tooltip from '@atlaskit/tooltip';
|
|
15
|
+
import { AnalyticsAction, usePeopleAndTeamAnalytics } from '../../utils/analytics';
|
|
16
|
+
const styles = {
|
|
17
|
+
crossIconWrapper: "_1e0c1txw _4cvr1h6o _1bahesu3 _18u01wug",
|
|
18
|
+
showMoreIconWrapper: "_1e0c1txw _4cvr1h6o _1bahesu3 _18u01wug",
|
|
19
|
+
iconHidden: "_tzy4idpf",
|
|
20
|
+
iconVisible: "_tzy4kb7n"
|
|
21
|
+
};
|
|
22
|
+
const messages = defineMessages({
|
|
23
|
+
disconnectTooltip: {
|
|
24
|
+
id: 'ptc-directory.team-containers.disconnect-button.tooltip',
|
|
25
|
+
defaultMessage: 'Disconnect',
|
|
26
|
+
description: 'Tooltip for the disconnect button'
|
|
27
|
+
},
|
|
28
|
+
editLink: {
|
|
29
|
+
id: 'ptc-directory.team-containers.edit-link',
|
|
30
|
+
defaultMessage: 'Edit link',
|
|
31
|
+
description: 'Edit link option in dropdown'
|
|
32
|
+
},
|
|
33
|
+
removeLink: {
|
|
34
|
+
id: 'ptc-directory.team-containers.remove-link',
|
|
35
|
+
defaultMessage: 'Remove',
|
|
36
|
+
description: 'Remove link option in dropdown'
|
|
37
|
+
}
|
|
38
|
+
});
|
|
39
|
+
export const TeamLinkCardActions = ({
|
|
40
|
+
containerType,
|
|
41
|
+
title,
|
|
42
|
+
containerId,
|
|
43
|
+
hovered,
|
|
44
|
+
focused,
|
|
45
|
+
isDropdownOpen,
|
|
46
|
+
showKeyboardFocus,
|
|
47
|
+
onDisconnectButtonClick,
|
|
48
|
+
onEditLinkClick,
|
|
49
|
+
onDropdownOpenChange
|
|
50
|
+
}) => {
|
|
51
|
+
const {
|
|
52
|
+
createAnalyticsEvent
|
|
53
|
+
} = useAnalyticsEvents();
|
|
54
|
+
const {
|
|
55
|
+
formatMessage
|
|
56
|
+
} = useIntl();
|
|
57
|
+
const {
|
|
58
|
+
fireUIEvent
|
|
59
|
+
} = usePeopleAndTeamAnalytics();
|
|
60
|
+
|
|
61
|
+
// Show icons when:
|
|
62
|
+
// 1. Hovering over the card
|
|
63
|
+
// 2. Dropdown is open
|
|
64
|
+
// 3. Focused via keyboard navigation (when showKeyboardFocus is true)
|
|
65
|
+
const shouldShowIcon = hovered || isDropdownOpen || focused && showKeyboardFocus;
|
|
66
|
+
const handleDisconnectClick = e => {
|
|
67
|
+
e.preventDefault();
|
|
68
|
+
e.stopPropagation();
|
|
69
|
+
onDisconnectButtonClick();
|
|
70
|
+
fireUIEvent(createAnalyticsEvent, {
|
|
71
|
+
action: AnalyticsAction.CLICKED,
|
|
72
|
+
actionSubject: 'button',
|
|
73
|
+
actionSubjectId: 'containerUnlinkButton',
|
|
74
|
+
attributes: {
|
|
75
|
+
containerSelected: {
|
|
76
|
+
container: containerType,
|
|
77
|
+
containerId
|
|
78
|
+
}
|
|
79
|
+
}
|
|
80
|
+
});
|
|
81
|
+
};
|
|
82
|
+
const handleEditLinkClick = e => {
|
|
83
|
+
e.preventDefault();
|
|
84
|
+
e.stopPropagation();
|
|
85
|
+
onEditLinkClick === null || onEditLinkClick === void 0 ? void 0 : onEditLinkClick();
|
|
86
|
+
fireUIEvent(createAnalyticsEvent, {
|
|
87
|
+
action: AnalyticsAction.CLICKED,
|
|
88
|
+
actionSubject: 'button',
|
|
89
|
+
actionSubjectId: 'containerEditLinkButton',
|
|
90
|
+
attributes: {
|
|
91
|
+
containerSelected: {
|
|
92
|
+
container: containerType,
|
|
93
|
+
containerId
|
|
94
|
+
}
|
|
95
|
+
}
|
|
96
|
+
});
|
|
97
|
+
};
|
|
98
|
+
if (containerType === 'WebLink') {
|
|
99
|
+
return /*#__PURE__*/React.createElement(Box, {
|
|
100
|
+
xcss: cx(styles.showMoreIconWrapper, shouldShowIcon ? styles.iconVisible : styles.iconHidden)
|
|
101
|
+
}, /*#__PURE__*/React.createElement(DropdownMenu, {
|
|
102
|
+
trigger: ({
|
|
103
|
+
triggerRef,
|
|
104
|
+
...triggerProps
|
|
105
|
+
}) => /*#__PURE__*/React.createElement(IconButton, _extends({
|
|
106
|
+
ref: triggerRef
|
|
107
|
+
}, triggerProps, {
|
|
108
|
+
label: `more options for ${title}`,
|
|
109
|
+
appearance: "subtle",
|
|
110
|
+
icon: iconProps => /*#__PURE__*/React.createElement(ShowMoreHorizontalIcon, _extends({}, iconProps, {
|
|
111
|
+
size: "small"
|
|
112
|
+
})),
|
|
113
|
+
spacing: "compact"
|
|
114
|
+
})),
|
|
115
|
+
placement: "bottom-end",
|
|
116
|
+
shouldRenderToParent: true,
|
|
117
|
+
onOpenChange: attrs => {
|
|
118
|
+
onDropdownOpenChange(attrs.isOpen);
|
|
119
|
+
}
|
|
120
|
+
}, /*#__PURE__*/React.createElement(DropdownItemGroup, null, /*#__PURE__*/React.createElement(DropdownItem, {
|
|
121
|
+
onClick: handleEditLinkClick
|
|
122
|
+
}, formatMessage(messages.editLink)), /*#__PURE__*/React.createElement(DropdownItem, {
|
|
123
|
+
onClick: handleDisconnectClick
|
|
124
|
+
}, formatMessage(messages.removeLink)))));
|
|
125
|
+
}
|
|
126
|
+
return /*#__PURE__*/React.createElement(Box, {
|
|
127
|
+
xcss: cx(styles.crossIconWrapper, shouldShowIcon ? styles.iconVisible : styles.iconHidden)
|
|
128
|
+
}, /*#__PURE__*/React.createElement(Tooltip, {
|
|
129
|
+
content: formatMessage(messages.disconnectTooltip),
|
|
130
|
+
position: "top"
|
|
131
|
+
}, /*#__PURE__*/React.createElement(IconButton, {
|
|
132
|
+
label: `disconnect the container ${title}`,
|
|
133
|
+
appearance: "subtle",
|
|
134
|
+
icon: iconProps => /*#__PURE__*/React.createElement(CrossIcon, _extends({}, iconProps, {
|
|
135
|
+
size: "small"
|
|
136
|
+
})),
|
|
137
|
+
spacing: "compact",
|
|
138
|
+
onClick: handleDisconnectClick
|
|
139
|
+
})));
|
|
140
|
+
};
|
|
@@ -161,6 +161,19 @@ export const actions = {
|
|
|
161
161
|
links: currentState.links.filter(link => link.linkId !== linkId)
|
|
162
162
|
});
|
|
163
163
|
},
|
|
164
|
+
fetchWebLinkTitle: url => async ({
|
|
165
|
+
setState
|
|
166
|
+
}) => {
|
|
167
|
+
if (!url) {
|
|
168
|
+
return undefined;
|
|
169
|
+
}
|
|
170
|
+
try {
|
|
171
|
+
const title = await teamsClient.getWebLinkTitle(url);
|
|
172
|
+
return title;
|
|
173
|
+
} catch (error) {
|
|
174
|
+
return undefined;
|
|
175
|
+
}
|
|
176
|
+
},
|
|
164
177
|
initialState: state => ({
|
|
165
178
|
setState
|
|
166
179
|
}) => {
|
|
@@ -3,7 +3,7 @@ import React from 'react';
|
|
|
3
3
|
import { defineMessages, FormattedMessage } from 'react-intl-next';
|
|
4
4
|
import Button from '@atlaskit/button/new';
|
|
5
5
|
import ModalDialog, { ModalBody, ModalFooter, ModalHeader, ModalTitle } from '@atlaskit/modal-dialog';
|
|
6
|
-
import { Box, Stack } from '@atlaskit/primitives/compiled';
|
|
6
|
+
import { Box, Stack, Text } from '@atlaskit/primitives/compiled';
|
|
7
7
|
import { getContainerProperties } from '../../../common/utils/get-container-properties';
|
|
8
8
|
export const messages = defineMessages({
|
|
9
9
|
disconnectDialogTitle: {
|
|
@@ -66,7 +66,9 @@ export const DisconnectDialog = ({
|
|
|
66
66
|
space: "space.150"
|
|
67
67
|
}, /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, messages.disconnectDialogDescription, {
|
|
68
68
|
values: {
|
|
69
|
-
containerName: /*#__PURE__*/React.createElement(
|
|
69
|
+
containerName: /*#__PURE__*/React.createElement(Text, {
|
|
70
|
+
weight: "semibold"
|
|
71
|
+
}, containerName),
|
|
70
72
|
containerType: /*#__PURE__*/React.createElement(React.Fragment, null, description, " ", containerTypeText)
|
|
71
73
|
}
|
|
72
74
|
}))), containerTypeText ? /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, messages.disconnectDialogDisclaimer, {
|