fix(fe/panel_files): key is not defined for file infos

src/client/web/src/components/layout/columns.tsx

@@ -7,6 +7,7 @@ export interface Props {
   childrenClassNames?: List<string>;
   style?: React.CSSProperties;
   className?: string;
+  colKey?: string;
 }
 
 export const Columns = (props: Props) => {
@@ -15,9 +16,10 @@ export const Columns = (props: Props) => {
       const cells = row.map((cell: React.ReactNode, j: number) => {
         const width = props.widths.get(j, Math.trunc(100 / row.size));
         const className = props.childrenClassNames.get(j, "");
+
         return (
           <div
-            key={`td-${i}-${j}`}
+            key={`${props.colKey}-${i}-${j}`}
             className={`float-l ${className}`}
             style={{ width }}
           >
@@ -27,7 +29,7 @@ export const Columns = (props: Props) => {
       });
 
       return (
-        <div key={`tr-${i}`}>
+        <div key={`${props.colKey}-${i}`}>
           {cells}
           <div className="fix"></div>
         </div>

src/client/web/src/components/pane_admin.tsx

@@ -213,6 +213,7 @@ export class UserForm extends React.Component<
     return (
       <div className="padding-t-m padding-b-m">
         <Columns
+          colKey={"paneAdmin"}
           rows={List([
             List([
               <div className="title-m-wrap">

src/client/web/src/components/panel_files.tsx

@@ -503,7 +503,8 @@ export class FilesPanel extends React.Component<Props, State, {}> {
         ? "hidden"
         : "";
 
-    const rows = sortedItems.map((item: MetadataResp): React.ReactNode => {
+    const rows = sortedItems.map(
+      (item: MetadataResp, i: number): React.ReactNode => {
         const isSelected = this.state.selectedItems.has(item.name);
         const dirPath = this.props.filesInfo.dirPath.join("/");
         const itemPath = dirPath.endsWith("/")
@@ -527,7 +528,10 @@ export class FilesPanel extends React.Component<Props, State, {}> {
         const downloadPath = `/v1/fs/files?fp=${itemPath}`;
         const name = item.isDir ? (
           <span className="title-m-wrap">
-          <span className="clickable" onClick={() => this.gotoChild(item.name)}>
+            <span
+              className="clickable"
+              onClick={() => this.gotoChild(item.name)}
+            >
               {item.name}
             </span>
             <span className="major-font">{` - ${modTimeFormatted}`}</span>
@@ -589,7 +593,9 @@ export class FilesPanel extends React.Component<Props, State, {}> {
             <div className="column">
               <div className="card">
                 <span className="title-m minor-font">{modTimeTitle}</span>
-              <span className="font-s work-break-all">{modTimeFormatted}</span>
+                <span className="font-s work-break-all">
+                  {modTimeFormatted}
+                </span>
               </div>
               <div className="card">
                 <span className="title-m minor-font">{sizeTitle}</span>
@@ -628,17 +634,19 @@ export class FilesPanel extends React.Component<Props, State, {}> {
             rows={List([cells])}
             widths={List(["3rem", "calc(100% - 18rem)", "8rem", "7rem"])}
             childrenClassNames={List(["", "", "", ""])}
+            colKey={`filesPanel-${i}`}
           />
         );
 
         return (
-        <div>
+          <div key={`filesPanel-row-${i}`}>
             {tableCols}
             {desc}
             <div className="hr"></div>
           </div>
         );
-    });
+      }
+    );
 
     return <div>{rows}</div>;
   };