feat: owners profile icon on dataset list view (#10041)

superset-frontend/package-lock.json

@@ -24659,6 +24659,23 @@
         "prop-types": "^15.5.8"
       }
     },
+    "react-avatar": {
+      "version": "3.9.7",
+      "resolved": "https://registry.npmjs.org/react-avatar/-/react-avatar-3.9.7.tgz",
+      "integrity": "sha512-UX1prYgo4gS1g2u16tZbx/Vy45M/BxyHHexIoRj6m9hI3ZR0FdHTDt66X5GpTtf6PRYE8KlvwHte1x5n8B0/XQ==",
+      "requires": {
+        "core-js": "^3.6.1",
+        "is-retina": "^1.0.3",
+        "md5": "^2.0.0"
+      },
+      "dependencies": {
+        "core-js": {
+          "version": "3.6.5",
+          "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.6.5.tgz",
+          "integrity": "sha512-vZVEEwZoIsI+vPEuoF9Iqf5H7/M3eeQqWlQnYa8FSKKePuYTf5MWnxb5SDAzCa60b3JBRS5g9b+Dq7b1y/RCrA=="
+        }
+      }
+    },
     "react-base16-styling": {
       "version": "0.5.3",
       "resolved": "https://registry.npmjs.org/react-base16-styling/-/react-base16-styling-0.5.3.tgz",

superset-frontend/package.json

@@ -140,6 +140,7 @@
     "re-resizable": "^4.3.1",
     "react": "^16.13.0",
     "react-ace": "^5.10.0",
+    "react-avatar": "^3.9.7",
     "react-bootstrap": "^0.33.1",
     "react-bootstrap-dialog": "^0.10.0",
     "react-bootstrap-slider": "2.1.5",

superset-frontend/src/components/AvatarIcon.tsx

@@ -0,0 +1,59 @@
+/**
+ * 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 styled from '@superset-ui/style';
+import { getCategoricalSchemeRegistry } from '@superset-ui/color';
+import { Tooltip, OverlayTrigger } from 'react-bootstrap';
+import Avatar, { ConfigProvider } from 'react-avatar';
+
+interface Props {
+  firstName: string;
+  iconSize: string;
+  lastName: string;
+  tableName: string;
+  userName: string;
+}
+
+const colorList = getCategoricalSchemeRegistry().get();
+
+const StyledAvatar = styled(Avatar)`
+  margin: 0px 5px;
+`;
+
+export default function AvatarIcon({
+  tableName,
+  firstName,
+  lastName,
+  userName,
+  iconSize,
+}: Props) {
+  const uniqueKey = `${tableName}-${userName}`;
+  const fullName = `${firstName} ${lastName}`;
+
+  return (
+    <ConfigProvider colors={colorList && colorList.colors}>
+      <OverlayTrigger
+        placement="right"
+        overlay={<Tooltip id={`${uniqueKey}-tooltip`}>{fullName}</Tooltip>}
+      >
+        <StyledAvatar key={uniqueKey} name={fullName} size={iconSize} round />
+      </OverlayTrigger>
+    </ConfigProvider>
+  );
+}

superset-frontend/src/views/datasetList/DatasetList.tsx

@@ -27,6 +27,7 @@ import { Panel } from 'react-bootstrap';
 import ConfirmStatusChange from 'src/components/ConfirmStatusChange';
 import ListView from 'src/components/ListView/ListView';
 import SubMenu from 'src/components/Menu/SubMenu';
+import AvatarIcon from 'src/components/AvatarIcon';
 import {
   FetchDataConfig,
   FilterOperatorMap,
@@ -36,6 +37,13 @@ import withToasts from 'src/messageToasts/enhancers/withToasts';
 
 const PAGE_SIZE = 25;
 
+type Owner = {
+  id: string;
+  first_name: string;
+  last_name: string;
+  username: string;
+};
+
 interface Props {
   addDangerToast: (msg: string) => void;
   addSuccessToast: (msg: string) => void;
@@ -54,13 +62,14 @@ interface State {
 }
 
 interface Dataset {
+  changed_by: string;
   changed_by_name: string;
   changed_by_url: string;
-  changed_by: string;
   changed_on: string;
   databse_name: string;
   explore_url: string;
   id: number;
+  owners: Array<Owner>;
   schema: string;
   table_name: string;
 }
@@ -182,8 +191,28 @@ class DatasetList extends React.PureComponent<Props, State> {
       hidden: true,
     },
     {
-      accessor: 'owners',
-      hidden: true,
+      Cell: ({
+        row: {
+          original: { owners, table_name: tableName },
+        },
+      }: any) => {
+        if (!owners) {
+          return null;
+        }
+        return owners
+          .slice(0, 5)
+          .map((owner: Owner) => (
+            <AvatarIcon
+              tableName={tableName}
+              firstName={owner.first_name}
+              lastName={owner.last_name}
+              userName={owner.username}
+              iconSize="20"
+            />
+          ));
+      },
+      Header: t('Owners'),
+      id: 'owners',
     },
     {
       accessor: 'is_sqllab_view',