Add default avatar from website (#145)

* Add default avatar from website Fixes #134 * Add service avatar as AvatarPair * Fix test * Move to descriptive function
2023-05-10 05:22:19 -04:00
parent 8c192e04f8
commit 41896ae6c3
6 changed files with 520 additions and 120 deletions
--- a/.pnp.cjs
+++ b/.pnp.cjs
--- a/package.json
+++ b/package.json
@ -4,6 +4,8 @@
    "private": true,
    "dependencies": {
        "@craco/craco": "^7.0.0",
+        "@dicebear/avatars": "^4.10.8",
+        "@dicebear/avatars-bottts-sprites": "^4.10.8",
        "@kittycad/lib": "^0.0.19",
        "@octokit/openapi-types": "^17.0.0",
        "@octokit/rest": "^19.0.7",
--- a/src/components/settings/Settings.tsx
+++ b/src/components/settings/Settings.tsx
@ -12,6 +12,8 @@ import { KittycadUser, MessageIds, User } from '../../chrome/types'
 import { Loading } from '../Loading'
 import { TokenForm } from './TokenForm'
 import { UserCard } from './UserCard'
+import { createAvatar } from '@dicebear/avatars'
+import * as avatarStyles from '@dicebear/avatars-bottts-sprites'

 function BaseHelper({ children }: PropsWithChildren<{}>) {
    const { getDetailsProps, open } = useDetails({ closeOnOutsideClick: true })
@ -100,6 +102,14 @@ export function Settings() {
        await chrome.runtime.sendMessage({ id, data: { token } })
    }

+    function getDefaultKittycadAvatar(email: string): string {
+        // from https://github.com/KittyCAD/website/blob/0d891781865a72d9aff0ed72078d557b6f1dcf8e/components/HeaderAccountMenu.tsx#L34
+        return createAvatar(avatarStyles, {
+            seed: email || 'some-seed',
+            dataUri: true,
+        })
+    }
+
    useEffect(() => {
        ;(async () => {
            await fetchGithubUser()
@ -118,6 +128,7 @@ export function Settings() {
                                <UserCard
                                    login={'@' + githubUser.login}
                                    avatar={githubUser.avatar_url}
+                                    serviceAvatar="https://avatars.githubusercontent.com/github"
                                    onSignOut={async () => {
                                        await onToken(
                                            MessageIds.SaveGithubToken,
@ -147,8 +158,11 @@ export function Settings() {
                                    login={kittycadUser.email}
                                    avatar={
                                        kittycadUser.image ||
-                                        'https://kittycad.io/logo-green.png'
+                                        getDefaultKittycadAvatar(
+                                            kittycadUser.email
+                                        )
                                    }
+                                    serviceAvatar="https://avatars.githubusercontent.com/kittycad"
                                    onSignOut={async () => {
                                        await onToken(
                                            MessageIds.SaveKittycadToken,
--- a/src/components/settings/UserCard.test.tsx
+++ b/src/components/settings/UserCard.test.tsx
@ -6,9 +6,16 @@ it('renders a user card and checks its callback button', () => {
    const avatar = 'avatar'
    const callback = jest.fn()

-    render(<UserCard login={login} avatar={avatar} onSignOut={callback} />)
+    render(
+        <UserCard
+            login={login}
+            avatar={avatar}
+            serviceAvatar="https://avatars.githubusercontent.com/github"
+            onSignOut={callback}
+        />
+    )
    expect(screen.getByText(login)).toBeInTheDocument()
-    expect(screen.getByRole('img')).toBeInTheDocument()
+    expect(screen.getAllByRole('img')).toHaveLength(2)

    const button = screen.getByRole('button')
    expect(button).toBeEnabled()
--- a/src/components/settings/UserCard.tsx
+++ b/src/components/settings/UserCard.tsx
@ -1,18 +1,27 @@
-import { Avatar, Box, Button, Text } from '@primer/react'
+import { Avatar, AvatarPair, Box, Button, Text } from '@primer/react'

 export type UserCardProps = {
    login: string
    avatar: string
+    serviceAvatar: string
    onSignOut: () => void
 }

-export function UserCard({ login, avatar, onSignOut }: UserCardProps) {
+export function UserCard({
+    login,
+    avatar,
+    serviceAvatar,
+    onSignOut,
+}: UserCardProps) {
    return (
        <Box>
-            <Box display="flex" alignItems="center" mb={2}>
-                <Avatar src={avatar} size={32} />
-                <Box flexGrow={1} pl={2}>
-                    <Text color="fg.default" fontSize={20}>
+            <Box display="flex" alignItems="center" mb={3}>
+                <AvatarPair>
+                    <Avatar src={avatar} />
+                    <Avatar src={serviceAvatar} />
+                </AvatarPair>
+                <Box flexGrow={1} pl={3}>
+                    <Text color="fg.default" fontSize={20} fontWeight={500}>
                        {login}
                    </Text>
                </Box>
--- a/yarn.lock
+++ b/yarn.lock
@ -257,7 +257,14 @@ __metadata:
  languageName: node
  linkType: hard

-"@babel/helper-plugin-utils@npm:^7.0.0, @babel/helper-plugin-utils@npm:^7.10.4, @babel/helper-plugin-utils@npm:^7.12.13, @babel/helper-plugin-utils@npm:^7.14.5, @babel/helper-plugin-utils@npm:^7.16.7, @babel/helper-plugin-utils@npm:^7.18.6, @babel/helper-plugin-utils@npm:^7.18.9, @babel/helper-plugin-utils@npm:^7.19.0, @babel/helper-plugin-utils@npm:^7.20.2, @babel/helper-plugin-utils@npm:^7.21.5, @babel/helper-plugin-utils@npm:^7.8.0, @babel/helper-plugin-utils@npm:^7.8.3":
+"@babel/helper-plugin-utils@npm:^7.0.0, @babel/helper-plugin-utils@npm:^7.10.4, @babel/helper-plugin-utils@npm:^7.12.13, @babel/helper-plugin-utils@npm:^7.14.5, @babel/helper-plugin-utils@npm:^7.16.7, @babel/helper-plugin-utils@npm:^7.18.6, @babel/helper-plugin-utils@npm:^7.18.9, @babel/helper-plugin-utils@npm:^7.19.0, @babel/helper-plugin-utils@npm:^7.20.2, @babel/helper-plugin-utils@npm:^7.8.0, @babel/helper-plugin-utils@npm:^7.8.3":
+  version: 7.20.2
+  resolution: "@babel/helper-plugin-utils@npm:7.20.2"
+  checksum: f6cae53b7fdb1bf3abd50fa61b10b4470985b400cc794d92635da1e7077bb19729f626adc0741b69403d9b6e411cddddb9c0157a709cc7c4eeb41e663be5d74b
+  languageName: node
+  linkType: hard
+
+"@babel/helper-plugin-utils@npm:^7.21.5":
  version: 7.21.5
  resolution: "@babel/helper-plugin-utils@npm:7.21.5"
  checksum: 6f086e9a84a50ea7df0d5639c8f9f68505af510ea3258b3c8ac8b175efdfb7f664436cb48996f71791a1350ba68f47ad3424131e8e718c5e2ad45564484cbb36
@ -1462,7 +1469,16 @@ __metadata:
  languageName: node
  linkType: hard

-"@babel/runtime@npm:^7.11.2, @babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.16.3, @babel/runtime@npm:^7.16.7, @babel/runtime@npm:^7.17.8, @babel/runtime@npm:^7.20.7, @babel/runtime@npm:^7.21.0, @babel/runtime@npm:^7.7.6, @babel/runtime@npm:^7.8.4, @babel/runtime@npm:^7.9.2":
+"@babel/runtime@npm:^7.11.2, @babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.16.3, @babel/runtime@npm:^7.16.7, @babel/runtime@npm:^7.17.8, @babel/runtime@npm:^7.20.7, @babel/runtime@npm:^7.7.6, @babel/runtime@npm:^7.8.4, @babel/runtime@npm:^7.9.2":
+  version: 7.21.0
+  resolution: "@babel/runtime@npm:7.21.0"
+  dependencies:
+    regenerator-runtime: ^0.13.11
+  checksum: 7b33e25bfa9e0e1b9e8828bb61b2d32bdd46b41b07ba7cb43319ad08efc6fda8eb89445193e67d6541814627df0ca59122c0ea795e412b99c5183a0540d338ab
+  languageName: node
+  linkType: hard
+
+"@babel/runtime@npm:^7.21.0":
  version: 7.21.5
  resolution: "@babel/runtime@npm:7.21.5"
  dependencies:
@ -1754,6 +1770,26 @@ __metadata:
  languageName: node
  linkType: hard

+"@dicebear/avatars-bottts-sprites@npm:^4.10.8":
+  version: 4.10.8
+  resolution: "@dicebear/avatars-bottts-sprites@npm:4.10.8"
+  peerDependencies:
+    "@dicebear/avatars": ^4.6.0
+  checksum: c16ee6def54546bcabe4aac1c78228b1908a2b4890bf13f3dca3018b0dcbe3b7bf6b280e12cedb912d6c0d65f430a81cb78d2c45e39d4ef9749ff616bc7a1766
+  languageName: node
+  linkType: hard
+
+"@dicebear/avatars@npm:^4.10.8":
+  version: 4.10.8
+  resolution: "@dicebear/avatars@npm:4.10.8"
+  dependencies:
+    "@types/json-schema": ^7.0.7
+    pure-color: ^1.3.0
+    svgson: ^5.2.1
+  checksum: 7174ecdce7520b85a8f7065b800719f5ba880ec1711c1af2a896cebc9618b35172e423c402b2f86c30b728da0f92c75dc0e7193c520856c9054f61ee9b60471b
+  languageName: node
+  linkType: hard
+
 "@emotion/is-prop-valid@npm:^1.1.0":
  version: 1.2.0
  resolution: "@emotion/is-prop-valid@npm:1.2.0"
@ -3487,7 +3523,7 @@ __metadata:
  languageName: node
  linkType: hard

-"@types/json-schema@npm:*, @types/json-schema@npm:^7.0.4, @types/json-schema@npm:^7.0.5, @types/json-schema@npm:^7.0.8, @types/json-schema@npm:^7.0.9":
+"@types/json-schema@npm:*, @types/json-schema@npm:^7.0.4, @types/json-schema@npm:^7.0.5, @types/json-schema@npm:^7.0.7, @types/json-schema@npm:^7.0.8, @types/json-schema@npm:^7.0.9":
  version: 7.0.11
  resolution: "@types/json-schema@npm:7.0.11"
  checksum: 527bddfe62db9012fccd7627794bd4c71beb77601861055d87e3ee464f2217c85fca7a4b56ae677478367bbd248dbde13553312b7d4dbc702a2f2bbf60c4018d
@ -6014,6 +6050,16 @@ __metadata:
  languageName: node
  linkType: hard

+"deep-rename-keys@npm:^0.2.1":
+  version: 0.2.1
+  resolution: "deep-rename-keys@npm:0.2.1"
+  dependencies:
+    kind-of: ^3.0.2
+    rename-keys: ^1.1.2
+  checksum: 34c838a7ee375e9579be2ba1de59a5ec5aef46bee96bb08cffdd8b6b3887d941bbfce0caccf3ecd7c5a74e6f3a70c7df0b469e732a97e5849a5149ddc1e2a062
+  languageName: node
+  linkType: hard
+
 "deepmerge@npm:^4.2.2":
  version: 4.3.1
  resolution: "deepmerge@npm:4.3.1"
@ -6152,6 +6198,8 @@ __metadata:
  dependencies:
    "@babel/runtime": ^7.21.0
    "@craco/craco": ^7.0.0
+    "@dicebear/avatars": ^4.10.8
+    "@dicebear/avatars-bottts-sprites": ^4.10.8
    "@kittycad/lib": ^0.0.19
    "@octokit/openapi-types": ^17.0.0
    "@octokit/rest": ^19.0.7
@ -7025,6 +7073,13 @@ __metadata:
  languageName: node
  linkType: hard

+"eventemitter3@npm:^2.0.0":
+  version: 2.0.3
+  resolution: "eventemitter3@npm:2.0.3"
+  checksum: dfbf4a07144afea0712d8e6a7f30ae91beb7c12c36c3d480818488aafa437d9a331327461f82c12dfd60a4fbad502efc97f684089cda02809988b84a23630752
+  languageName: node
+  linkType: hard
+
 "eventemitter3@npm:^4.0.0":
  version: 4.0.7
  resolution: "eventemitter3@npm:4.0.7"
@ -7572,6 +7627,13 @@ __metadata:
  languageName: node
  linkType: hard

+"get-value@npm:^2.0.3":
+  version: 2.0.6
+  resolution: "get-value@npm:2.0.6"
+  checksum: 5c3b99cb5398ea8016bf46ff17afc5d1d286874d2ad38ca5edb6e87d75c0965b0094cb9a9dddef2c59c23d250702323539a7fbdd870620db38c7e7d7ec87c1eb
+  languageName: node
+  linkType: hard
+
 "github-injection@npm:^1.1.0":
  version: 1.1.0
  resolution: "github-injection@npm:1.1.0"
@ -7817,6 +7879,24 @@ __metadata:
  languageName: node
  linkType: hard

+"has-value@npm:^0.3.1":
+  version: 0.3.1
+  resolution: "has-value@npm:0.3.1"
+  dependencies:
+    get-value: ^2.0.3
+    has-values: ^0.1.4
+    isobject: ^2.0.0
+  checksum: 29e2a1e6571dad83451b769c7ce032fce6009f65bccace07c2962d3ad4d5530b6743d8f3229e4ecf3ea8e905d23a752c5f7089100c1f3162039fa6dc3976558f
+  languageName: node
+  linkType: hard
+
+"has-values@npm:^0.1.4":
+  version: 0.1.4
+  resolution: "has-values@npm:0.1.4"
+  checksum: ab1c4bcaf811ccd1856c11cfe90e62fca9e2b026ebe474233a3d282d8d67e3b59ed85b622c7673bac3db198cb98bd1da2b39300a2f98e453729b115350af49bc
+  languageName: node
+  linkType: hard
+
 "has@npm:^1.0.3":
  version: 1.0.3
  resolution: "has@npm:1.0.3"
@ -8288,6 +8368,13 @@ __metadata:
  languageName: node
  linkType: hard

+"is-buffer@npm:^1.1.5":
+  version: 1.1.6
+  resolution: "is-buffer@npm:1.1.6"
+  checksum: 4a186d995d8bbf9153b4bd9ff9fd04ae75068fe695d29025d25e592d9488911eeece84eefbd8fa41b8ddcc0711058a71d4c466dcf6f1f6e1d83830052d8ca707
+  languageName: node
+  linkType: hard
+
 "is-callable@npm:^1.1.3, is-callable@npm:^1.1.4, is-callable@npm:^1.2.7":
  version: 1.2.7
  resolution: "is-callable@npm:1.2.7"
@ -8417,7 +8504,7 @@ __metadata:
  languageName: node
  linkType: hard

-"is-plain-object@npm:^2.0.4":
+"is-plain-object@npm:^2.0.1, is-plain-object@npm:^2.0.4":
  version: 2.0.4
  resolution: "is-plain-object@npm:2.0.4"
  dependencies:
@ -8560,6 +8647,13 @@ __metadata:
  languageName: node
  linkType: hard

+"isarray@npm:1.0.0, isarray@npm:~1.0.0":
+  version: 1.0.0
+  resolution: "isarray@npm:1.0.0"
+  checksum: f032df8e02dce8ec565cf2eb605ea939bdccea528dbcf565cdf92bfa2da9110461159d86a537388ef1acef8815a330642d7885b29010e8f7eac967c9993b65ab
+  languageName: node
+  linkType: hard
+
 "isarray@npm:^2.0.5":
  version: 2.0.5
  resolution: "isarray@npm:2.0.5"
@ -8567,13 +8661,6 @@ __metadata:
  languageName: node
  linkType: hard

-"isarray@npm:~1.0.0":
-  version: 1.0.0
-  resolution: "isarray@npm:1.0.0"
-  checksum: f032df8e02dce8ec565cf2eb605ea939bdccea528dbcf565cdf92bfa2da9110461159d86a537388ef1acef8815a330642d7885b29010e8f7eac967c9993b65ab
-  languageName: node
-  linkType: hard
-
 "isexe@npm:^2.0.0":
  version: 2.0.0
  resolution: "isexe@npm:2.0.0"
@ -8581,7 +8668,16 @@ __metadata:
  languageName: node
  linkType: hard

-"isobject@npm:^3.0.1":
+"isobject@npm:^2.0.0":
+  version: 2.1.0
+  resolution: "isobject@npm:2.1.0"
+  dependencies:
+    isarray: 1.0.0
+  checksum: 811c6f5a866877d31f0606a88af4a45f282544de886bf29f6a34c46616a1ae2ed17076cc6bf34c0128f33eecf7e1fcaa2c82cf3770560d3e26810894e96ae79f
+  languageName: node
+  linkType: hard
+
+"isobject@npm:^3.0.0, isobject@npm:^3.0.1":
  version: 3.0.1
  resolution: "isobject@npm:3.0.1"
  checksum: db85c4c970ce30693676487cca0e61da2ca34e8d4967c2e1309143ff910c207133a969f9e4ddb2dc6aba670aabce4e0e307146c310350b298e74a31f7d464703
@ -9498,6 +9594,15 @@ __metadata:
  languageName: node
  linkType: hard

+"kind-of@npm:^3.0.2":
+  version: 3.2.2
+  resolution: "kind-of@npm:3.2.2"
+  dependencies:
+    is-buffer: ^1.1.5
+  checksum: e898df8ca2f31038f27d24f0b8080da7be274f986bc6ed176f37c77c454d76627619e1681f6f9d2e8d2fd7557a18ecc419a6bb54e422abcbb8da8f1a75e4b386
+  languageName: node
+  linkType: hard
+
 "kind-of@npm:^6.0.2":
  version: 6.0.3
  resolution: "kind-of@npm:6.0.3"
@ -10459,6 +10564,16 @@ __metadata:
  languageName: node
  linkType: hard

+"omit-deep@npm:0.3.0":
+  version: 0.3.0
+  resolution: "omit-deep@npm:0.3.0"
+  dependencies:
+    is-plain-object: ^2.0.1
+    unset-value: ^0.1.1
+  checksum: ca603591af98f717ee4e4ae199778d386304f80072164fc1fb9c27abb011845faa27ffb32e7fa4a240698a4d54822526059af74f12f4f73315ecd7f03825d590
+  languageName: node
+  linkType: hard
+
 "on-finished@npm:2.4.1":
  version: 2.4.1
  resolution: "on-finished@npm:2.4.1"
@ -11795,6 +11910,13 @@ __metadata:
  languageName: node
  linkType: hard

+"pure-color@npm:^1.3.0":
+  version: 1.3.0
+  resolution: "pure-color@npm:1.3.0"
+  checksum: 646d8bed6e6eab89affdd5e2c11f607a85b631a7fb03c061dfa658eb4dc4806881a15feed2ac5fd8c0bad8c00c632c640d5b1cb8b9a972e6e947393a1329371b
+  languageName: node
+  linkType: hard
+
 "q@npm:^1.1.2":
  version: 1.5.1
  resolution: "q@npm:1.5.1"
@ -12234,6 +12356,13 @@ __metadata:
  languageName: node
  linkType: hard

+"rename-keys@npm:^1.1.2":
+  version: 1.2.0
+  resolution: "rename-keys@npm:1.2.0"
+  checksum: 9d8e5ca3d1ae3fe6c0d7319a3fd80ded6ca34651e85bff27604982dcc750aed28d1a621374224a9c9072083769f5eab1fd86d1d5a53f54f96c7705c18267227b
+  languageName: node
+  linkType: hard
+
 "renderkid@npm:^3.0.0":
  version: 3.0.0
  resolution: "renderkid@npm:3.0.0"
@ -13365,6 +13494,17 @@ __metadata:
  languageName: node
  linkType: hard

+"svgson@npm:^5.2.1":
+  version: 5.2.1
+  resolution: "svgson@npm:5.2.1"
+  dependencies:
+    deep-rename-keys: ^0.2.1
+    omit-deep: 0.3.0
+    xml-reader: 2.4.3
+  checksum: aa5d80d6240f5cac5ad72fe305350af9d925b5e854aa60c234110f60b69a33f03ea8b69915dc1a12c08c0b2eb332a22504b75f0889e0c4939d6c34562c1833e8
+  languageName: node
+  linkType: hard
+
 "symbol-tree@npm:^3.2.4":
  version: 3.2.4
  resolution: "symbol-tree@npm:3.2.4"
@ -13997,6 +14137,16 @@ __metadata:
  languageName: node
  linkType: hard

+"unset-value@npm:^0.1.1":
+  version: 0.1.2
+  resolution: "unset-value@npm:0.1.2"
+  dependencies:
+    has-value: ^0.3.1
+    isobject: ^3.0.0
+  checksum: 56c7de1ee6b726002cc67b82954ec31b795836c2312d4d3d114a500eab5f632e1d3d6f5a164aff1ed90d7ffa94a009c452f6357f1f7d23bc444d489f622aeb9d
+  languageName: node
+  linkType: hard
+
 "upath@npm:^1.2.0":
  version: 1.2.0
  resolution: "upath@npm:1.2.0"
@ -14769,6 +14919,15 @@ __metadata:
  languageName: node
  linkType: hard

+"xml-lexer@npm:^0.2.2":
+  version: 0.2.2
+  resolution: "xml-lexer@npm:0.2.2"
+  dependencies:
+    eventemitter3: ^2.0.0
+  checksum: ec9d3f8cbc61ed93b7fc1052d05b23cfe5bfe0064a1146f89bc3a9cfbb0c80c6c40d795cc253b745cdbba0607271d14fa57d496a7754fe350a06a8fceae23359
+  languageName: node
+  linkType: hard
+
 "xml-name-validator@npm:^3.0.0":
  version: 3.0.0
  resolution: "xml-name-validator@npm:3.0.0"
@ -14776,6 +14935,16 @@ __metadata:
  languageName: node
  linkType: hard

+"xml-reader@npm:2.4.3":
+  version: 2.4.3
+  resolution: "xml-reader@npm:2.4.3"
+  dependencies:
+    eventemitter3: ^2.0.0
+    xml-lexer: ^0.2.2
+  checksum: d4b4ca6eb2d61c17d2df2be73dd82a393ae88a4cd10c5152f9908bf3e3bafa5562ce4b63df31ef198bc9a7c8447d4c277c98622438da5b32abf55c2f15984bfa
+  languageName: node
+  linkType: hard
+
 "xmlchars@npm:^2.2.0":
  version: 2.2.0
  resolution: "xmlchars@npm:2.2.0"