fix: missing key on welcome page

superset-frontend/src/views/CRUD/welcome/ActivityTable.tsx

@@ -17,31 +17,16 @@
  * under the License.
  */
 import React from 'react';
-import moment from 'moment';
+
 import { styled, t } from '@superset-ui/core';
 
 import Loading from 'src/components/Loading';
-import ListViewCard from 'src/components/ListViewCard';
 import SubMenu from 'src/components/Menu/SubMenu';
+import { mq } from 'src/views/CRUD/utils';
+import ActivityTableRow from './ActivityTableRow';
 import { ActivityData } from './Welcome';
-import { mq, CardStyles } from '../utils';
 import EmptyState from './EmptyState';
 
-interface ActivityObjects {
-  action?: string;
-  item_title?: string;
-  slice_name: string;
-  time: string;
-  changed_on_utc: string;
-  url: string;
-  sql: string;
-  dashboard_title: string;
-  label: string;
-  id: string;
-  table: object;
-  item_url: string;
-}
-
 interface ActivityProps {
   user: {
     userId: string | number;
@@ -85,25 +70,6 @@ export default function ActivityTable({
   setActiveChild,
   activityData,
 }: ActivityProps) {
-  const getFilterTitle = (e: ActivityObjects) => {
-    if (e.dashboard_title) return e.dashboard_title;
-    if (e.label) return e.label;
-    if (e.url && !e.table) return e.item_title;
-    if (e.item_title) return e.item_title;
-    return e.slice_name;
-  };
-
-  const getIconName = (e: ActivityObjects) => {
-    if (e.sql) return 'sql';
-    if (e.url?.includes('dashboard') || e.item_url?.includes('dashboard')) {
-      return 'nav-dashboard';
-    }
-    if (e.url?.includes('explore') || e.item_url?.includes('explore')) {
-      return 'nav-charts';
-    }
-    return '';
-  };
-
   const tabs = [
     {
       name: 'Edited',
@@ -139,35 +105,6 @@ export default function ActivityTable({
     });
   }
 
-  const renderActivity = () => {
-    const getRecentRef = (e: ActivityObjects) => {
-      if (activeChild === 'Viewed') {
-        return e.item_url;
-      }
-      return e.sql ? `/superset/sqllab?savedQueryId=${e.id}` : e.url;
-    };
-    return activityData[activeChild].map((e: ActivityObjects) => (
-      <CardStyles
-        onClick={() => {
-          window.location.href = getRecentRef(e);
-        }}
-        key={e.id}
-      >
-        <ListViewCard
-          loading={loading}
-          cover={<></>}
-          url={e.sql ? `/superset/sqllab?savedQueryId=${e.id}` : e.url}
-          title={getFilterTitle(e)}
-          description={`Last Edited: ${moment(
-            e.changed_on_utc,
-            'MM/DD/YYYY HH:mm:ss',
-          )}`}
-          avatar={getIconName(e)}
-          actions={null}
-        />
-      </CardStyles>
-    ));
-  };
   if (loading) return <Loading position="inline" />;
   return (
     <>
@@ -178,7 +115,13 @@ export default function ActivityTable({
       />
       <>
         {activityData[activeChild]?.length > 0 ? (
-          <ActivityContainer>{renderActivity()}</ActivityContainer>
+          <ActivityContainer>
+            <ActivityTableRow
+              activityList={activityData[activeChild]}
+              activeChild={activeChild}
+              loading={loading}
+            />
+          </ActivityContainer>
         ) : (
           <EmptyState tableName="RECENTS" tab={activeChild} />
         )}

superset-frontend/src/views/CRUD/welcome/ActivityTableRow.tsx

@@ -0,0 +1,111 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you 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.
+ */
+import React from 'react';
+import moment from 'moment';
+import ListViewCard from 'src/components/ListViewCard';
+import { CardStyles } from '../utils';
+
+interface ActivityObjects {
+  action?: string;
+  item_title?: string;
+  slice_name: string;
+  time: string;
+  changed_on_utc: string;
+  url: string;
+  sql: string;
+  dashboard_title: string;
+  label: string;
+  id: string;
+  table: object;
+  item_url: string;
+}
+
+interface ActivityProps {
+  activeChild: string;
+  loading: boolean;
+  activityList: ActivityObjects[];
+}
+
+const getRecentRef = (activeChild: string, activity: ActivityObjects) => {
+  if (activeChild === 'Viewed') {
+    return activity.item_url;
+  }
+  return activity.sql
+    ? `/superset/sqllab?savedQueryId=${activity.id}`
+    : activity.url;
+};
+const getFilterTitle = (activity: ActivityObjects) => {
+  if (activity.dashboard_title) return activity.dashboard_title;
+  if (activity.label) return activity.label;
+  if (activity.url && !activity.table) return activity.item_title;
+  if (activity.item_title) return activity.item_title;
+  return activity.slice_name;
+};
+
+const getIconName = (activity: ActivityObjects) => {
+  if (activity.sql) return 'sql';
+  if (
+    activity.url?.includes('dashboard') ||
+    activity.item_url?.includes('dashboard')
+  ) {
+    return 'nav-dashboard';
+  }
+  if (
+    activity.url?.includes('explore') ||
+    activity.item_url?.includes('explore')
+  ) {
+    return 'nav-charts';
+  }
+  return '';
+};
+
+const ActivityTableRow: React.FC<ActivityProps> = ({
+  loading,
+  activeChild,
+  activityList,
+}) => (
+  <>
+    {activityList.map(activity => (
+      <CardStyles
+        key={`${activity.dashboard_title}__${activity.time}__${activity.id}`}
+        onClick={() => {
+          window.location.href = getRecentRef(activeChild, activity);
+        }}
+      >
+        <ListViewCard
+          loading={loading}
+          cover={<></>}
+          url={
+            activity.sql
+              ? `/superset/sqllab?savedQueryId=${activity.id}`
+              : activity.url
+          }
+          title={getFilterTitle(activity)}
+          description={`Last Edited: ${moment(
+            activity.changed_on_utc,
+            'MM/DD/YYYY HH:mm:ss',
+          )}`}
+          avatar={getIconName(activity)}
+          actions={null}
+        />
+      </CardStyles>
+    ))}
+  </>
+);
+export default ActivityTableRow;