feat: move to nanonids (#3768)

Author: drdelambre

package.json

@@ -98,7 +98,6 @@
     "@types/react-virtualized": "^9.18.3",
     "@types/resize-observer-browser": "^0.1.5",
     "@types/text-encoding": "^0.0.32",
-    "@types/uuid": "^3.4.3",
     "@types/webpack": "^4.4.35",
     "@types/webpack-env": "^1.15.2",
     "@typescript-eslint/eslint-plugin": "^2.6.0",
@@ -186,6 +185,7 @@
     "monaco-editor-webpack-plugin": "^2.1.0",
     "monaco-languageclient": "^0.13.0",
     "monaco-textmate": "^3.0.1",
+    "nanoid": "^3.2.0",
     "normalizr": "^3.4.1",
     "onigasm": "^2.2.4",
     "papaparse": "^5.2.0",
@@ -210,7 +210,6 @@
     "rudder-sdk-js": "^1.0.16",
     "s2-geometry": "^1.2.10",
     "use-local-storage-state": "^9.0.2",
-    "uuid": "^3.2.1",
     "worker-plugin": "^5.0.1",
     "y-websocket": "^1.3.16",
     "yjs": "^13.5.13"

src/clockface/components/inputs/multipleInput/MultipleRows.tsx

@@ -1,6 +1,6 @@
 // Libraries
 import React, {SFC} from 'react'
-import uuid from 'uuid'
+import {nanoid} from 'nanoid'
 
 // Components
 import Row from 'src/clockface/components/inputs/multipleInput/Row'
@@ -24,7 +24,7 @@ const Rows: SFC<RowsProps> = ({tags, onDeleteTag, onChange}) => {
         return (
           <Row
             index={tags.indexOf(item)}
-            key={uuid.v4()}
+            key={nanoid()}
             item={item}
             onDelete={onDeleteTag}
             onChange={onChange}

src/clockface/components/inputs/multipleInput/Row.tsx

@@ -1,6 +1,6 @@
 // Libraries
 import React, {PureComponent} from 'react'
-import uuid from 'uuid'
+import {nanoid} from 'nanoid'
 import {ErrorHandling} from 'src/shared/decorators/errors'
 
 // Components
@@ -39,7 +39,7 @@ class Row extends PureComponent<RowProps> {
     return (
       <IndexList>
         <IndexList.Body emptyState={<div />} columnCount={2}>
-          <IndexList.Row key={uuid.v4()} disabled={false}>
+          <IndexList.Row key={nanoid()} disabled={false}>
             <IndexList.Cell>
               <EditableDescription
                 description={item.text}

src/dashboards/utils/cellGetters.ts

@@ -1,5 +1,5 @@
 // Libraries
-import uuid from 'uuid'
+import {nanoid} from 'nanoid'
 
 // Types
 import {
@@ -54,7 +54,7 @@ export const getNewDashboardCell = (
   const isStaticLegendType = staticLegendTypes.has(viewProperties?.type)
 
   const defaultCell = {
-    id: uuid.v4(),
+    id: nanoid(),
     x: 0,
     y: 0,
     h:

src/dataLoaders/components/collectorsWizard/select/StreamingSelector.tsx

@@ -1,6 +1,6 @@
 // Libraries
 import React, {PureComponent, ChangeEvent, createElement} from 'react'
-import uuid from 'uuid'
+import {nanoid} from 'nanoid'
 
 // Components
 import {
@@ -45,7 +45,7 @@ class StreamingSelector extends PureComponent<Props, State> {
   constructor(props: Props) {
     super(props)
     this.state = {
-      gridSizerUpdateFlag: uuid.v4(),
+      gridSizerUpdateFlag: nanoid(),
       searchTerm: '',
     }
   }
@@ -60,7 +60,7 @@ class StreamingSelector extends PureComponent<Props, State> {
       this.props.telegrafPlugins.length === 0
 
     if (addFirst || removeLast) {
-      const gridSizerUpdateFlag = uuid.v4()
+      const gridSizerUpdateFlag = nanoid()
       this.setState({gridSizerUpdateFlag})
     }
   }

src/dataLoaders/components/collectorsWizard/select/TelegrafUIRefreshSelector.tsx

@@ -1,6 +1,6 @@
 // Libraries
 import React, {PureComponent, ChangeEvent} from 'react'
-import uuid from 'uuid'
+import {nanoid} from 'nanoid'
 
 // Components
 import {
@@ -60,7 +60,7 @@ class TelegrafUIRefreshSelector extends PureComponent<Props, State> {
   constructor(props: Props) {
     super(props)
     this.state = {
-      gridSizerUpdateFlag: uuid.v4(),
+      gridSizerUpdateFlag: nanoid(),
       isExistingBucket: true,
       searchTerm: '',
       selectedBucket: null,
@@ -87,7 +87,7 @@ class TelegrafUIRefreshSelector extends PureComponent<Props, State> {
       this.props.telegrafPlugins.length === 0
 
     if (addFirst || removeLast) {
-      const gridSizerUpdateFlag = uuid.v4()
+      const gridSizerUpdateFlag = nanoid()
       this.setState({gridSizerUpdateFlag})
     }
 

src/flows/context/flow.current.tsx

@@ -9,13 +9,15 @@ import React, {
 import {useLocation} from 'react-router-dom'
 import {Flow, PipeData, PipeMeta} from 'src/types/flows'
 import {FlowListContext, FlowListProvider} from 'src/flows/context/flow.list'
-import {v4 as UUID} from 'uuid'
+import {customAlphabet} from 'nanoid'
 import {DEFAULT_PROJECT_NAME, PIPE_DEFINITIONS} from 'src/flows'
 import {isFlagEnabled} from 'src/shared/utils/featureFlag'
-import * as Y from 'yjs'
+import {Doc} from 'yjs'
 import {WebsocketProvider} from 'y-websocket'
 import {serialize, hydrate} from 'src/flows/context/flow.list'
 
+const prettyid = customAlphabet('abcdefghijklmnop0123456789', 12)
+
 export interface FlowContextType {
   name: string
   flow: Flow | null
@@ -46,7 +48,7 @@ export const FlowProvider: FC = ({children}) => {
   const {flows, update, currentID} = useContext(FlowListContext)
   const [currentFlow, setCurrentFlow] = useState<Flow>()
   const provider = useRef<WebsocketProvider>()
-  const yDoc = useRef(new Y.Doc())
+  const yDoc = useRef(new Doc())
   function disconnectProvider() {
     if (provider.current) {
       provider.current.disconnect()
@@ -239,7 +241,7 @@ export const FlowProvider: FC = ({children}) => {
   )
 
   const addPipe = (initial: PipeData, index?: number) => {
-    const id = `local_${UUID()}`
+    const id = prettyid()
     const title =
       initial.title ||
       `${PIPE_DEFINITIONS[initial.type].button || 'Panel'} ${++GENERATOR_INDEX}`

src/flows/context/flow.list.tsx

@@ -1,7 +1,7 @@
 import React, {FC, useCallback, useEffect, useState} from 'react'
 import {useDispatch, useSelector} from 'react-redux'
 import {createLocalStorageStateHook} from 'use-local-storage-state'
-import {v4 as UUID} from 'uuid'
+import {nanoid} from 'nanoid'
 import {
   FlowList,
   Flow,
@@ -141,7 +141,7 @@ export function hydrate(data) {
     return flow
   }
   data.spec.pipes.forEach(pipe => {
-    const id = pipe.id || `local_${UUID()}`
+    const id = pipe.id || `local_${nanoid()}`
 
     flow.data.allIDs.push(id)
     flow.meta.allIDs.push(id)

src/notifications/rules/components/RuleOverlay.reducer.tsx

@@ -1,5 +1,5 @@
 // Libraries
-import {v4} from 'uuid'
+import {nanoid} from 'nanoid'
 import {omit} from 'lodash'
 
 // Types
@@ -48,7 +48,7 @@ export const reducer = (state: RuleState, action: Action) => {
       const {tagRule} = action
       return {
         ...state,
-        tagRules: [...state.tagRules, {...tagRule, id: v4()}],
+        tagRules: [...state.tagRules, {...tagRule, id: nanoid()}],
       }
     }
 

src/notifications/rules/utils/index.ts

@@ -1,6 +1,6 @@
 // Libraries
 import {omit} from 'lodash'
-import uuid from 'uuid'
+import {nanoid} from 'nanoid'
 
 // Types
 import {
@@ -109,7 +109,7 @@ export const initRuleDraft = (orgID: string): NotificationRuleDraft => ({
   labels: [],
   statusRules: [
     {
-      cid: uuid.v4(),
+      cid: nanoid(),
       value: {
         currentLevel: 'CRIT',
         period: '1h',
@@ -135,7 +135,7 @@ export const draftRuleToPostRule = (
 }
 
 export const newTagRuleDraft = () => ({
-  cid: uuid.v4(),
+  cid: nanoid(),
   value: {
     key: '',
     value: '',
@@ -153,7 +153,7 @@ export const ruleToDraftRule = (rule: GenRule): NotificationRuleDraft => {
     status: RemoteDataState.Done,
     activeStatus: rule.status,
     offset: rule.offset || '',
-    statusRules: statusRules.map(value => ({cid: uuid.v4(), value})),
-    tagRules: tagRules.map(value => ({cid: uuid.v4(), value})),
+    statusRules: statusRules.map(value => ({cid: nanoid(), value})),
+    tagRules: tagRules.map(value => ({cid: nanoid(), value})),
   }
 }