ui: add bluesky and mastodon

* ref: cern-sis/issues-inspire#619
miguelgrc · Dec 2, 2024 · 22e80cf · 22e80cf
1 parent 46c5c6b
commit 22e80cf
Show file tree

Hide file tree

Showing 66 changed files with 420 additions and 195 deletions.
diff --git a/backend/poetry.lock b/backend/poetry.lock
diff --git a/backend/pyproject.toml b/backend/pyproject.toml
@@ -21,7 +21,7 @@ Flask = ">=1.0.2"
 msgpack = "==0.6.2"
 
 python = ">=3.11,<3.12"
-inspire-schemas = "^61.5.32"
+inspire-schemas = "^61.6.0"
 inspire-utils = "^3.0.61"
 inspire-service-orcid = {git = "https://github.com/inspirehep/inspire-service-orcid.git", rev = "1a0e762e58bc9cac65f7665b9831993c017fd8bb"}
 inspire-json-merger = "^11.0.37"

diff --git a/ui/package.json b/ui/package.json
@@ -22,7 +22,7 @@
     "lint": "./node_modules/eslint/bin/eslint.js ./src --ext \"**/*.{js,jsx,ts,tsx}\" --config .eslintrc"
   },
   "dependencies": {
-    "@ant-design/icons": "^4.0.0",
+    "@ant-design/icons": "^5.5.1",
     "@babel/runtime": "7.0.0-beta.55",
     "@craco/craco": "6.4.3",
     "@sentry/browser": "^5.0.0",

diff --git a/ui/src/authors/components/AssignDrawer/__tests__/__snapshots__/AssignDrawer.test.jsx.snap b/ui/src/authors/components/AssignDrawer/__tests__/__snapshots__/AssignDrawer.test.jsx.snap
@@ -45,7 +45,7 @@ exports[`AssignDrawer renders assign authors search 1`] = `
       <Button
         data-test-id="assign-button"
         disabled={true}
-        icon={<ForwardRef(SelectOutlined) />}
+        icon={<SelectOutlined />}
         onClick={[Function]}
         type="primary"
       >

diff --git a/ui/src/authors/components/AuthorBlueskyAction.tsx b/ui/src/authors/components/AuthorBlueskyAction.tsx
@@ -0,0 +1,29 @@
+import React from 'react';
+import { Tooltip } from 'antd';
+
+import Icon from '@ant-design/icons';
+import UserAction from '../../common/components/UserAction';
+import LinkWithTargetBlank from '../../common/components/LinkWithTargetBlank';
+import EventTracker from '../../common/components/EventTracker';
+import { ReactComponent as blueskyLogo } from '../../common/assets/bluesky.svg';
+
+const AuthorBlueskyAction = ({ bluesky }: { bluesky: string }) => {
+  const href = `//bsky.app/profile/${bluesky}`;
+  return (
+    <UserAction>
+      <EventTracker
+        eventCategory="Author detail"
+        eventAction="Link"
+        eventId="Bluesky"
+      >
+        <LinkWithTargetBlank href={href}>
+          <Tooltip title="Bluesky">
+            <Icon component={blueskyLogo} style={{ color: 'rgb(95,95,95)' }} />
+          </Tooltip>
+        </LinkWithTargetBlank>
+      </EventTracker>
+    </UserAction>
+  );
+};
+
+export default AuthorBlueskyAction;
diff --git a/ui/src/authors/components/AuthorMastodonAction.tsx b/ui/src/authors/components/AuthorMastodonAction.tsx
@@ -0,0 +1,30 @@
+import React from 'react';
+import { Tooltip } from 'antd';
+
+import Icon from '@ant-design/icons';
+import UserAction from '../../common/components/UserAction';
+import LinkWithTargetBlank from '../../common/components/LinkWithTargetBlank';
+import EventTracker from '../../common/components/EventTracker';
+import { ReactComponent as mastodonLogo } from '../../common/assets/mastodon.svg';
+
+const AuthorMastodonAction = ({ mastodon }: { mastodon: string }) => {
+  const [user, host] = mastodon ? mastodon.split('@') : [];
+  const href = `//${host}/@${user}`;
+  return (
+    <UserAction>
+      <EventTracker
+        eventCategory="Author detail"
+        eventAction="Link"
+        eventId="Mastodon"
+      >
+        <LinkWithTargetBlank href={href}>
+          <Tooltip title="Mastodon">
+            <Icon component={mastodonLogo} />
+          </Tooltip>
+        </LinkWithTargetBlank>
+      </EventTracker>
+    </UserAction>
+  );
+};
+
+export default AuthorMastodonAction;
diff --git a/ui/src/authors/components/AuthorTwitterAction.tsx b/ui/src/authors/components/AuthorTwitterAction.tsx
@@ -1,26 +1,26 @@
 import React from 'react';
-import { TwitterOutlined } from '@ant-design/icons';
+import { XOutlined } from '@ant-design/icons';
 import { Tooltip } from 'antd';
 
 import UserAction from '../../common/components/UserAction';
 import LinkWithTargetBlank from '../../common/components/LinkWithTargetBlank';
 import EventTracker from '../../common/components/EventTracker';
 
 const AuthorTwitterAction = ({ twitter }: { twitter: string }) => {
-  const href = `//twitter.com/${twitter}`;
+  const href = `//x.com/${twitter}`;
   return (
     <UserAction>
-      <Tooltip title="Twitter">
-        <EventTracker
-          eventCategory="Author detail"
-          eventAction="Link"
-          eventId="Twitter"
-        >
-          <LinkWithTargetBlank href={href}>
-            <TwitterOutlined />
-          </LinkWithTargetBlank>
-        </EventTracker>
-      </Tooltip>
+      <EventTracker
+        eventCategory="Author detail"
+        eventAction="Link"
+        eventId="Twitter"
+      >
+        <LinkWithTargetBlank href={href}>
+          <Tooltip title="X / Twitter">
+            <XOutlined />
+          </Tooltip>
+        </LinkWithTargetBlank>
+      </EventTracker>
     </UserAction>
   );
 };

diff --git a/ui/src/authors/components/__tests__/__snapshots__/AssignAction.test.jsx.snap b/ui/src/authors/components/__tests__/__snapshots__/AssignAction.test.jsx.snap
@@ -70,7 +70,7 @@ exports[`AssignAction renders 1`] = `
           data-test-id="btn-claim"
         >
           <IconText
-            icon={<ForwardRef(FileDoneOutlined) />}
+            icon={<FileDoneOutlined />}
             text="claim"
           />
         </Button>
@@ -150,7 +150,7 @@ exports[`AssignAction renders disabled 1`] = `
           data-test-id="btn-claim"
         >
           <IconText
-            icon={<ForwardRef(FileDoneOutlined) />}
+            icon={<FileDoneOutlined />}
             text="claim"
           />
         </Button>
@@ -230,7 +230,7 @@ exports[`AssignAction renders plural form if numberOfSelected is more than 1 1`]
           data-test-id="btn-claim"
         >
           <IconText
-            icon={<ForwardRef(FileDoneOutlined) />}
+            icon={<FileDoneOutlined />}
             text="claim"
           />
         </Button>
@@ -310,7 +310,7 @@ exports[`AssignAction renders singular form if numberOfSelected is 1 1`] = `
           data-test-id="btn-claim"
         >
           <IconText
-            icon={<ForwardRef(FileDoneOutlined) />}
+            icon={<FileDoneOutlined />}
             text="claim"
           />
         </Button>

diff --git a/ui/src/authors/components/__tests__/__snapshots__/AssignDifferentProfileAction.test.jsx.snap b/ui/src/authors/components/__tests__/__snapshots__/AssignDifferentProfileAction.test.jsx.snap
@@ -26,7 +26,7 @@ exports[`AssignDifferentProfileAction renders 1`] = `
           data-test-id="claim-multiple"
         >
           <IconText
-            icon={<ForwardRef(FileDoneOutlined) />}
+            icon={<FileDoneOutlined />}
             text="claim"
           />
         </Button>
@@ -62,7 +62,7 @@ exports[`AssignDifferentProfileAction renders disabled 1`] = `
           data-test-id="claim-multiple"
         >
           <IconText
-            icon={<ForwardRef(FileDoneOutlined) />}
+            icon={<FileDoneOutlined />}
             text="claim"
           />
         </Button>
@@ -98,7 +98,7 @@ exports[`AssignDifferentProfileAction renders with claimingUnclaimedPapersDisabl
           data-test-id="claim-multiple"
         >
           <IconText
-            icon={<ForwardRef(FileDoneOutlined) />}
+            icon={<FileDoneOutlined />}
             text="claim"
           />
         </Button>

diff --git a/ui/src/authors/components/__tests__/__snapshots__/AssignNoProfileAction.test.jsx.snap b/ui/src/authors/components/__tests__/__snapshots__/AssignNoProfileAction.test.jsx.snap
@@ -24,7 +24,7 @@ exports[`AssignNoProfileAction renders 1`] = `
           disabled={true}
         >
           <IconText
-            icon={<ForwardRef(FileDoneOutlined) />}
+            icon={<FileDoneOutlined />}
             text="claim"
           />
         </Button>