refactor: replace AvatarIcon instances with FacePile

superset-frontend/package.json

@@ -125,7 +125,6 @@
     "re-resizable": "^6.6.1",
     "react": "^16.13.1",
     "react-ace": "^5.10.0",
-    "react-avatar": "^3.9.7",
     "react-bootstrap": "^0.33.1",
     "react-bootstrap-dialog": "^0.13.0",
     "react-bootstrap-slider": "2.1.5",

superset-frontend/src/components/FacePile/FacePile.stories.tsx

@@ -0,0 +1,60 @@
+/**
+ * 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 { withKnobs, number } from '@storybook/addon-knobs';
+import FacePile from '.';
+
+export default {
+  title: 'FacePile',
+  component: FacePile,
+  decorators: [withKnobs],
+};
+
+const firstNames = [
+  'James',
+  'Mary',
+  'John',
+  'Patricia',
+  'Mohamed',
+  'Venkat',
+  'Lao',
+  'Robert',
+  'Jennifer',
+  'Michael',
+  'Linda',
+];
+const lastNames = [
+  'Smith',
+  'Johnson',
+  'Williams',
+  'Saeed',
+  'Jones',
+  'Brown',
+  'Tzu',
+];
+
+const users = [...new Array(10)].map((_, i) => ({
+  first_name: firstNames[Math.floor(Math.random() * firstNames.length)],
+  last_name: lastNames[Math.floor(Math.random() * lastNames.length)],
+  id: i,
+}));
+
+export const SupersetFacePile = () => {
+  return <FacePile users={users} maxCount={number('maxCount', 4)} />;
+};

superset-frontend/src/components/FacePile/FacePile.test.tsx

@@ -0,0 +1,72 @@
+/**
+ * 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 { styledMount as mount } from 'spec/helpers/theming';
+
+import { Avatar } from 'src/common/components';
+import FacePile from '.';
+import { getRandomColor } from './utils';
+
+const users = [...new Array(10)].map((_, i) => ({
+  first_name: 'user',
+  last_name: `${i}`,
+  id: i,
+}));
+
+describe('FacePile', () => {
+  const wrapper = mount(<FacePile users={users} />);
+
+  it('is a valid element', () => {
+    expect(wrapper.find(FacePile)).toExist();
+  });
+
+  it('renders an Avatar', () => {
+    expect(wrapper.find(Avatar)).toExist();
+  });
+
+  it('hides overflow', () => {
+    expect(wrapper.find(Avatar).length).toBe(5);
+  });
+});
+
+describe('utils', () => {
+  describe('getRandomColor', () => {
+    const colors = ['color1', 'color2', 'color3'];
+
+    it('produces the same color for the same input values', () => {
+      const name = 'foo';
+      expect(getRandomColor(name, colors)).toEqual(
+        getRandomColor(name, colors),
+      );
+    });
+
+    it('produces a different color for different input values', () => {
+      expect(getRandomColor('foo', colors)).not.toEqual(
+        getRandomColor('bar', colors),
+      );
+    });
+
+    it('handles non-ascii input values', () => {
+      expect(getRandomColor('泰', colors)).toMatchInlineSnapshot(`"color1"`);
+      expect(getRandomColor('مُحَمَّد‎', colors)).toMatchInlineSnapshot(
+        `"color2"`,
+      );
+    });
+  });
+});

superset-frontend/src/components/FacePile/index.tsx

@@ -0,0 +1,72 @@
+/**
+ * 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 { getCategoricalSchemeRegistry, styled } from '@superset-ui/core';
+import { Avatar, Tooltip } from 'src/common/components';
+import { getRandomColor } from './utils';
+
+interface FacePileProps {
+  users: { first_name: string; last_name: string; id: number }[];
+  maxCount?: number;
+}
+
+const colorList = getCategoricalSchemeRegistry().get()?.colors ?? [];
+
+const StyledAvatar = styled(Avatar)`
+  width: ${({ theme }) => theme.gridUnit * 6}px;
+  height: ${({ theme }) => theme.gridUnit * 6}px;
+  line-height: ${({ theme }) => theme.gridUnit * 6}px;
+  font-size: ${({ theme }) => theme.typography.sizes.xl}px;
+`;
+
+// to apply styling to the maxCount avatar
+const StyledGroup = styled(Avatar.Group)`
+  .ant-avatar {
+    width: ${({ theme }) => theme.gridUnit * 6}px;
+    height: ${({ theme }) => theme.gridUnit * 6}px;
+    line-height: ${({ theme }) => theme.gridUnit * 6}px;
+    font-size: ${({ theme }) => theme.typography.sizes.xl}px;
+  }
+`;
+
+export default function FacePile({ users, maxCount = 4 }: FacePileProps) {
+  return (
+    <StyledGroup maxCount={maxCount}>
+      {users.map(({ first_name, last_name, id }) => {
+        const name = `${first_name} ${last_name}`;
+        const uniqueKey = `${id}-${first_name}-${last_name}`;
+        const color = getRandomColor(uniqueKey, colorList);
+        return (
+          <Tooltip key={name} title={name} placement="top">
+            <StyledAvatar
+              key={name}
+              style={{
+                backgroundColor: color,
+                borderColor: color,
+              }}
+            >
+              {first_name[0].toLocaleUpperCase()}
+              {last_name[0].toLocaleUpperCase()}
+            </StyledAvatar>
+          </Tooltip>
+        );
+      })}
+    </StyledGroup>
+  );
+}

superset-frontend/src/components/FacePile/utils.tsx

@@ -0,0 +1,49 @@
+/**
+ * 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.
+ */
+
+// https://en.wikipedia.org/wiki/Linear_congruential_generator
+function stringAsciiPRNG(value: string, m: number) {
+  // Xn+1 = (a * Xn + c) % m
+  // 0 < a < m
+  // 0 <= c < m
+  // 0 <= X0 < m
+
+  const charCodes = [...value].map(letter => letter.charCodeAt(0));
+  const len = charCodes.length;
+
+  const a = (len % (m - 1)) + 1;
+  const c = charCodes.reduce((current, next) => current + next) % m;
+
+  let random = charCodes[0] % m;
+
+  [...new Array(len)].forEach(() => {
+    random = (a * random + c) % m;
+  });
+
+  return random;
+}
+
+export function getRandomColor(sampleValue: string, colorList: string[]) {
+  // if no value is passed, always return transparent color for consistency
+  if (!sampleValue) return 'transparent';
+
+  // value based random color index,
+  // ensuring the same sampleValue always resolves to the same color
+  return colorList[stringAsciiPRNG(sampleValue, colorList.length)];
+}

superset-frontend/src/types/Owner.ts

@@ -23,7 +23,7 @@
 
 export default interface Owner {
   first_name: string;
-  id: string;
+  id: number;
   last_name: string;
   username: string;
 }

superset-frontend/src/views/CRUD/chart/ChartList.tsx

@@ -25,7 +25,7 @@ import { createFetchRelated, createErrorHandler } from 'src/views/CRUD/utils';
 import { useListViewResource, useFavoriteStatus } from 'src/views/CRUD/hooks';
 import ConfirmStatusChange from 'src/components/ConfirmStatusChange';
 import SubMenu, { SubMenuProps } from 'src/components/Menu/SubMenu';
-import AvatarIcon from 'src/components/AvatarIcon';
+import FacePile from 'src/components/FacePile';
 import Icon from 'src/components/Icon';
 import FaveStar from 'src/components/FaveStar';
 import ListView, {
@@ -477,16 +477,7 @@ function ChartList(props: ChartListProps) {
         imgFallbackURL="/static/assets/images/chart-card-fallback.png"
         imgPosition="bottom"
         description={t('Last modified %s', chart.changed_on_delta_humanized)}
-        coverLeft={(chart.owners || []).slice(0, 5).map(owner => (
-          <AvatarIcon
-            key={owner.id}
-            uniqueKey={`${owner.username}-${chart.id}`}
-            firstName={owner.first_name}
-            lastName={owner.last_name}
-            iconSize={24}
-            textSize={9}
-          />
-        ))}
+        coverLeft={<FacePile users={chart.owners || []} />}
         coverRight={
           <Label bsStyle="secondary">{chart.datasource_name_text}</Label>
         }