@jetbrains/ring-ui 4.0.51 → 4.0.55

package/components/auth/auth.test.js

@@ -203,7 +203,8 @@ describe('Auth', () => {
         redirectUri: 'http://localhost:8080/hub',
         clientId: '1-1-1-1-1',
         scope: ['0-0-0-0-0', 'youtrack'],
-        optionalScopes: ['youtrack']
+        optionalScopes: ['youtrack'],
+        waitForRedirectTimeout: 0
       });
       try {
         await auth.init();
@@ -226,7 +227,8 @@ describe('Auth', () => {
       auth = new Auth({
         serverUri: '',
         redirect: true,
-        cleanHash: true
+        cleanHash: true,
+        waitForRedirectTimeout: 0
       });
 
       try {
@@ -245,7 +247,8 @@ describe('Auth', () => {
         auth = new Auth({
           serverUri: '',
           redirect: true,
-          cleanHash: true
+          cleanHash: true,
+          waitForRedirectTimeout: 0
         });
 
         try {
@@ -265,7 +268,8 @@ describe('Auth', () => {
       auth = new Auth({
         serverUri: '',
         redirect: true,
-        cleanHash: false
+        cleanHash: false,
+        waitForRedirectTimeout: 0
       });
 
       try {
@@ -284,7 +288,8 @@ describe('Auth', () => {
         serverUri: '',
         redirect: true,
         redirectUri: 'http://localhost:8080/hub',
-        requestCredentials: 'skip'
+        requestCredentials: 'skip',
+        waitForRedirectTimeout: 0
       });
       try {
         await auth.init();
@@ -313,7 +318,8 @@ describe('Auth', () => {
         redirectUri: 'http://localhost:8080/hub',
         clientId: '1-1-1-1-1',
         scope: ['0-0-0-0-0', 'youtrack'],
-        optionalScopes: ['youtrack']
+        optionalScopes: ['youtrack'],
+        waitForRedirectTimeout: 0
       });
 
       auth._storage._tokenStorage = auth._storage._stateStorage =
@@ -330,7 +336,8 @@ describe('Auth', () => {
         auth._storage.saveToken({
           accessToken: 'token',
           expires: TokenValidator._epoch() + HOUR,
-          scopes: ['0-0-0-0-0']
+          scopes: ['0-0-0-0-0'],
+          waitForRedirectTimeout: 0
         });
       });
 

package/components/auth/auth__core.js

@@ -14,6 +14,7 @@ export const DEFAULT_EXPIRES_TIMEOUT = 40 * 60;
 export const DEFAULT_BACKGROUND_TIMEOUT = 10 * 1000;
 const DEFAULT_BACKEND_CHECK_TIMEOUT = 10 * 1000;
 const BACKGROUND_REDIRECT_TIMEOUT = 20 * 1000;
+const DEFAULT_WAIT_FOR_REDIRECT_TIMEOUT = 5 * 1000;
 /* eslint-enable no-magic-numbers */
 
 export const USER_CHANGED_EVENT = 'userChange';
@@ -46,6 +47,7 @@ const DEFAULT_CONFIG = {
   onBackendDown: () => {},
 
   defaultExpiresIn: DEFAULT_EXPIRES_TIMEOUT,
+  waitForRedirectTimeout: DEFAULT_WAIT_FOR_REDIRECT_TIMEOUT,
   translations: {
     login: 'Log in',
     loginTo: 'Log in to %serviceName%',
@@ -311,6 +313,11 @@ export default class Auth {
     const authRequest = await this._requestBuilder.prepareAuthRequest();
     this._redirectCurrentPage(authRequest.url);
 
+    // HUB-10867 Since we already redirecting the page, there is no actual need to throw an error
+    // and scare user with flashing error
+    // But let's keep it just in case redirect was not successful
+    await new Promise(resolve => setTimeout(resolve, this.config.waitForRedirectTimeout));
+
     throw error;
   }
 

package/components/date-picker/date-input.js

@@ -25,7 +25,8 @@ export default class DateInput extends React.PureComponent {
     onInput: PropTypes.func,
     onActivate: PropTypes.func,
     onConfirm: PropTypes.func,
-    onClear: PropTypes.func
+    onClear: PropTypes.func,
+    locale: PropTypes.object
   };
 
   static defaultProps = {
@@ -78,16 +79,16 @@ export default class DateInput extends React.PureComponent {
       time, name, hoverDate,
       date, displayFormat, translations,
       onActivate, onClear,
-      fromPlaceholder, toPlaceholder, timePlaceholder
+      fromPlaceholder, toPlaceholder, timePlaceholder, locale
     } = this.props;
 
     let displayText = '';
     if (active && hoverDate) {
-      displayText = displayFormat(hoverDate);
+      displayText = displayFormat(hoverDate, locale);
     } else if (active && text != null) {
       displayText = text;
     } else if (date) {
-      displayText = displayFormat(date);
+      displayText = displayFormat(date, locale);
     } else if (name === 'time') {
       displayText = time || '';
     }

package/components/date-picker/date-picker.css

@@ -198,6 +198,8 @@
 
   text-align: left;
 
+  text-transform: capitalize;
+
   font-weight: bold;
 
   @supports (flex-basis: 1px) {
@@ -449,6 +451,8 @@
   height: cellSize;
   padding-left: calc(unit * 1.5);
 
+  text-transform: capitalize;
+
   line-height: cellSize;
 }
 

package/components/date-picker/date-picker.js

@@ -90,7 +90,8 @@ export default class DatePicker extends PureComponent {
     disabled: PropTypes.bool,
     minDate: dateType,
     maxDate: dateType,
-    translations: PropTypes.object
+    translations: PropTypes.object,
+    locale: PropTypes.object
   };
 
   static defaultProps = {
@@ -101,10 +102,10 @@ export default class DatePicker extends PureComponent {
     from: null,
     to: null,
     clear: false,
-    displayFormat: date => (date ? formatDate(date, 'd MMM yyyy') : ''),
-    displayMonthFormat: date => (date ? formatDate(date, 'd MMM') : ''),
-    displayDayFormat: date => (date ? formatDate(date, 'd') : ''),
-    displayTimeFormat: date => (date ? formatDate(date, 'HH:mm') : ''),
+    displayFormat: (date, locale) => (date ? formatDate(date, 'd MMM yyyy', {locale}) : ''),
+    displayMonthFormat: (date, locale) => (date ? formatDate(date, 'd MMM', {locale}) : ''),
+    displayDayFormat: (date, locale) => (date ? formatDate(date, 'd', {locale}) : ''),
+    displayTimeFormat: (date, locale) => (date ? formatDate(date, 'HH:mm', {locale}) : ''),
     datePlaceholder: 'Set a date',
     dateTimePlaceholder: 'Set date and time',
     rangePlaceholder: 'Set a period',
@@ -194,7 +195,8 @@ export default class DatePicker extends PureComponent {
       displayFormat,
       displayMonthFormat,
       displayDayFormat,
-      translations
+      translations,
+      locale
     } = this.props;
 
     const date = this.parse(this.props.date);
@@ -204,27 +206,27 @@ export default class DatePicker extends PureComponent {
 
     let text;
     if (!range && !withTime) {
-      text = date ? displayFormat(date) : datePlaceholder || translations.setDate;
+      text = date ? displayFormat(date, locale) : datePlaceholder || translations.setDate;
     } else if (!range && withTime) {
       if (!date && !time) {
         text = dateTimePlaceholder || translations.setDateTime;
       } else {
-        text = `${date && displayFormat(date) || '—'}, ${time || '—'}`;
+        text = `${date && displayFormat(date, locale) || '—'}, ${time || '—'}`;
       }
     } else if (!from && !to) {
       text = rangePlaceholder || translations.setPeriod;
     } else if (!to) {
-      text = `${displayFormat(from)} —`;
+      text = `${displayFormat(from, locale)} —`;
     } else if (!from) {
-      text = `— ${displayFormat(to)}`;
+      text = `— ${displayFormat(to, locale)}`;
     } else if (!isSameYear(from, to)) {
-      text = `${displayFormat(from)} — ${displayFormat(to)}`;
+      text = `${displayFormat(from, locale)} — ${displayFormat(to, locale)}`;
     } else if (!isSameMonth(from, to)) {
-      text = `${displayMonthFormat(from)} — ${displayFormat(to)}`;
+      text = `${displayMonthFormat(from, locale)} — ${displayFormat(to, locale)}`;
     } else if (!isSameDay(from, to)) {
-      text = `${displayDayFormat(from)} — ${displayFormat(to)}`;
+      text = `${displayDayFormat(from, locale)} — ${displayFormat(to, locale)}`;
     } else {
-      text = `${displayFormat(to)}`;
+      text = `${displayFormat(to, locale)}`;
     }
 
     return text;

package/components/date-picker/date-popup.js

@@ -47,7 +47,8 @@ export default class DatePopup extends Component {
     hidden: PropTypes.bool,
     fromPlaceholder: PropTypes.string,
     toPlaceholder: PropTypes.string,
-    timePlaceholder: PropTypes.string
+    timePlaceholder: PropTypes.string,
+    locale: PropTypes.object
   };
 
   static defaultProps = {
@@ -297,7 +298,7 @@ export default class DatePopup extends Component {
   };
 
   render() {
-    const {range, hidden, withTime, time} = this.props;
+    const {range, hidden, withTime, time, locale} = this.props;
     const parsedDate = this.parse(this.props.date, 'date');
     const parsedTo = this.parse(this.props.to, 'to');
 
@@ -391,6 +392,7 @@ export default class DatePopup extends Component {
                 onInput={this.handleInput}
                 onConfirm={this.handleConfirm(name)}
                 onClear={onClear}
+                locale={locale}
               />
             );
           })}
@@ -413,12 +415,13 @@ export default class DatePopup extends Component {
                   onInput={this.handleInput}
                   onConfirm={this.handleConfirm('time')}
                   onClear={clearable && this.onClear || undefined}
+                  locale={locale}
                 />
               )
               : ('')
           }
         </div>
-        <Weekdays/>
+        <Weekdays locale={locale}/>
         <div
           className={styles.calendar}
         >
@@ -426,6 +429,7 @@ export default class DatePopup extends Component {
             {...calendarProps}
             onHover={this.hoverHandler}
             onSelect={this.selectHandler}
+            locale={locale}
           />
           <Years {...calendarProps}/>
         </div>

package/components/date-picker/month-names.js

@@ -21,7 +21,7 @@ class MonthName extends PureComponent {
   };
 
   render() {
-    const {month} = this.props;
+    const {month, locale} = this.props;
 
     return (
       <button
@@ -34,7 +34,7 @@ class MonthName extends PureComponent {
         )}
         onClick={this.handleClick}
       >
-        {format(month, 'MMM')}
+        {format(month, 'LLL', {locale})}
       </button>
     );
   }
@@ -42,11 +42,12 @@ class MonthName extends PureComponent {
 
 MonthName.propTypes = {
   month: dateType,
-  onScrollChange: PropTypes.func
+  onScrollChange: PropTypes.func,
+  locale: PropTypes.string
 };
 
 export default function MonthNames(props) {
-  const {scrollDate} = props;
+  const {scrollDate, locale} = props;
   const months = [];
   for (let i = 0; i < YEAR; i++) {
     const middleDay = set(scrollDate, {month: i, date: MIDDLE_DAY});
@@ -73,6 +74,7 @@ export default function MonthNames(props) {
           key={+month}
           month={month}
           onScrollChange={props.onScrollChange}
+          locale={locale}
         />
       ))}
       {props.currentRange &&
@@ -97,5 +99,6 @@ export default function MonthNames(props) {
 MonthNames.propTypes = {
   scrollDate: dateType,
   onScrollChange: PropTypes.func,
-  currentRange: PropTypes.arrayOf(dateType)
+  currentRange: PropTypes.arrayOf(dateType),
+  locale: PropTypes.string
 };

package/components/date-picker/month.js

@@ -5,6 +5,8 @@ import format from 'date-fns/format';
 import getDay from 'date-fns/getDay';
 import setDay from 'date-fns/setDay';
 
+import PropTypes from 'prop-types';
+
 import Day from './day';
 import {dateType, WEEK, weekdays} from './consts';
 import styles from './date-picker.css';
@@ -12,6 +14,7 @@ import styles from './date-picker.css';
 export default function Month(props) {
   const start = props.month;
   const end = endOfMonth(start);
+  const {locale} = props;
 
   // pad with empty cells starting from last friday
   const weekday = getDay(start);
@@ -25,7 +28,7 @@ export default function Month(props) {
   return (
     <div className={styles.month}>
       <span className={styles.monthTitle}>
-        {format(props.month, 'MMMM')}
+        {format(props.month, 'LLLL', {locale})}
       </span>
       {days.map(date => (
         <Day
@@ -40,5 +43,6 @@ export default function Month(props) {
 }
 
 Month.propTypes = {
-  month: dateType
+  month: dateType,
+  locale: PropTypes.string
 };

package/components/date-picker/weekdays.js

@@ -5,13 +5,17 @@ import format from 'date-fns/format';
 import setDay from 'date-fns/setDay';
 import startOfDay from 'date-fns/startOfDay';
 
+import PropTypes from 'prop-types';
+
 import {weekdays} from './consts';
 import styles from './date-picker.css';
 
-export default function Weekdays() {
+export default function Weekdays(props) {
   const days = Object.keys(weekdays).
     map(key => startOfDay(setDay(new Date(), weekdays[key])));
 
+  const {locale} = props;
+
   return (
     <div className={styles.weekdays}>
       {days.map(day => (
@@ -24,9 +28,13 @@ export default function Weekdays() {
           )}
           key={+day}
         >
-          {format(day, 'EEEEEE')}
+          {format(day, 'EEEEEE', {locale})}
         </span>
       ))}
     </div>
   );
 }
+
+Weekdays.propTypes = {
+  locale: PropTypes.string
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jetbrains/ring-ui",
-  "version": "4.0.51",
+  "version": "4.0.55",
   "description": "JetBrains UI library",
   "author": "JetBrains",
   "license": "Apache-2.0",
@@ -55,7 +55,7 @@
     "test-ci": "karma start karma-ci.conf.js",
     "test-watch": "karma start karma-watch.conf.js",
     "prerelease-ci": "git pull",
-    "release-ci": "lerna publish --yes",
+    "release-ci": "lerna publish --no-verify-access --yes",
     "prepublishOnly": "pinst --disable",
     "postpublish": "pinst --enable"
   },
@@ -66,27 +66,27 @@
   "readmeFilename": "README.md",
   "devDependencies": {
     "@babel/cli": "^7.15.7",
-    "@babel/eslint-parser": "^7.15.7",
+    "@babel/eslint-parser": "^7.15.8",
     "@jetbrains/eslint-config": "^5.3.1",
-    "@jetbrains/generator-ring-ui": "^4.0.39",
+    "@jetbrains/generator-ring-ui": "^4.0.42",
     "@jetbrains/stylelint-config": "^2.0.1",
-    "@primer/octicons": "^16.0.0",
-    "@storybook/addon-a11y": "6.3.9",
-    "@storybook/addon-docs": "6.3.9",
-    "@storybook/addon-essentials": "6.3.9",
+    "@primer/octicons": "^16.1.0",
+    "@storybook/addon-a11y": "6.3.12",
+    "@storybook/addon-docs": "6.3.12",
+    "@storybook/addon-essentials": "6.3.12",
     "@storybook/addon-storyshots": "6.3.2",
     "@storybook/addon-storyshots-puppeteer": "6.3.2",
-    "@storybook/addon-storysource": "6.3.8",
-    "@storybook/addons": "6.3.9",
-    "@storybook/builder-webpack5": "6.3.9",
-    "@storybook/client-api": "6.3.8",
-    "@storybook/core": "6.3.8",
-    "@storybook/html": "6.3.8",
-    "@storybook/manager-webpack5": "^6.3.8",
-    "@storybook/source-loader": "6.3.9",
-    "@storybook/theming": "6.3.9",
+    "@storybook/addon-storysource": "6.3.12",
+    "@storybook/addons": "6.3.12",
+    "@storybook/builder-webpack5": "6.3.12",
+    "@storybook/client-api": "6.3.12",
+    "@storybook/core": "6.3.12",
+    "@storybook/html": "6.3.12",
+    "@storybook/manager-webpack5": "^6.3.12",
+    "@storybook/source-loader": "6.3.12",
+    "@storybook/theming": "6.3.12",
     "@testing-library/react": "^12.1.2",
-    "@testing-library/user-event": "^13.2.1",
+    "@testing-library/user-event": "^13.5.0",
     "@wojtekmaj/enzyme-adapter-react-17": "^0.6.3",
     "angular": "^1.8.2",
     "angular-mocks": "^1.8.2",
@@ -98,32 +98,32 @@
     "chai-dom": "^1.10.0",
     "chai-enzyme": "1.0.0-beta.1",
     "cheerio": "^0.22.0",
-    "core-js": "^3.18.1",
+    "core-js": "^3.18.3",
     "enzyme": "^3.11.0",
     "eslint": "^7.32.0",
-    "eslint-import-resolver-webpack": "^0.13.1",
+    "eslint-import-resolver-webpack": "^0.13.2",
     "eslint-plugin-angular": "^4.1.0",
     "eslint-plugin-bdd": "^2.1.1",
-    "eslint-plugin-import": "^2.24.2",
+    "eslint-plugin-import": "^2.25.2",
     "eslint-plugin-jsx-a11y": "^6.4.1",
     "eslint-plugin-react": "^7.26.1",
     "events": "^3.3.0",
-    "html-webpack-plugin": "^5.3.2",
-    "husky": "^7.0.2",
+    "html-webpack-plugin": "^5.4.0",
+    "husky": "^7.0.4",
     "identity-obj-proxy": "^3.0.0",
-    "imports-loader": "^3.0.0",
-    "jest": "~27.2.4",
+    "imports-loader": "^3.1.0",
+    "jest": "~27.3.1",
     "jest-teamcity": "^1.10.0",
-    "karma": "^6.3.4",
+    "karma": "^6.3.5",
     "karma-chrome-launcher": "3.1.0",
     "karma-mocha": "^2.0.1",
     "karma-sourcemap-loader": "^0.3.8",
     "karma-teamcity-reporter": "^2.0.0",
     "karma-webpack": "^5.0.0",
     "lerna": "^4.0.0",
-    "lint-staged": "^11.1.2",
+    "lint-staged": "^11.2.3",
     "merge-options": "^3.0.4",
-    "mocha": "^9.1.2",
+    "mocha": "^9.1.3",
     "pinst": "^2.1.6",
     "puppeteer": "^10.4.0",
     "raw-loader": "^4.0.2",
@@ -139,8 +139,8 @@
     "teamcity-service-messages": "^0.1.11",
     "terser-webpack-plugin": "^5.2.4",
     "wallaby-webpack": "^3.9.16",
-    "webpack": "^5.55.1",
-    "webpack-cli": "^4.8.0",
+    "webpack": "^5.59.1",
+    "webpack-cli": "^4.9.1",
     "xmlappend": "^1.0.4",
     "yo": "^4.3.0"
   },
@@ -148,10 +148,10 @@
     "core-js": ">=3.0.0",
     "react": ">=16.8.0",
     "react-dom": ">=16.8.0",
-    "webpack": "^5.55.1"
+    "webpack": "^5.59.1"
   },
   "dependencies": {
-    "@babel/core": "^7.15.5",
+    "@babel/core": "^7.15.8",
     "@jetbrains/angular-elastic": "^2.5.1",
     "@jetbrains/babel-preset-jetbrains": "^2.3.1",
     "@jetbrains/icons": "^3.17.1",
@@ -166,7 +166,7 @@
     "combokeys": "^3.0.1",
     "compile-code-loader": "^1.0.0",
     "conic-gradient": "^1.0.0",
-    "css-loader": "^6.3.0",
+    "css-loader": "^6.4.0",
     "date-fns": "^2.25.0",
     "deep-equal": "^2.0.4",
     "element-resize-detector": "^1.2.3",
@@ -178,15 +178,15 @@
     "focus-trap": "^6.7.1",
     "focus-visible": "^5.2.0",
     "highlight.js": "^10.7.2",
-    "html-loader": "^1.3.2",
+    "html-loader": "^3.0.0",
     "interpolate-loader": "^2.0.1",
-    "just-debounce-it": "^1.5.0",
-    "memoize-one": "^5.2.1",
-    "postcss": "^8.3.9",
+    "just-debounce-it": "^2.0.0",
+    "memoize-one": "^6.0.0",
+    "postcss": "^8.3.11",
     "postcss-calc": "^8.0.0",
     "postcss-flexbugs-fixes": "^5.0.2",
     "postcss-font-family-system-ui": "^5.0.0",
-    "postcss-loader": "^6.1.1",
+    "postcss-loader": "^6.2.0",
     "postcss-modules-values-replace": "^3.4.0",
     "postcss-preset-env": "^6.7.0",
     "prop-types": "^15.7.2",
@@ -199,7 +199,7 @@
     "scrollbar-width": "^3.1.1",
     "simply-uuid": "^1.0.1",
     "sniffr": "^1.2.0",
-    "style-loader": "~3.3.0",
+    "style-loader": "~3.3.1",
     "url-loader": "^4.1.1",
     "util-deprecate": "^1.0.2"
   },
@@ -207,5 +207,5 @@
     "node": ">=7.4",
     "npm": ">=6.0.0"
   },
-  "gitHead": "61c8bec13d32695011f20d8e17eb3d641828c0d2"
+  "gitHead": "ade0499f7e4b9ef04fbe6b019eadde68905b868f"
 }