Refactor unfurling related types (#6730)

* wip

* fix: refactor unfurl types

app/components/HoverPreview/HoverPreview.tsx

@@ -3,7 +3,7 @@ import * as React from "react";
 import { Portal } from "react-portal";
 import styled from "styled-components";
 import { depths } from "@shared/styles";
-import { UnfurlType } from "@shared/types";
+import { UnfurlResourceType } from "@shared/types";
 import LoadingIndicator from "~/components/LoadingIndicator";
 import env from "~/env";
 import useEventListener from "~/hooks/useEventListener";
@@ -120,41 +120,41 @@ function HoverPreviewDesktop({ element, onClose }: Props) {
                 transitionEnd: { pointerEvents: "auto" },
               }}
             >
-              {data.type === UnfurlType.Mention ? (
+              {data.type === UnfurlResourceType.Mention ? (
                 <HoverPreviewMention
-                  url={data.thumbnailUrl}
-                  title={data.title}
-                  info={data.meta.info}
-                  color={data.meta.color}
+                  name={data.name}
+                  avatarUrl={data.avatarUrl}
+                  color={data.color}
+                  lastActive={data.lastActive}
                 />
-              ) : data.type === UnfurlType.Document ? (
+              ) : data.type === UnfurlResourceType.Document ? (
                 <HoverPreviewDocument
-                  id={data.meta.id}
                   url={data.url}
+                  id={data.id}
                   title={data.title}
-                  description={data.description}
-                  info={data.meta.info}
+                  summary={data.summary}
+                  lastActivityByViewer={data.lastActivityByViewer}
                 />
-              ) : data.type === UnfurlType.Issue ? (
+              ) : data.type === UnfurlResourceType.Issue ? (
                 <HoverPreviewIssue
                   url={data.url}
+                  id={data.id}
                   title={data.title}
                   description={data.description}
                   author={data.author}
+                  labels={data.labels}
+                  state={data.state}
                   createdAt={data.createdAt}
-                  identifier={data.meta.identifier}
-                  labels={data.meta.labels}
-                  status={data.meta.status}
                 />
-              ) : data.type === UnfurlType.Pull ? (
+              ) : data.type === UnfurlResourceType.PR ? (
                 <HoverPreviewPullRequest
                   url={data.url}
+                  id={data.id}
                   title={data.title}
                   description={data.description}
                   author={data.author}
                   createdAt={data.createdAt}
-                  identifier={data.meta.identifier}
-                  status={data.meta.status}
+                  state={data.state}
                 />
               ) : (
                 <HoverPreviewLink

app/components/HoverPreview/HoverPreviewDocument.tsx

@@ -1,4 +1,5 @@
 import * as React from "react";
+import { UnfurlResourceType, UnfurlResponse } from "@shared/types";
 import Editor from "~/components/Editor";
 import Flex from "~/components/Flex";
 import {
@@ -10,21 +11,10 @@ import {
   Description,
 } from "./Components";
 
-type Props = {
-  /** Document id associated with the editor, if any */
-  id?: string;
-  /** Document url */
-  url: string;
-  /** Title for the preview card */
-  title: string;
-  /** Info about last activity on the document */
-  info: string;
-  /** Text preview of document content */
-  description: string;
-};
+type Props = Omit<UnfurlResponse[UnfurlResourceType.Document], "type">;
 
 const HoverPreviewDocument = React.forwardRef(function _HoverPreviewDocument(
-  { id, url, title, info, description }: Props,
+  { url, id, title, summary, lastActivityByViewer }: Props,
   ref: React.Ref<HTMLDivElement>
 ) {
   return (
@@ -33,12 +23,12 @@ const HoverPreviewDocument = React.forwardRef(function _HoverPreviewDocument(
         <CardContent>
           <Flex column gap={2}>
             <Title>{title}</Title>
-            <Info>{info}</Info>
+            <Info>{lastActivityByViewer}</Info>
             <Description as="div">
               <React.Suspense fallback={<div />}>
                 <Editor
                   key={id}
-                  defaultValue={description}
+                  defaultValue={summary}
                   embedsDisabled
                   readOnly
                 />

app/components/HoverPreview/HoverPreviewIssue.tsx

@@ -1,5 +1,6 @@
 import * as React from "react";
 import { Trans } from "react-i18next";
+import { UnfurlResourceType, UnfurlResponse } from "@shared/types";
 import Flex from "~/components/Flex";
 import Avatar from "../Avatar";
 import { IssueStatusIcon } from "../Icons/IssueStatusIcon";
@@ -15,36 +16,10 @@ import {
   Info,
 } from "./Components";
 
-type Props = {
-  /** Issue url */
-  url: string;
-  /** Issue title */
-  title: string;
-  /** Issue description */
-  description: string;
-  /** Wehn the issue was created */
-  createdAt: string;
-  /** Author of the issue */
-  author: { name: string; avatarUrl: string };
-  /** Labels attached to the issue */
-  labels: Array<{ name: string; color: string }>;
-  /** Issue status */
-  status: { name: string; color: string };
-  /** Issue identifier */
-  identifier: string;
-};
+type Props = Omit<UnfurlResponse[UnfurlResourceType.Issue], "type">;
 
 const HoverPreviewIssue = React.forwardRef(function _HoverPreviewIssue(
-  {
-    url,
-    title,
-    identifier,
-    description,
-    author,
-    labels,
-    status,
-    createdAt,
-  }: Props,
+  { url, id, title, description, author, labels, state, createdAt }: Props,
   ref: React.Ref<HTMLDivElement>
 ) {
   const authorName = author.name;
@@ -56,9 +31,9 @@ const HoverPreviewIssue = React.forwardRef(function _HoverPreviewIssue(
           <CardContent>
             <Flex gap={2} column>
               <Title>
-                <IssueStatusIcon status={status.name} color={status.color} />
+                <IssueStatusIcon status={state.name} color={state.color} />
                 <span>
-                  {title}&nbsp;<Text type="tertiary">{identifier}</Text>
+                  {title}&nbsp;<Text type="tertiary">{id}</Text>
                 </span>
               </Title>
               <Flex align="center" gap={4}>

app/components/HoverPreview/HoverPreviewMention.tsx

@@ -1,22 +1,14 @@
 import * as React from "react";
+import { UnfurlResourceType, UnfurlResponse } from "@shared/types";
 import Avatar from "~/components/Avatar";
 import { AvatarSize } from "~/components/Avatar/Avatar";
 import Flex from "~/components/Flex";
 import { Preview, Title, Info, Card, CardContent } from "./Components";
 
-type Props = {
-  /** Resource url, avatar url in case of user mention */
-  url: string;
-  /** Title for the preview card*/
-  title: string;
-  /** Info about mentioned user's recent activity */
-  info: string;
-  /** Used for avatar's background color in absence of avatar url */
-  color: string;
-};
+type Props = Omit<UnfurlResponse[UnfurlResourceType.Mention], "type">;
 
 const HoverPreviewMention = React.forwardRef(function _HoverPreviewMention(
-  { url, title, info, color }: Props,
+  { avatarUrl, name, lastActive, color }: Props,
   ref: React.Ref<HTMLDivElement>
 ) {
   return (
@@ -26,15 +18,15 @@ const HoverPreviewMention = React.forwardRef(function _HoverPreviewMention(
           <Flex gap={12}>
             <Avatar
               model={{
-                avatarUrl: url,
-                initial: title ? title[0] : "?",
+                avatarUrl,
+                initial: name ? name[0] : "?",
                 color,
               }}
               size={AvatarSize.XLarge}
             />
             <Flex column gap={2} justify="center">
-              <Title>{title}</Title>
-              <Info>{info}</Info>
+              <Title>{name}</Title>
+              <Info>{lastActive}</Info>
             </Flex>
           </Flex>
         </CardContent>

app/components/HoverPreview/HoverPreviewPullRequest.tsx

@@ -1,5 +1,6 @@
 import * as React from "react";
 import { Trans } from "react-i18next";
+import { UnfurlResourceType, UnfurlResponse } from "@shared/types";
 import Flex from "~/components/Flex";
 import Avatar from "../Avatar";
 import { PullRequestIcon } from "../Icons/PullRequestIcon";
@@ -14,26 +15,11 @@ import {
   Info,
 } from "./Components";
 
-type Props = {
-  /** Pull request url */
-  url: string;
-  /** Pull request title */
-  title: string;
-  /** Pull request description */
-  description: string;
-  /** When the pull request was opened */
-  createdAt: string;
-  /** Author of the pull request */
-  author: { name: string; avatarUrl: string };
-  /** Pull request status */
-  status: { name: string; color: string };
-  /** Pull request identifier */
-  identifier: string;
-};
+type Props = Omit<UnfurlResponse[UnfurlResourceType.PR], "type">;
 
 const HoverPreviewPullRequest = React.forwardRef(
   function _HoverPreviewPullRequest(
-    { url, title, identifier, description, author, status, createdAt }: Props,
+    { url, title, id, description, author, state, createdAt }: Props,
     ref: React.Ref<HTMLDivElement>
   ) {
     const authorName = author.name;
@@ -45,9 +31,9 @@ const HoverPreviewPullRequest = React.forwardRef(
             <CardContent>
               <Flex gap={2} column>
                 <Title>
-                  <PullRequestIcon status={status.name} color={status.color} />
+                  <PullRequestIcon status={state.name} color={state.color} />
                   <span>
-                    {title}&nbsp;<Text type="tertiary">{identifier}</Text>
+                    {title}&nbsp;<Text type="tertiary">{id}</Text>
                   </span>
                 </Title>
                 <Flex align="center" gap={4}>