@atlaskit/link-picker 1.0.0 → 1.1.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/link-picker
 
+## 1.1.0
+
+### Minor Changes
+
+- [`ba5d8ed23cc`](https://bitbucket.org/atlassian/atlassian-frontend/commits/ba5d8ed23cc) - Adds search error message
+
 ## 1.0.0
 
 ### Major Changes

package/dist/cjs/messages.js

@@ -89,14 +89,24 @@ var messages = (0, _reactIntlNext.defineMessages)({
     description: 'Describes type of items shown in the list for screen-reader users'
   },
   cancelButton: {
-    id: 'fabric.linkPicker.cancel.button',
+    id: 'fabric.linkPicker.button.cancel',
     defaultMessage: 'Cancel',
     description: 'Button to cancel and dismiss the link picker'
   },
   insertButton: {
-    id: 'fabric.linkPicker.cancel.insert',
+    id: 'fabric.linkPicker.button.insert',
     defaultMessage: 'Insert',
     description: 'Button to insert searched or selected link'
+  },
+  noResults: {
+    id: 'fabric.linkPicker.search.noResults.heading',
+    defaultMessage: 'We couldn’t find anything matching your search.',
+    description: 'Heading message shown when a search has no results'
+  },
+  noResultsDescription: {
+    id: 'fabric.linkPicker.search.noResults.description',
+    defaultMessage: 'Try again with a different term.',
+    description: 'Describes possible action when a search returns no results'
   }
 });
 exports.messages = messages;

package/dist/cjs/ui/link-picker.js

@@ -57,6 +57,8 @@ var _search = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/search
 
 var _visuallyHidden = _interopRequireDefault(require("@atlaskit/visually-hidden"));
 
+var _linkSearchNoResults = _interopRequireDefault(require("./link-search-no-results"));
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -495,6 +497,7 @@ var LinkPicker = /*#__PURE__*/function (_PureComponent) {
         size: "medium",
         label: ''
       }));
+      var noResults = activePlugin && !isLoading && !items.length && !(0, _url.isSafeUrl)(url);
       return (0, _react2.jsx)("div", {
         "data-testid": "link-picker",
         className: "recent-list",
@@ -566,6 +569,10 @@ var LinkPicker = /*#__PURE__*/function (_PureComponent) {
         onSelect: this.handleSelected,
         onMouseEnter: this.handleMouseEnterResultItem,
         onMouseLeave: this.handleMouseLeaveResultItem
+      }), noResults && (0, _react2.jsx)(_linkSearchNoResults.default, {
+        testId: "link-search-no-results",
+        header: formatMessage(_messages.messages.noResults),
+        description: formatMessage(_messages.messages.noResultsDescription)
       }), (0, _react2.jsx)(_form.FormFooter, {
         align: "end"
       }, (0, _react2.jsx)(_button.ButtonGroup, null, (0, _react2.jsx)(_button.default, {

package/dist/cjs/ui/link-search-no-results/index.js

@@ -0,0 +1,27 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _emptyState = _interopRequireDefault(require("@atlaskit/empty-state"));
+
+var _noResults = _interopRequireDefault(require("./no-results.svg"));
+
+var NoResults = function NoResults(props) {
+  return /*#__PURE__*/_react.default.createElement(_emptyState.default, (0, _extends2.default)({}, props, {
+    imageUrl: _noResults.default,
+    maxImageWidth: 130,
+    maxImageHeight: 130
+  }));
+};
+
+var _default = NoResults;
+exports.default = _default;

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/link-picker",
-	"version": "1.0.0",
+	"version": "1.1.0",
 	"sideEffects": false
 }

package/dist/es2019/messages.js

@@ -81,13 +81,23 @@ export const messages = defineMessages({
     description: 'Describes type of items shown in the list for screen-reader users'
   },
   cancelButton: {
-    id: 'fabric.linkPicker.cancel.button',
+    id: 'fabric.linkPicker.button.cancel',
     defaultMessage: 'Cancel',
     description: 'Button to cancel and dismiss the link picker'
   },
   insertButton: {
-    id: 'fabric.linkPicker.cancel.insert',
+    id: 'fabric.linkPicker.button.insert',
     defaultMessage: 'Insert',
     description: 'Button to insert searched or selected link'
+  },
+  noResults: {
+    id: 'fabric.linkPicker.search.noResults.heading',
+    defaultMessage: 'We couldn’t find anything matching your search.',
+    description: 'Heading message shown when a search has no results'
+  },
+  noResultsDescription: {
+    id: 'fabric.linkPicker.search.noResults.description',
+    defaultMessage: 'Try again with a different term.',
+    description: 'Describes possible action when a search returns no results'
   }
 });

package/dist/es2019/ui/link-picker.js

@@ -16,6 +16,7 @@ import Button, { ButtonGroup } from '@atlaskit/button';
 import { FormFooter } from '@atlaskit/form';
 import EditorSearchIcon from '@atlaskit/icon/glyph/editor/search';
 import VisuallyHidden from '@atlaskit/visually-hidden';
+import LinkSearchNoResults from './link-search-no-results';
 export const RECENT_SEARCH_LIST_SIZE = 5;
 
 class LinkPicker extends PureComponent {
@@ -386,6 +387,7 @@ class LinkPicker extends PureComponent {
       size: "medium",
       label: ''
     }));
+    const noResults = activePlugin && !isLoading && !items.length && !isSafeUrl(url);
     return jsx("div", {
       "data-testid": "link-picker",
       className: "recent-list",
@@ -457,6 +459,10 @@ class LinkPicker extends PureComponent {
       onSelect: this.handleSelected,
       onMouseEnter: this.handleMouseEnterResultItem,
       onMouseLeave: this.handleMouseLeaveResultItem
+    }), noResults && jsx(LinkSearchNoResults, {
+      testId: "link-search-no-results",
+      header: formatMessage(messages.noResults),
+      description: formatMessage(messages.noResultsDescription)
     }), jsx(FormFooter, {
       align: "end"
     }, jsx(ButtonGroup, null, jsx(Button, {

package/dist/es2019/ui/link-search-no-results/index.js

@@ -0,0 +1,12 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import EmptyState from '@atlaskit/empty-state';
+import noResultsImg from './no-results.svg';
+
+const NoResults = props => /*#__PURE__*/React.createElement(EmptyState, _extends({}, props, {
+  imageUrl: noResultsImg,
+  maxImageWidth: 130,
+  maxImageHeight: 130
+}));
+
+export default NoResults;

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/link-picker",
-	"version": "1.0.0",
+	"version": "1.1.0",
 	"sideEffects": false
 }

package/dist/esm/messages.js

@@ -81,13 +81,23 @@ export var messages = defineMessages({
     description: 'Describes type of items shown in the list for screen-reader users'
   },
   cancelButton: {
-    id: 'fabric.linkPicker.cancel.button',
+    id: 'fabric.linkPicker.button.cancel',
     defaultMessage: 'Cancel',
     description: 'Button to cancel and dismiss the link picker'
   },
   insertButton: {
-    id: 'fabric.linkPicker.cancel.insert',
+    id: 'fabric.linkPicker.button.insert',
     defaultMessage: 'Insert',
     description: 'Button to insert searched or selected link'
+  },
+  noResults: {
+    id: 'fabric.linkPicker.search.noResults.heading',
+    defaultMessage: 'We couldn’t find anything matching your search.',
+    description: 'Heading message shown when a search has no results'
+  },
+  noResultsDescription: {
+    id: 'fabric.linkPicker.search.noResults.description',
+    defaultMessage: 'Try again with a different term.',
+    description: 'Describes possible action when a search returns no results'
   }
 });

package/dist/esm/ui/link-picker.js

@@ -1,4 +1,3 @@
-import _regeneratorRuntime from "@babel/runtime/regenerator";
 import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
@@ -12,6 +11,8 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
@@ -32,6 +33,7 @@ import Button, { ButtonGroup } from '@atlaskit/button';
 import { FormFooter } from '@atlaskit/form';
 import EditorSearchIcon from '@atlaskit/icon/glyph/editor/search';
 import VisuallyHidden from '@atlaskit/visually-hidden';
+import LinkSearchNoResults from './link-search-no-results';
 export var RECENT_SEARCH_LIST_SIZE = 5;
 
 var LinkPicker = /*#__PURE__*/function (_PureComponent) {
@@ -473,6 +475,7 @@ var LinkPicker = /*#__PURE__*/function (_PureComponent) {
         size: "medium",
         label: ''
       }));
+      var noResults = activePlugin && !isLoading && !items.length && !isSafeUrl(url);
       return jsx("div", {
         "data-testid": "link-picker",
         className: "recent-list",
@@ -544,6 +547,10 @@ var LinkPicker = /*#__PURE__*/function (_PureComponent) {
         onSelect: this.handleSelected,
         onMouseEnter: this.handleMouseEnterResultItem,
         onMouseLeave: this.handleMouseLeaveResultItem
+      }), noResults && jsx(LinkSearchNoResults, {
+        testId: "link-search-no-results",
+        header: formatMessage(messages.noResults),
+        description: formatMessage(messages.noResultsDescription)
       }), jsx(FormFooter, {
         align: "end"
       }, jsx(ButtonGroup, null, jsx(Button, {

package/dist/esm/ui/link-search-no-results/index.js

@@ -0,0 +1,14 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import EmptyState from '@atlaskit/empty-state';
+import noResultsImg from './no-results.svg';
+
+var NoResults = function NoResults(props) {
+  return /*#__PURE__*/React.createElement(EmptyState, _extends({}, props, {
+    imageUrl: noResultsImg,
+    maxImageWidth: 130,
+    maxImageHeight: 130
+  }));
+};
+
+export default NoResults;

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/link-picker",
-	"version": "1.0.0",
+	"version": "1.1.0",
 	"sideEffects": false
 }

package/dist/types/messages.d.ts

@@ -89,4 +89,14 @@ export declare const messages: {
         defaultMessage: string;
         description: string;
     };
+    noResults: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    noResultsDescription: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
 };

package/dist/types/ui/link-search-no-results/index.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { EmptyStateProps } from '@atlaskit/empty-state';
+declare const NoResults: (props: EmptyStateProps) => JSX.Element;
+export default NoResults;

package/example-helpers/mock-data.ts

@@ -1,5 +1,3 @@
-// import sub from 'date-fns/sub';
-
 export interface MockDataV3 {
   ACTIVITIES_DATA: {
     data: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/link-picker",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "Standalone link picker",
   "author": "Atlassian Pty Ltd",
   "publishConfig": {
@@ -27,6 +27,7 @@
   },
   "dependencies": {
     "@atlaskit/button": "^16.2.0",
+    "@atlaskit/empty-state": "^7.3.0",
     "@atlaskit/form": "^8.5.1",
     "@atlaskit/icon": "^21.10.0",
     "@atlaskit/spinner": "^15.1.0",
@@ -48,14 +49,13 @@
     "@atlaskit/activity-provider": "^2.3.2",
     "@atlaskit/button": "^16.3.0",
     "@atlaskit/docs": "*",
-    "@atlaskit/editor-test-helpers": "^17.0.0",
-    "@atlaskit/media-test-helpers": "^30.0.0",
+    "@atlaskit/link-test-helpers": "^1.1.0",
     "@atlaskit/popup": "^1.3.5",
     "@atlaskit/ssr": "*",
     "@atlaskit/visual-regression": "*",
     "@atlaskit/webdriver-runner": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.0": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.0",
-    "@atlassian/link-picker-atlassian-plugin": "^10.0.0",
+    "@atlassian/link-picker-atlassian-plugin": "^11.0.0",
     "@atlassian/search-provider": "^2.3.0",
     "@testing-library/dom": "^7.7.3",
     "@testing-library/react": "^8.0.1",

package/report.api.md

@@ -0,0 +1,65 @@
+## API Report File for "@atlaskit/link-picker"
+
+> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
+
+```ts
+/// <reference types="react" />
+
+import { MessageDescriptor } from 'react-intl-next';
+import { default as React_2 } from 'react';
+import { WithIntlProps } from 'react-intl-next';
+import { WrappedComponentProps } from 'react-intl-next';
+
+// @public (undocumented)
+export type LinkInputType = 'manual' | 'typeAhead';
+
+// @public (undocumented)
+export const LinkPicker: React_2.FC<
+  WithIntlProps<WrappedComponentProps<'intl'> & LinkPickerProps>
+> & {
+  WrappedComponent: React_2.ComponentType<
+    WrappedComponentProps<'intl'> & LinkPickerProps
+  >;
+};
+
+// @public (undocumented)
+export interface LinkPickerPlugin {
+  // (undocumented)
+  resolve: (
+    state: LinkPickerState,
+  ) => Promise<ResolveResult> | AsyncGenerator<ResolveResult, ResolveResult>;
+}
+
+// @public (undocumented)
+export interface LinkPickerProps {
+  displayText?: string | null;
+  onCancel: () => void;
+  onSubmit: (arg: OnSubmitParameter) => void;
+  plugins?: LinkPickerPlugin[];
+  url?: string;
+}
+
+// @public (undocumented)
+export interface LinkPickerState {
+  query: string;
+}
+
+// @public (undocumented)
+export interface LinkSearchListItemData {
+  container?: string;
+  icon:
+    | string
+    | React.ComponentType<{
+        alt: string;
+      }>;
+  iconAlt: string | MessageDescriptor;
+  lastUpdatedDate?: Date;
+  lastViewedDate?: Date;
+  name: string;
+  objectId: string;
+  prefetch?: boolean;
+  url: string;
+}
+
+// (No @packageDocumentation comment for this package)
+```