Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions web/.storybook/preview.js
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ import { addDecorator, addParameters } from '@storybook/react';
import { darkTheme, lightTheme } from './../packages/design/src/theme';
import DefaultThemeProvider from '../packages/design/src/ThemeProvider';
import Box from './../packages/design/src/Box';
import '../packages/teleport/src/lib/polyfillRandomUuid';
import { ThemeProvider as TeletermThemeProvider } from './../packages/teleterm/src/ui/ThemeProvider';
import { theme as TeletermTheme } from './../packages/teleterm/src/ui/ThemeProvider/theme';
import { handlersTeleport } from './../packages/teleport/src/mocks/handlers';
Expand Down
45 changes: 19 additions & 26 deletions web/packages/shared/components/Notification/Notification.story.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ export const Notifications = () => {
<Flex flexDirection="column" gap={4}>
<Notification
item={{
id: getId(),
id: crypto.randomUUID(),
Comment thread
rudream marked this conversation as resolved.
Outdated
severity: 'info',
content: {
title: 'Info with title and description',
Expand All @@ -51,7 +51,7 @@ export const Notifications = () => {

<Notification
item={{
id: getId(),
id: crypto.randomUUID(),
severity: 'warn',
content: {
title: 'Warning with title and description',
Expand All @@ -66,7 +66,7 @@ export const Notifications = () => {

<Notification
item={{
id: getId(),
id: crypto.randomUUID(),
severity: 'error',
content: {
title: 'Error with title and description',
Expand All @@ -83,7 +83,7 @@ export const Notifications = () => {
<Flex flexDirection="column" gap={4}>
<Notification
item={{
id: getId(),
id: crypto.randomUUID(),
severity: 'info',
content: 'Multiline info without title. ' + loremIpsum,
}}
Expand All @@ -95,7 +95,7 @@ export const Notifications = () => {

<Notification
item={{
id: getId(),
id: crypto.randomUUID(),
severity: 'warn',
content: 'Multiline warning without title. ' + loremIpsum,
}}
Expand All @@ -107,7 +107,7 @@ export const Notifications = () => {

<Notification
item={{
id: getId(),
id: crypto.randomUUID(),
severity: 'error',
content: 'Multiline error without title. ' + loremIpsum,
}}
Expand All @@ -121,7 +121,7 @@ export const Notifications = () => {
<Flex flexDirection="column" gap={4}>
<Notification
item={{
id: getId(),
id: crypto.randomUUID(),
severity: 'info',
content: 'Info without title',
}}
Expand All @@ -133,7 +133,7 @@ export const Notifications = () => {

<Notification
item={{
id: getId(),
id: crypto.randomUUID(),
severity: 'warn',
content: 'Warning without title',
}}
Expand All @@ -145,7 +145,7 @@ export const Notifications = () => {

<Notification
item={{
id: getId(),
id: crypto.randomUUID(),
severity: 'error',
content: 'Error without title',
}}
Expand All @@ -159,7 +159,7 @@ export const Notifications = () => {
<Flex flexDirection="column" gap={4}>
<Notification
item={{
id: getId(),
id: crypto.randomUUID(),
severity: 'info',
content: {
title: 'Info with link',
Expand All @@ -177,7 +177,7 @@ export const Notifications = () => {
/>
<Notification
item={{
id: getId(),
id: crypto.randomUUID(),
severity: 'warn',
content: {
title: 'Warning with link',
Expand All @@ -195,7 +195,7 @@ export const Notifications = () => {
/>
<Notification
item={{
id: getId(),
id: crypto.randomUUID(),
severity: 'error',
content: {
title: 'Error with link',
Expand All @@ -216,7 +216,7 @@ export const Notifications = () => {
<Flex flexDirection="column" gap={4}>
<Notification
item={{
id: getId(),
id: crypto.randomUUID(),
severity: 'info',
content: {
title: 'Info with list',
Expand All @@ -230,7 +230,7 @@ export const Notifications = () => {
/>
<Notification
item={{
id: getId(),
id: crypto.randomUUID(),
severity: 'warn',
content: {
title: 'Warning with list',
Expand All @@ -244,7 +244,7 @@ export const Notifications = () => {
/>
<Notification
item={{
id: getId(),
id: crypto.randomUUID(),
severity: 'error',
content: {
title: 'Error with list',
Expand All @@ -261,7 +261,7 @@ export const Notifications = () => {
<Flex flexDirection="column" gap={4}>
<Notification
item={{
id: getId(),
id: crypto.randomUUID(),
severity: 'info',
content:
'Unbreakable text. /Users/test/Library/ApplicationSupport/Electron/configuration.json',
Expand All @@ -286,7 +286,7 @@ export const AutoRemovable = () => {
{showInfo ? (
<Notification
item={{
id: getId(),
id: crypto.randomUUID(),
severity: 'info',
content:
"This will be automatically removed after 5 seconds. Click to expand it. Mouseover it to restart the timer. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.",
Expand All @@ -303,7 +303,7 @@ export const AutoRemovable = () => {
{showWarning ? (
<Notification
item={{
id: getId(),
id: crypto.randomUUID(),
severity: 'warn',
content:
"This will be automatically removed after 5 seconds. Click to expand it. Mouseover it to restart the timer. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.",
Expand All @@ -320,7 +320,7 @@ export const AutoRemovable = () => {
{showError ? (
<Notification
item={{
id: getId(),
id: crypto.randomUUID(),
severity: 'error',
content:
"This can only be removed by clicking on the X. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.",
Expand All @@ -337,12 +337,5 @@ export const AutoRemovable = () => {
);
};

// Alternative to crypto.randomUUID, which doesn't work in storybook.
let id = 0;
function getId() {
id++;
return id.toString();
}

const loremIpsum =
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut non ipsum dignissim, dignissim est vitae, facilisis nunc.';
Original file line number Diff line number Diff line change
Expand Up @@ -242,7 +242,7 @@ export const Warnings = () => {
setWarnings(prevItems => [
...prevItems,
{
id: getId(),
id: crypto.randomUUID(),
severity: 'warn',
content:
"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.",
Expand Down Expand Up @@ -280,10 +280,3 @@ export const Warnings = () => {
</>
);
};

// Alternative to crypto.randomUUID, which doesn't work in storybook.
let id = 0;
function getId() {
id++;
return id.toString();
}
2 changes: 2 additions & 0 deletions web/packages/teleport/src/boot.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,8 @@ import React from 'react';

import history from 'teleport/services/history';

import 'teleport/lib/polyfillRandomUuid';

import Teleport from './Teleport';
import TeleportContext from './teleportContext';
import cfg from './config';
Expand Down
155 changes: 155 additions & 0 deletions web/packages/teleport/src/lib/polyfillRandomUuid.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,155 @@
/*
Copyright 2023 Gravitational, Inc.

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
Comment thread
rudream marked this conversation as resolved.
Outdated

if (typeof crypto?.randomUUID != 'function') {
window.crypto.randomUUID = randomUUID;
}

// This polyfill is from https://github.com/uuidjs/randomUUID/tree/0273d4a16e25e05627ff4797739d976f6302bd6c

// Code based on Node.js' `lib/internal/crypto/random.js`, subject
// to Node.js license found at:
// https://raw.githubusercontent.com/nodejs/node/master/LICENSE
Comment thread
rudream marked this conversation as resolved.
Outdated

//
// internal/errors
//
class ERR_INVALID_ARG_TYPE extends TypeError {
constructor(name, type, value) {
super(`${name} variable is not of type ${type} (value: '${value}')`);
}

code = 'ERR_INVALID_ARG_TYPE';
}

//
// internal/validators
//

function validateBoolean(value, name) {
if (typeof value !== 'boolean')
throw new ERR_INVALID_ARG_TYPE(name, 'boolean', value);
}

function validateObject(value, name) {
if (value === null || Array.isArray(value) || typeof value !== 'object') {
throw new ERR_INVALID_ARG_TYPE(name, 'Object', value);
}
}

//
// crypto
//

const randomFillSync =
typeof window === 'undefined'
? require('crypto').randomFillSync
: window.crypto.getRandomValues.bind(window.crypto);
Comment thread
rudream marked this conversation as resolved.
Outdated

// Implements an RFC 4122 version 4 random UUID.
// To improve performance, random data is generated in batches
// large enough to cover kBatchSize UUID's at a time. The uuidData
// and uuid buffers are reused. Each call to randomUUID() consumes
// 16 bytes from the buffer.

const kHexDigits = [
48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 97, 98, 99, 100, 101, 102,
];

const kBatchSize = 128;
let uuidData;
let uuidNotBuffered;
let uuid;
let uuidBatch = 0;

function getBufferedUUID() {
if (uuidData === undefined) {
uuidData = new Uint8Array(16 * kBatchSize);
}

if (uuidBatch === 0) randomFillSync(uuidData);
uuidBatch = (uuidBatch + 1) % kBatchSize;
return uuidData.slice(uuidBatch * 16, uuidBatch * 16 + 16);
}

function randomUUID(options) {
if (options !== undefined) validateObject(options, 'options');
const { disableEntropyCache = false } = { ...options };

validateBoolean(disableEntropyCache, 'options.disableEntropyCache');

if (uuid === undefined) {
uuid = new Uint8Array(36);
uuid[8] = uuid[13] = uuid[18] = uuid[23] = '-'.charCodeAt(0);
uuid[14] = 52; // '4', identifies the UUID version
}

let uuidBuf;
if (!disableEntropyCache) {
uuidBuf = getBufferedUUID();
} else {
uuidBuf = uuidNotBuffered;
if (uuidBuf === undefined) uuidBuf = uuidNotBuffered = new Uint8Array(16);
randomFillSync(uuidBuf);
}

// Variant byte: 10xxxxxx (variant 1)
uuidBuf[8] = (uuidBuf[8] & 0x3f) | 0x80;

// This function is structured the way it is for performance.
// The uuid buffer stores the serialization of the random
// bytes from uuidData.
// xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx
let n = 0;
uuid[0] = kHexDigits[uuidBuf[n] >> 4];
uuid[1] = kHexDigits[uuidBuf[n++] & 0xf];
uuid[2] = kHexDigits[uuidBuf[n] >> 4];
uuid[3] = kHexDigits[uuidBuf[n++] & 0xf];
uuid[4] = kHexDigits[uuidBuf[n] >> 4];
uuid[5] = kHexDigits[uuidBuf[n++] & 0xf];
uuid[6] = kHexDigits[uuidBuf[n] >> 4];
uuid[7] = kHexDigits[uuidBuf[n++] & 0xf];
// -
uuid[9] = kHexDigits[uuidBuf[n] >> 4];
uuid[10] = kHexDigits[uuidBuf[n++] & 0xf];
uuid[11] = kHexDigits[uuidBuf[n] >> 4];
uuid[12] = kHexDigits[uuidBuf[n++] & 0xf];
// -
// 4, uuid[14] is set already...
uuid[15] = kHexDigits[uuidBuf[n++] & 0xf];
uuid[16] = kHexDigits[uuidBuf[n] >> 4];
uuid[17] = kHexDigits[uuidBuf[n++] & 0xf];
// -
uuid[19] = kHexDigits[uuidBuf[n] >> 4];
uuid[20] = kHexDigits[uuidBuf[n++] & 0xf];
uuid[21] = kHexDigits[uuidBuf[n] >> 4];
uuid[22] = kHexDigits[uuidBuf[n++] & 0xf];
// -
uuid[24] = kHexDigits[uuidBuf[n] >> 4];
uuid[25] = kHexDigits[uuidBuf[n++] & 0xf];
uuid[26] = kHexDigits[uuidBuf[n] >> 4];
uuid[27] = kHexDigits[uuidBuf[n++] & 0xf];
uuid[28] = kHexDigits[uuidBuf[n] >> 4];
uuid[29] = kHexDigits[uuidBuf[n++] & 0xf];
uuid[30] = kHexDigits[uuidBuf[n] >> 4];
uuid[31] = kHexDigits[uuidBuf[n++] & 0xf];
uuid[32] = kHexDigits[uuidBuf[n] >> 4];
uuid[33] = kHexDigits[uuidBuf[n++] & 0xf];
uuid[34] = kHexDigits[uuidBuf[n] >> 4];
uuid[35] = kHexDigits[uuidBuf[n] & 0xf];

return String.fromCharCode.apply(null, uuid);
}