From 3a6a2dd4a631f768e61bdb0ac8da51f43343849c Mon Sep 17 00:00:00 2001
From: sylenien <nikita@openreplay.com>
Date: Fri, 25 Nov 2022 17:59:49 +0100
Subject: [PATCH] refactor(ui/player): remove key and prop warnings

---
 frontend/app/components/Errors/List/List.js   | 19 +++++----
 .../components/Session/IOSPlayer/Crashes.js   |  3 +-
 .../app/components/Session/IOSPlayer/Logs.js  |  9 ++---
 .../Console/ConsoleRow/ConsoleRow.tsx         |  2 +-
 .../Session_/Exceptions/Exceptions.tsx        |  1 -
 .../components/Session_/GraphQL/GraphQL.js    |  1 -
 .../Session_/Network/NetworkContent.js        |  1 -
 .../DevTools/ConsolePanel/ConsolePanel.tsx    | 39 ++++++++++---------
 .../shared/DevTools/ConsoleRow/ConsoleRow.tsx |  4 +-
 .../DevTools/NetworkPanel/NetworkPanel.tsx    |  1 -
 .../StackEventPanel/StackEventPanel.tsx       |  1 -
 .../LiveSessionSearchField.tsx                |  3 +-
 12 files changed, 38 insertions(+), 46 deletions(-)

diff --git a/frontend/app/components/Errors/List/List.js b/frontend/app/components/Errors/List/List.js
index 9f379319a..8a22a1f2d 100644
--- a/frontend/app/components/Errors/List/List.js
+++ b/frontend/app/components/Errors/List/List.js
@@ -25,7 +25,7 @@ const sortOptions = Object.entries(sortOptionsMap)
 
 @connect(state => ({
 	loading: state.getIn([ "errors", "loading" ]),
-	resolveToggleLoading: state.getIn(["errors", "resolve", "loading"]) || 
+	resolveToggleLoading: state.getIn(["errors", "resolve", "loading"]) ||
 		state.getIn(["errors", "unresolve", "loading"]),
 	ignoreLoading: state.getIn([ "errors", "ignore", "loading" ]),
 	mergeLoading: state.getIn([ "errors", "merge", "loading" ]),
@@ -54,19 +54,19 @@ export default class List extends React.PureComponent {
 		}
 		this.debounceFetch = debounce(this.props.editOptions, 1000);
 	}
-	
+
 	componentDidMount() {
 		this.props.applyFilter({ });
 	}
 
 	check = ({ errorId }) => {
 		const { checkedIds } = this.state;
-		const newCheckedIds = checkedIds.contains(errorId) 
-			? checkedIds.remove(errorId) 
+		const newCheckedIds = checkedIds.contains(errorId)
+			? checkedIds.remove(errorId)
 			: checkedIds.add(errorId);
 		this.setState({
 			checkedAll: newCheckedIds.size === this.props.list.size,
-			checkedIds: newCheckedIds 
+			checkedIds: newCheckedIds
 		});
 	}
 
@@ -184,7 +184,7 @@ export default class List extends React.PureComponent {
 									onClick={ this.unresolve }
 									disabled={ someLoading || currentCheckedIds.size === 0}
 								/>
-						}	
+						}
 						{ status !== IGNORED &&
 							<IconButton
 								outline
@@ -196,10 +196,10 @@ export default class List extends React.PureComponent {
 								onClick={ this.ignore }
 								disabled={ someLoading || currentCheckedIds.size === 0}
 							/>
-						}							
+						}
 					</div>
 					<div className="flex items-center ml-6">
-						<span className="mr-2 color-gray-medium">Sort By</span>	          
+						<span className="mr-2 color-gray-medium">Sort By</span>
 						<Select
 							defaultValue={ `${sort}-${order}` }
 							name="sort"
@@ -212,7 +212,6 @@ export default class List extends React.PureComponent {
 							wrapperClassName="ml-3"
 							placeholder="Filter by name or message"
 							icon="search"
-							iconPosition="left"
 							name="filter"
 							onChange={ this.onQueryChange }
 							value={query}
@@ -258,4 +257,4 @@ export default class List extends React.PureComponent {
 			</div>
 		);
 	}
-}
\ No newline at end of file
+}
diff --git a/frontend/app/components/Session/IOSPlayer/Crashes.js b/frontend/app/components/Session/IOSPlayer/Crashes.js
index 015dece96..d3e89c2c8 100644
--- a/frontend/app/components/Session/IOSPlayer/Crashes.js
+++ b/frontend/app/components/Session/IOSPlayer/Crashes.js
@@ -13,7 +13,7 @@ function Crashes({ player }) {
 
 	const [ filter, setFilter ] = useState("");
 	const filterRE = getRE(filter, 'i');
-  const filtered = player.lists[CRASHES].listNow.filter(({ name, reason, stacktrace }) => 
+  const filtered = player.lists[CRASHES].listNow.filter(({ name, reason, stacktrace }) =>
   	filterRE.test(name) || filterRE.test(reason) || filterRE.test(stacktrace)
   );
 	return (
@@ -23,7 +23,6 @@ function Crashes({ player }) {
 	        className="input-small"
 	        placeholder="Filter"
 	        icon="search"
-	        iconPosition="left"
 	        name="filter"
 	        onChange={ setFilter }
 	      />
diff --git a/frontend/app/components/Session/IOSPlayer/Logs.js b/frontend/app/components/Session/IOSPlayer/Logs.js
index e9fe033d7..71da9b149 100644
--- a/frontend/app/components/Session/IOSPlayer/Logs.js
+++ b/frontend/app/components/Session/IOSPlayer/Logs.js
@@ -20,13 +20,13 @@ function Logs({ player }) {
 	const [ activeTab, setTab ] = useState(ALL);
 	const onInputChange = useCallback(({ target }) => setFilter(target.value));
 	const filterRE = getRE(filter, 'i');
-  const filtered = player.lists[LOGS].listNow.filter(({ severity, content }) => 
+  const filtered = player.lists[LOGS].listNow.filter(({ severity, content }) =>
   	(activeTab === ALL || activeTab === severity) && filterRE.test(content)
   );
 	return (
 		<>
 			<PanelLayout.Header>
-				<Tabs 
+				<Tabs
 	        tabs={ TABS }
 	        active={ activeTab }
 	        onClick={ setTab }
@@ -36,7 +36,6 @@ function Logs({ player }) {
 	        className="input-small"
 	        placeholder="Filter"
 	        icon="search"
-	        iconPosition="left"
 	        name="filter"
 	        onChange={ onInputChange }
 	      />
@@ -48,8 +47,8 @@ function Logs({ player }) {
 					title="No recordings found"
 	      >
 					<Autoscroll>
-						{	filtered.map(log => 
-							<Log text={log.content} level={log.severity}/>	
+						{	filtered.map(log =>
+							<Log text={log.content} level={log.severity}/>
 						)}
 					</Autoscroll>
 				</NoContent>
diff --git a/frontend/app/components/Session_/Console/ConsoleRow/ConsoleRow.tsx b/frontend/app/components/Session_/Console/ConsoleRow/ConsoleRow.tsx
index 85457d6b1..4c0096697 100644
--- a/frontend/app/components/Session_/Console/ConsoleRow/ConsoleRow.tsx
+++ b/frontend/app/components/Session_/Console/ConsoleRow/ConsoleRow.tsx
@@ -41,7 +41,7 @@ function ConsoleRow(props: Props) {
           )}
           <span>{renderWithNL(lines.pop())}</span>
         </div>
-        {canExpand && expanded && lines.map((l: any, i: number) => <div key={l.slice(0,3)+i} className="ml-4 mb-1">{l}</div>)}
+        {/* {canExpand && expanded && lines.map((l: any, i: number) => <div key={l.slice(0,3)+i} className="ml-4 mb-1">{l}</div>)} */}
       </div>
       <JumpButton onClick={() => jump(log.time)} />
     </div>
diff --git a/frontend/app/components/Session_/Exceptions/Exceptions.tsx b/frontend/app/components/Session_/Exceptions/Exceptions.tsx
index e263c9106..987d0f215 100644
--- a/frontend/app/components/Session_/Exceptions/Exceptions.tsx
+++ b/frontend/app/components/Session_/Exceptions/Exceptions.tsx
@@ -81,7 +81,6 @@ function Exceptions({ errorStack, sourcemapUploaded, loading }: IProps) {
               className="input-small"
               placeholder="Filter by name or message"
               icon="search"
-              iconPosition="left"
               name="filter"
               onChange={onFilterChange}
               height={28}
diff --git a/frontend/app/components/Session_/GraphQL/GraphQL.js b/frontend/app/components/Session_/GraphQL/GraphQL.js
index 8c601dba1..323e3c4d4 100644
--- a/frontend/app/components/Session_/GraphQL/GraphQL.js
+++ b/frontend/app/components/Session_/GraphQL/GraphQL.js
@@ -132,7 +132,6 @@ export default class GraphQL extends React.PureComponent {
                 // className="input-small"
                 placeholder="Filter by name or type"
                 icon="search"
-                iconPosition="left"
                 name="filter"
                 onChange={this.onFilterChange}
               />
diff --git a/frontend/app/components/Session_/Network/NetworkContent.js b/frontend/app/components/Session_/Network/NetworkContent.js
index 464b22f5e..2891a0597 100644
--- a/frontend/app/components/Session_/Network/NetworkContent.js
+++ b/frontend/app/components/Session_/Network/NetworkContent.js
@@ -230,7 +230,6 @@ export default class NetworkContent extends React.PureComponent {
               className="input-small"
               placeholder="Filter by name"
               icon="search"
-              iconPosition="left"
               name="filter"
               onChange={this.onFilterChange}
               height={28}
diff --git a/frontend/app/components/shared/DevTools/ConsolePanel/ConsolePanel.tsx b/frontend/app/components/shared/DevTools/ConsolePanel/ConsolePanel.tsx
index 44b9f3d00..32e143432 100644
--- a/frontend/app/components/shared/DevTools/ConsolePanel/ConsolePanel.tsx
+++ b/frontend/app/components/shared/DevTools/ConsolePanel/ConsolePanel.tsx
@@ -31,7 +31,7 @@ let throttledCall = () => 999
 
 function renderWithNL(s = '') {
   if (typeof s !== 'string') return '';
-  return s.split('\n').map((line, i) => <div className={cn({ 'ml-20': i !== 0 })}>{line}</div>);
+  return s.split('\n').map((line, i) => <div key={i + line.slice(0, 6)} className={cn({ 'ml-20': i !== 0 })}>{line}</div>);
 }
 
 const getIconProps = (level: any) => {
@@ -129,23 +129,25 @@ function ConsolePanel() {
     const item = filteredList[index];
 
     return (
-      // @ts-ignore
-      <CellMeasurer cache={cache} columnIndex={0} key={key} rowIndex={index} parent={parent}>
-        {({ measure }: any) => (
-          <ConsoleRow
-            style={style}
-            log={item}
-            jump={jump}
-            iconProps={getIconProps(item.level)}
-            renderWithNL={renderWithNL}
-            onClick={() => showDetails(item)}
-            recalcHeight={() => {
-              measure();
-              (_list as any).current.recomputeRowHeights(index);
-            }}
-          />
-        )}
-      </CellMeasurer>
+      <React.Fragment key={key}>
+        {/* @ts-ignore */}
+        <CellMeasurer cache={cache} columnIndex={0} key={key} rowIndex={index} parent={parent}>
+          {({ measure }: any) => (
+            <ConsoleRow
+              style={style}
+              log={item}
+              jump={jump}
+              iconProps={getIconProps(item.level)}
+              renderWithNL={renderWithNL}
+              onClick={() => showDetails(item)}
+              recalcHeight={() => {
+                measure();
+                (_list as any).current.recomputeRowHeights(index);
+              }}
+            />
+          )}
+        </CellMeasurer>
+      </React.Fragment>
     );
   };
 
@@ -205,7 +207,6 @@ function ConsolePanel() {
           className="input-small h-8"
           placeholder="Filter by keyword"
           icon="search"
-          iconPosition="left"
           name="filter"
           height={28}
           onChange={onFilterChange}
diff --git a/frontend/app/components/shared/DevTools/ConsoleRow/ConsoleRow.tsx b/frontend/app/components/shared/DevTools/ConsoleRow/ConsoleRow.tsx
index 777771de9..0aa9b801f 100644
--- a/frontend/app/components/shared/DevTools/ConsoleRow/ConsoleRow.tsx
+++ b/frontend/app/components/shared/DevTools/ConsoleRow/ConsoleRow.tsx
@@ -49,13 +49,13 @@ function ConsoleRow(props: Props) {
           )}
           <span>{renderWithNL(lines.pop())}</span>
         </div>
-        {canExpand &&
+        {/* {canExpand &&
           expanded &&
           lines.map((l: string, i: number) => (
             <div key={l.slice(0, 4) + i} className="ml-4 mb-1">
               {l}
             </div>
-          ))}
+          ))} */}
       </div>
       <JumpButton onClick={() => jump(log.time)} />
     </div>
diff --git a/frontend/app/components/shared/DevTools/NetworkPanel/NetworkPanel.tsx b/frontend/app/components/shared/DevTools/NetworkPanel/NetworkPanel.tsx
index 5301066cb..206ef1a6a 100644
--- a/frontend/app/components/shared/DevTools/NetworkPanel/NetworkPanel.tsx
+++ b/frontend/app/components/shared/DevTools/NetworkPanel/NetworkPanel.tsx
@@ -310,7 +310,6 @@ function NetworkPanel() {
             className="input-small"
             placeholder="Filter by name, type or value"
             icon="search"
-            iconPosition="left"
             name="filter"
             onChange={onFilterChange}
             height={28}
diff --git a/frontend/app/components/shared/DevTools/StackEventPanel/StackEventPanel.tsx b/frontend/app/components/shared/DevTools/StackEventPanel/StackEventPanel.tsx
index 557c72172..d1f3e9d16 100644
--- a/frontend/app/components/shared/DevTools/StackEventPanel/StackEventPanel.tsx
+++ b/frontend/app/components/shared/DevTools/StackEventPanel/StackEventPanel.tsx
@@ -149,7 +149,6 @@ function StackEventPanel(props: Props) {
           className="input-small h-8"
           placeholder="Filter by keyword"
           icon="search"
-          iconPosition="left"
           name="filter"
           height={28}
           onChange={onFilterChange}
diff --git a/frontend/app/components/shared/LiveSessionSearchField/LiveSessionSearchField.tsx b/frontend/app/components/shared/LiveSessionSearchField/LiveSessionSearchField.tsx
index f9ea8d51c..08dd17866 100644
--- a/frontend/app/components/shared/LiveSessionSearchField/LiveSessionSearchField.tsx
+++ b/frontend/app/components/shared/LiveSessionSearchField/LiveSessionSearchField.tsx
@@ -35,7 +35,6 @@ function LiveSessionSearchField(props: Props) {
         onBlur={ () => setTimeout(setShowModal, 200, false) }
         onChange={ onSearchChange }
         icon="search"
-        iconPosition="left"
         placeholder={ 'Find live sessions by user or metadata.'}
         fluid
         id="search"
@@ -56,4 +55,4 @@ function LiveSessionSearchField(props: Props) {
   );
 }
 
-export default connect(null, { fetchFilterSearch, editFilter, addFilterByKeyAndValue })(LiveSessionSearchField);
\ No newline at end of file
+export default connect(null, { fetchFilterSearch, editFilter, addFilterByKeyAndValue })(LiveSessionSearchField);