From 164d1696ba8a583e7c5d4ad7bada48c9708bd2ae Mon Sep 17 00:00:00 2001
From: Pavel Zavora <pavel.zavora@bonitoo.io>
Date: Mon, 20 Jun 2022 13:51:07 +0200
Subject: [PATCH] fix(ui): use stable react component keys

---
 ui/src/admin/components/chronograf/AllUsersTable.js      | 6 ++----
 ui/src/admin/components/chronograf/OrganizationsTable.js | 3 +--
 ui/src/admin/components/chronograf/ProvidersTable.js     | 5 ++---
 ui/src/admin/components/chronograf/UsersTable.js         | 3 +--
 ui/src/alerts/components/AlertsTable.tsx                 | 5 ++---
 ui/src/dashboards/components/GaugeOptions.tsx            | 2 +-
 ui/src/kapacitor/components/HandlerTabs.tsx              | 5 ++---
 ui/src/logs/components/SeverityOptions.tsx               | 5 ++---
 ui/src/shared/components/DygraphLegend.tsx               | 5 ++---
 ui/src/shared/components/SourceIndicator.tsx             | 7 ++-----
 ui/src/shared/components/SubSections.tsx                 | 5 ++---
 ui/src/shared/components/Tags.tsx                        | 7 +++----
 ui/src/shared/components/TagsAddButton.tsx               | 5 ++---
 ui/src/shared/components/ThresholdsList.tsx              | 5 ++---
 ui/src/shared/components/threesizer/DivisionMenu.tsx     | 5 ++---
 ui/src/tempVars/components/TemplatePreviewList.tsx       | 5 ++---
 16 files changed, 30 insertions(+), 48 deletions(-)

diff --git a/ui/src/admin/components/chronograf/AllUsersTable.js b/ui/src/admin/components/chronograf/AllUsersTable.js
index d2ddfa9a7..b12b44aa8 100644
--- a/ui/src/admin/components/chronograf/AllUsersTable.js
+++ b/ui/src/admin/components/chronograf/AllUsersTable.js
@@ -1,8 +1,6 @@
 import React, {Component} from 'react'
 import PropTypes from 'prop-types'
 
-import uuid from 'uuid'
-
 import AllUsersTableHeader from 'src/admin/components/chronograf/AllUsersTableHeader'
 import AllUsersTableRowNew from 'src/admin/components/chronograf/AllUsersTableRowNew'
 import AllUsersTableRow from 'src/admin/components/chronograf/AllUsersTableRow'
@@ -138,10 +136,10 @@ class AllUsersTable extends Component {
             </thead>
             <tbody>
               {users.length ? (
-                users.map(user => (
+                users.map((user,i) => (
                   <AllUsersTableRow
                     user={user}
-                    key={uuid.v4()}
+                    key={user.id}
                     organizations={organizations}
                     onAddToOrganization={this.handleAddToOrganization}
                     onRemoveFromOrganization={this.handleRemoveFromOrganization}
diff --git a/ui/src/admin/components/chronograf/OrganizationsTable.js b/ui/src/admin/components/chronograf/OrganizationsTable.js
index 3c7baa05d..59a3aa397 100644
--- a/ui/src/admin/components/chronograf/OrganizationsTable.js
+++ b/ui/src/admin/components/chronograf/OrganizationsTable.js
@@ -1,7 +1,6 @@
 import React, {Component} from 'react'
 import PropTypes from 'prop-types'
 
-import uuid from 'uuid'
 import _ from 'lodash'
 
 import OrganizationsTableRow from 'src/admin/components/chronograf/OrganizationsTableRow'
@@ -90,7 +89,7 @@ class OrganizationsTable extends Component {
           ) : null}
           {organizations.map(org => (
             <OrganizationsTableRow
-              key={uuid.v4()}
+              key={org.id}
               organization={org}
               onDelete={onDeleteOrg}
               onRename={onRenameOrg}
diff --git a/ui/src/admin/components/chronograf/ProvidersTable.js b/ui/src/admin/components/chronograf/ProvidersTable.js
index b13942889..6ed6dd88f 100644
--- a/ui/src/admin/components/chronograf/ProvidersTable.js
+++ b/ui/src/admin/components/chronograf/ProvidersTable.js
@@ -1,7 +1,6 @@
 import React, {Component} from 'react'
 import PropTypes from 'prop-types'
 
-import uuid from 'uuid'
 import ProvidersTableRow from 'src/admin/components/chronograf/ProvidersTableRow'
 import ProvidersTableRowNew from 'src/admin/components/chronograf/ProvidersTableRowNew'
 import {ErrorHandling} from 'src/shared/decorators/errors'
@@ -80,9 +79,9 @@ class ProvidersTable extends Component {
               </div>
               <div className="fancytable--th provider--delete" />
             </div>
-            {mappings.map((mapping, i) => (
+            {mappings.map((mapping) => (
               <ProvidersTableRow
-                key={uuid.v4()}
+                key={mapping.id}
                 mapping={mapping}
                 organizations={organizations}
                 schemes={SCHEMES}
diff --git a/ui/src/admin/components/chronograf/UsersTable.js b/ui/src/admin/components/chronograf/UsersTable.js
index fb691c94a..1f65ac0f4 100644
--- a/ui/src/admin/components/chronograf/UsersTable.js
+++ b/ui/src/admin/components/chronograf/UsersTable.js
@@ -1,7 +1,6 @@
 import React, {Component} from 'react'
 import PropTypes from 'prop-types'
 
-import uuid from 'uuid'
 import _ from 'lodash'
 
 import UsersTableHeader from 'src/admin/components/chronograf/UsersTableHeader'
@@ -91,7 +90,7 @@ class UsersTable extends Component {
                 users.map(user => (
                   <UsersTableRow
                     user={user}
-                    key={uuid.v4()}
+                    key={user.id}
                     organization={organization}
                     onChangeUserRole={this.handleChangeUserRole}
                     onDelete={this.handleDeleteUser}
diff --git a/ui/src/alerts/components/AlertsTable.tsx b/ui/src/alerts/components/AlertsTable.tsx
index 28cc76034..f43deabc4 100644
--- a/ui/src/alerts/components/AlertsTable.tsx
+++ b/ui/src/alerts/components/AlertsTable.tsx
@@ -4,7 +4,6 @@ import {connect} from 'react-redux'
 
 // Libraries
 import _ from 'lodash'
-import uuid from 'uuid'
 import {Link} from 'react-router'
 
 // Components
@@ -210,8 +209,8 @@ class AlertsTable extends PureComponent<Props, State> {
         <InfiniteScroll
           className="alert-history-table--tbody"
           itemHeight={25}
-          items={alerts.map(alert => (
-            <div className="alert-history-table--tr" key={uuid.v4()}>
+          items={alerts.map((alert, i) => (
+            <div className="alert-history-table--tr" key={i}>
               <AlertsTableRow sourceID={id} {...alert} timeZone={timeZone} />
             </div>
           ))}
diff --git a/ui/src/dashboards/components/GaugeOptions.tsx b/ui/src/dashboards/components/GaugeOptions.tsx
index 26e9cfba2..3c370ec38 100644
--- a/ui/src/dashboards/components/GaugeOptions.tsx
+++ b/ui/src/dashboards/components/GaugeOptions.tsx
@@ -56,7 +56,7 @@ class GaugeOptions extends PureComponent<Props> {
                 isMax={index === gaugeColors.length - 1}
                 visualizationType="gauge"
                 threshold={color}
-                key={uuid.v4()}
+                key={index}
                 disableMaxColor={this.disableMaxColor}
                 onChooseColor={this.handleChooseColor}
                 onValidateColorValue={this.handleValidateColorValue}
diff --git a/ui/src/kapacitor/components/HandlerTabs.tsx b/ui/src/kapacitor/components/HandlerTabs.tsx
index 6c7137cdc..d000a6374 100644
--- a/ui/src/kapacitor/components/HandlerTabs.tsx
+++ b/ui/src/kapacitor/components/HandlerTabs.tsx
@@ -1,6 +1,5 @@
 import React, {FunctionComponent, MouseEvent} from 'react'
 import classnames from 'classnames'
-import uuid from 'uuid'
 
 import {Handler} from 'src/types/kapacitor'
 
@@ -27,10 +26,10 @@ const HandlerTabs: FunctionComponent<Props> = ({
 }) =>
   handlersOnThisAlert.length ? (
     <ul className="endpoint-tabs">
-      {handlersOnThisAlert.map(endpoint => {
+      {handlersOnThisAlert.map((endpoint, i) => {
         return (
           <li
-            key={uuid.v4()}
+            key={i}
             className={classnames('endpoint-tab', {
               active:
                 endpoint.alias === (selectedHandler && selectedHandler.alias),
diff --git a/ui/src/logs/components/SeverityOptions.tsx b/ui/src/logs/components/SeverityOptions.tsx
index faf1c1625..73b19f1e5 100644
--- a/ui/src/logs/components/SeverityOptions.tsx
+++ b/ui/src/logs/components/SeverityOptions.tsx
@@ -1,5 +1,4 @@
 import React, {FunctionComponent} from 'react'
-import uuid from 'uuid'
 import ColorDropdown from 'src/logs/components/ColorDropdown'
 import SeverityColumnFormat from 'src/logs/components/SeverityColumnFormat'
 
@@ -25,10 +24,10 @@ const SeverityConfig: FunctionComponent<Props> = ({
   <>
     <label className="form-label">Severity Colors</label>
     <div className="logs-options--color-list">
-      {severityLevelColors.map(lc => {
+      {severityLevelColors.map((lc, i) => {
         const color = {name: lc.color, hex: SeverityColorValues[lc.color]}
         return (
-          <div key={uuid.v4()} className="logs-options--color-row">
+          <div key={i} className="logs-options--color-row">
             <div className="logs-options--color-column">
               <div className="logs-options--color-label">{lc.level}</div>
             </div>
diff --git a/ui/src/shared/components/DygraphLegend.tsx b/ui/src/shared/components/DygraphLegend.tsx
index 216108f94..115acdd17 100644
--- a/ui/src/shared/components/DygraphLegend.tsx
+++ b/ui/src/shared/components/DygraphLegend.tsx
@@ -3,7 +3,6 @@ import React, {PureComponent, ChangeEvent} from 'react'
 import {connect} from 'react-redux'
 import _ from 'lodash'
 import classnames from 'classnames'
-import uuid from 'uuid'
 
 // Components
 import DygraphLegendSort from 'src/shared/components/DygraphLegendSort'
@@ -139,12 +138,12 @@ class DygraphLegend extends PureComponent<Props, State> {
           />
         )}
         <div className="dygraph-legend--contents">
-          {this.filtered.map(({label, color, yHTML, isHighlighted}) => {
+          {this.filtered.map(({label, color, yHTML, isHighlighted}, i) => {
             const seriesClass = isHighlighted
               ? 'dygraph-legend--row highlight'
               : 'dygraph-legend--row'
             return (
-              <div key={uuid.v4()} className={seriesClass}>
+              <div key={i} className={seriesClass}>
                 <span style={{color}}>{label}</span>
                 <figure>{yHTML || 'no value'}</figure>
               </div>
diff --git a/ui/src/shared/components/SourceIndicator.tsx b/ui/src/shared/components/SourceIndicator.tsx
index 0020885fa..7eb36e57e 100644
--- a/ui/src/shared/components/SourceIndicator.tsx
+++ b/ui/src/shared/components/SourceIndicator.tsx
@@ -1,6 +1,5 @@
 import React, {FunctionComponent} from 'react'
 import _ from 'lodash'
-import uuid from 'uuid'
 
 import ReactTooltip from 'react-tooltip'
 import {SourceContext} from 'src/CheckSources'
@@ -19,19 +18,17 @@ const getTooltipText = (source: Source, sourceOverride: Source): string => {
 }
 
 const SourceIndicator: FunctionComponent<Props> = ({sourceOverride}) => {
-  const uuidTooltip: string = uuid.v4()
-
   return (
     <SourceContext.Consumer>
       {(source: Source) => (
         <div
           className="source-indicator"
-          data-for={uuidTooltip}
+          data-for="source-indicator"
           data-tip={getTooltipText(source, sourceOverride)}
         >
           <span className="icon disks" />
           <ReactTooltip
-            id={uuidTooltip}
+            id="source-indicator"
             effect="solid"
             html={true}
             place="left"
diff --git a/ui/src/shared/components/SubSections.tsx b/ui/src/shared/components/SubSections.tsx
index 5cc1eed40..344f629f8 100644
--- a/ui/src/shared/components/SubSections.tsx
+++ b/ui/src/shared/components/SubSections.tsx
@@ -1,5 +1,4 @@
 import React, {Component, ReactNode} from 'react'
-import uuid from 'uuid'
 import {withRouter, WithRouterProps} from 'react-router'
 
 import SubSectionsTab from 'src/shared/components/SubSectionsTab'
@@ -51,10 +50,10 @@ class SubSections extends Component<Props> {
         <div className={classes.nav} data-test="subsectionNav">
           <div className={classes.tabs}>
             {sections.map(
-              section =>
+              (section, i) =>
                 section.enabled && (
                   <SubSectionsTab
-                    key={uuid.v4()}
+                    key={i}
                     section={section}
                     handleClick={this.handleTabClick(section.url)}
                     activeSection={activeSection}
diff --git a/ui/src/shared/components/Tags.tsx b/ui/src/shared/components/Tags.tsx
index 5a0694d38..62f8cbafb 100644
--- a/ui/src/shared/components/Tags.tsx
+++ b/ui/src/shared/components/Tags.tsx
@@ -1,7 +1,6 @@
 import React, {PureComponent, FunctionComponent} from 'react'
 import TagsAddButton from 'src/shared/components/TagsAddButton'
 import ConfirmButton from 'src/shared/components/ConfirmButton'
-import uuid from 'uuid'
 import {ErrorHandling} from 'src/shared/decorators/errors'
 
 interface Item {
@@ -26,10 +25,10 @@ const Tags: FunctionComponent<TagsProps> = ({
 }) => {
   return (
     <div className="input-tag-list">
-      {tags.map(item => {
+      {tags.map((item, i) => {
         return (
           <Tag
-            key={uuid.v4()}
+            key={i}
             item={item}
             onDelete={onDeleteTag}
             confirmText={confirmText}
@@ -58,7 +57,7 @@ class Tag extends PureComponent<TagProps> {
   public render() {
     const {item, confirmText} = this.props
     return (
-      <span key={uuid.v4()} className="input-tag--item">
+      <span className="input-tag--item">
         <span>{item.text || item.name || item}</span>
         <ConfirmButton
           icon="remove"
diff --git a/ui/src/shared/components/TagsAddButton.tsx b/ui/src/shared/components/TagsAddButton.tsx
index 1a0ab07e9..861d057fc 100644
--- a/ui/src/shared/components/TagsAddButton.tsx
+++ b/ui/src/shared/components/TagsAddButton.tsx
@@ -1,5 +1,4 @@
 import React, {PureComponent} from 'react'
-import uuid from 'uuid'
 
 import {ClickOutside} from 'src/shared/components/ClickOutside'
 import {ErrorHandling} from 'src/shared/decorators/errors'
@@ -36,9 +35,9 @@ class TagsAddButton extends PureComponent<Props, State> {
         <div className={classname} onClick={this.handleButtonClick}>
           <span className="icon plus" />
           <div className="tags-add--menu">
-            {items.map(item => (
+            {items.map((item, i) => (
               <div
-                key={uuid.v4()}
+                key={i}
                 className="tags-add--menu-item"
                 onClick={this.handleMenuClick(item)}
               >
diff --git a/ui/src/shared/components/ThresholdsList.tsx b/ui/src/shared/components/ThresholdsList.tsx
index 7c0ad57ff..212b771e0 100644
--- a/ui/src/shared/components/ThresholdsList.tsx
+++ b/ui/src/shared/components/ThresholdsList.tsx
@@ -60,9 +60,9 @@ class ThresholdsList extends PureComponent<Props> {
         >
           <span className="icon plus" /> Add Threshold
         </button>
-        {this.sortedColors.map(color =>
+        {this.sortedColors.map((color, i) =>
           color.id === THRESHOLD_TYPE_BASE ? (
-            <div className="threshold-item" key={uuid.v4()}>
+            <div className="threshold-item" key={i}>
               <div className="threshold-item--label">Base Color</div>
               <ColorDropdown
                 colors={THRESHOLD_COLORS}
@@ -75,7 +75,6 @@ class ThresholdsList extends PureComponent<Props> {
             <Threshold
               visualizationType="single-stat"
               threshold={color}
-              key={uuid.v4()}
               onChooseColor={this.handleChooseColor}
               onValidateColorValue={this.handleValidateColorValue}
               onUpdateColorValue={this.handleUpdateColorValue}
diff --git a/ui/src/shared/components/threesizer/DivisionMenu.tsx b/ui/src/shared/components/threesizer/DivisionMenu.tsx
index d57f71ad7..b0828a434 100644
--- a/ui/src/shared/components/threesizer/DivisionMenu.tsx
+++ b/ui/src/shared/components/threesizer/DivisionMenu.tsx
@@ -1,5 +1,4 @@
 import React, {PureComponent} from 'react'
-import uuid from 'uuid'
 import classnames from 'classnames'
 import {ClickOutside} from 'src/shared/components/ClickOutside'
 
@@ -71,9 +70,9 @@ class DivisionMenu extends PureComponent<Props, State> {
     const {menuItems} = this.props
     return (
       <ul className="dropdown-menu">
-        {menuItems.map(item => (
+        {menuItems.map((item, i) => (
           <li
-            key={uuid.v4()}
+            key={i}
             className="dropdown-item"
             onClick={this.handleMenuItemClick(item.action)}
           >
diff --git a/ui/src/tempVars/components/TemplatePreviewList.tsx b/ui/src/tempVars/components/TemplatePreviewList.tsx
index 52b5352c6..9947f11bf 100644
--- a/ui/src/tempVars/components/TemplatePreviewList.tsx
+++ b/ui/src/tempVars/components/TemplatePreviewList.tsx
@@ -1,5 +1,4 @@
 import React, {PureComponent} from 'react'
-import uuid from 'uuid'
 
 import {ErrorHandling} from 'src/shared/decorators/errors'
 import FancyScrollbar from 'src/shared/components/FancyScrollbar'
@@ -27,9 +26,9 @@ class TemplatePreviewList extends PureComponent<Props> {
           autoHeight={true}
           maxHeight={this.resultsListHeight}
         >
-          {items.map(item => (
+          {items.map((item, i) => (
             <TemplatePreviewListItem
-              key={uuid.v4()}
+              key={i}
               onClick={onUpdateDefaultTemplateValue}
               item={item}
             />