tsc

* Implement type-safe task scheduler

* introduce 'schedule' instance method

* typo

.env.sample

@@ -127,6 +127,10 @@ GITHUB_APP_NAME=
 GITHUB_APP_ID=
 GITHUB_APP_PRIVATE_KEY=
 
+# Linear
+LINEAR_CLIENT_ID=
+LINEAR_CLIENT_SECRET=
+
 # To configure Discord auth, you'll need to create a Discord Application at
 # => https://discord.com/developers/applications/
 #

.github/workflows/ci.yml

@@ -145,7 +145,7 @@ jobs:
 
   bundle-size:
     needs: [build, types, changes]
-    if: ${{ needs.changes.outputs.app == 'true' }}
+    if: ${{ needs.changes.outputs.app == 'true' && github.repository == 'outline/outline' }}
     runs-on: ubuntu-latest
     steps:
     - uses: actions/checkout@v4

app/components/CollectionDescription.tsx

@@ -69,7 +69,6 @@ function CollectionDescription({ collection }: Props) {
             readOnly={!can.update}
             userId={user.id}
             editorStyle={editorStyle}
-            embedsDisabled
           />
           <div ref={childRef} />
         </React.Suspense>

app/components/DocumentBreadcrumb.tsx

@@ -18,6 +18,13 @@ type Props = {
   children?: React.ReactNode;
   document: Document;
   onlyText?: boolean;
+  reverse?: boolean;
+  /**
+   * Maximum number of items to show in the breadcrumb.
+   * If value is less than or equals to 0, no items will be shown.
+   * If value is undefined, all items will be shown.
+   */
+  maxDepth?: number;
 };
 
 function useCategory(document: Document): MenuInternalLink | null {
@@ -54,7 +61,7 @@ function useCategory(document: Document): MenuInternalLink | null {
 }
 
 function DocumentBreadcrumb(
-  { document, children, onlyText }: Props,
+  { document, children, onlyText, reverse = false, maxDepth }: Props,
   ref: React.RefObject<HTMLDivElement> | null
 ) {
   const { collections } = useStores();
@@ -65,6 +72,7 @@ function DocumentBreadcrumb(
     ? collections.get(document.collectionId)
     : undefined;
   const can = usePolicy(collection);
+  const depth = maxDepth === undefined ? undefined : Math.max(0, maxDepth);
 
   React.useEffect(() => {
     void document.loadRelations({ withoutPolicies: true });
@@ -91,20 +99,23 @@ function DocumentBreadcrumb(
     };
   }
 
-  const path = document.pathTo;
+  const path = document.pathTo.slice(0, -1);
 
   const items = React.useMemo(() => {
-    const output = [];
+    const output: MenuInternalLink[] = [];
+
+    if (depth === 0) {
+      return output;
+    }
 
     if (category) {
       output.push(category);
     }
-
     if (collectionNode) {
       output.push(collectionNode);
     }
 
-    path.slice(0, -1).forEach((node: NavigationNode) => {
+    path.forEach((node: NavigationNode) => {
       const title = node.title || t("Untitled");
       output.push({
         type: "route",
@@ -121,21 +132,43 @@ function DocumentBreadcrumb(
         },
       });
     });
-    return output;
-  }, [t, path, category, sidebarContext, collectionNode]);
+
+    return reverse
+      ? depth !== undefined
+        ? output.slice(-depth)
+        : output
+      : depth !== undefined
+      ? output.slice(0, depth)
+      : output;
+  }, [t, path, category, sidebarContext, collectionNode, reverse, depth]);
 
   if (!collections.isLoaded) {
     return null;
   }
 
-  if (onlyText === true) {
+  if (onlyText) {
+    if (depth === 0) {
+      return <></>;
+    }
+
+    const slicedPath = reverse
+      ? path.slice(depth && -depth)
+      : path.slice(0, depth);
+
+    const showCollection =
+      collection &&
+      (!reverse || depth === undefined || slicedPath.length < depth);
+
     return (
       <>
-        {collection?.name}
-        {path.slice(0, -1).map((node: NavigationNode) => (
+        {showCollection && collection.name}
+        {slicedPath.map((node: NavigationNode, index: number) => (
           <React.Fragment key={node.id}>
-            <SmallSlash />
+            {showCollection && <SmallSlash />}
             {node.title || t("Untitled")}
+            {!showCollection && index !== slicedPath.length - 1 && (
+              <SmallSlash />
+            )}
           </React.Fragment>
         ))}
       </>

app/components/DocumentViews.tsx

@@ -46,10 +46,10 @@ function DocumentViews({ document, isOpen }: Props) {
   return (
     <>
       {isOpen && (
-        <PaginatedList
+        <PaginatedList<User>
           aria-label={t("Viewers")}
           items={users}
-          renderItem={(model: User) => {
+          renderItem={(model) => {
             const view = documentViews.find((v) => v.userId === model.id);
             const isPresent = presentIds.includes(model.id);
             const isEditing = editingIds.includes(model.id);

app/components/FilterOptions.tsx

@@ -56,7 +56,7 @@ const FilterOptions = ({
     : "";
 
   const renderItem = React.useCallback(
-    (option: TFilterOption) => (
+    (option) => (
       <MenuItem
         key={option.key}
         onClick={() => {
@@ -174,7 +174,7 @@ const FilterOptions = ({
         )}
       </MenuButton>
       <ContextMenu aria-label={defaultLabel} minHeight={66} {...menu}>
-        <PaginatedList
+        <PaginatedList<TFilterOption>
           listRef={listRef}
           options={{ query, ...fetchQueryOptions }}
           items={filteredOptions}

app/components/HoverPreview/Components.tsx

@@ -2,7 +2,6 @@ import { transparentize } from "polished";
 import { Link } from "react-router-dom";
 import styled, { css } from "styled-components";
 import { s } from "@shared/styles";
-import { getTextColor } from "@shared/utils/color";
 import Text from "~/components/Text";
 
 export const CARD_MARGIN = 10;
@@ -33,7 +32,7 @@ export const Title = styled(Text).attrs({ as: "h2", size: "large" })`
   display: flex;
   align-items: flex-start;
   justify-content: flex-start;
-  gap: 4px;
+  gap: 6px;
 `;
 
 export const Info = styled(StyledText).attrs(() => ({
@@ -60,15 +59,27 @@ export const Thumbnail = styled.img`
 export const Label = styled(Text).attrs({ size: "xsmall", weight: "bold" })<{
   color?: string;
 }>`
-  background-color: ${(props) =>
-    props.color ?? props.theme.backgroundSecondary};
-  color: ${(props) =>
-    props.color ? getTextColor(props.color) : props.theme.text};
+  border: 1px solid ${(props) => props.theme.divider};
   width: fit-content;
   border-radius: 2em;
-  padding: 0 8px;
+  padding: 1px 8px 1px 20px;
   margin-right: 0.5em;
   margin-top: 0.5em;
+  position: relative;
+  flex-shrink: 0;
+
+  &::after {
+    content: "";
+    position: absolute;
+    left: 8px;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    background-color: ${(props) =>
+      props.color || props.theme.backgroundSecondary};
+  }
 `;
 
 export const CardContent = styled.div`

app/components/HoverPreview/HoverPreviewIssue.tsx

@@ -1,7 +1,13 @@
 import * as React from "react";
 import { Trans } from "react-i18next";
+import styled from "styled-components";
+import { Backticks } from "@shared/components/Backticks";
 import { IssueStatusIcon } from "@shared/components/IssueStatusIcon";
-import { UnfurlResourceType, UnfurlResponse } from "@shared/types";
+import {
+  IntegrationService,
+  UnfurlResourceType,
+  UnfurlResponse,
+} from "@shared/types";
 import { Avatar } from "~/components/Avatar";
 import Flex from "~/components/Flex";
 import Text from "../Text";
@@ -23,6 +29,11 @@ const HoverPreviewIssue = React.forwardRef(function _HoverPreviewIssue(
   ref: React.Ref<HTMLDivElement>
 ) {
   const authorName = author.name;
+  const urlObj = new URL(url);
+  const service =
+    urlObj.hostname === "github.com"
+      ? IntegrationService.GitHub
+      : IntegrationService.Linear;
 
   return (
     <Preview as="a" href={url} target="_blank" rel="noopener noreferrer">
@@ -31,13 +42,18 @@ const HoverPreviewIssue = React.forwardRef(function _HoverPreviewIssue(
           <CardContent>
             <Flex gap={2} column>
               <Title>
-                <IssueStatusIcon status={state.name} color={state.color} />
+                <StyledIssueStatusIcon
+                  service={service}
+                  state={state}
+                  size={18}
+                />
                 <span>
-                  {title}&nbsp;<Text type="tertiary">{id}</Text>
+                  <Backticks content={title} />
+                  &nbsp;<Text type="tertiary">{id}</Text>
                 </span>
               </Title>
-              <Flex align="center" gap={4}>
-                <Avatar src={author.avatarUrl} />
+              <Flex align="center" gap={6}>
+                <Avatar src={author.avatarUrl} size={18} />
                 <Info>
                   <Trans>
                     {{ authorName }} created{" "}
@@ -62,4 +78,8 @@ const HoverPreviewIssue = React.forwardRef(function _HoverPreviewIssue(
   );
 });
 
+const StyledIssueStatusIcon = styled(IssueStatusIcon)`
+  margin-top: 2px;
+`;
+
 export default HoverPreviewIssue;

app/components/HoverPreview/HoverPreviewPullRequest.tsx

@@ -1,5 +1,7 @@
 import * as React from "react";
 import { Trans } from "react-i18next";
+import styled from "styled-components";
+import { Backticks } from "@shared/components/Backticks";
 import { PullRequestIcon } from "@shared/components/PullRequestIcon";
 import { UnfurlResourceType, UnfurlResponse } from "@shared/types";
 import { Avatar } from "~/components/Avatar";
@@ -31,13 +33,14 @@ const HoverPreviewPullRequest = React.forwardRef(
             <CardContent>
               <Flex gap={2} column>
                 <Title>
-                  <PullRequestIcon status={state.name} color={state.color} />
+                  <StyledPullRequestIcon size={18} state={state} />
                   <span>
-                    {title}&nbsp;<Text type="tertiary">{id}</Text>
+                    <Backticks content={title} />
+                    &nbsp;<Text type="tertiary">{id}</Text>
                   </span>
                 </Title>
-                <Flex align="center" gap={4}>
-                  <Avatar src={author.avatarUrl} />
+                <Flex align="center" gap={6}>
+                  <Avatar src={author.avatarUrl} size={18} />
                   <Info>
                     <Trans>
                       {{ authorName }} opened{" "}
@@ -55,4 +58,8 @@ const HoverPreviewPullRequest = React.forwardRef(
   }
 );
 
+const StyledPullRequestIcon = styled(PullRequestIcon)`
+  margin-top: 2px;
+`;
+
 export default HoverPreviewPullRequest;

app/components/Modal.tsx

@@ -114,6 +114,8 @@ const Modal: React.FC<Props> = ({
                 <Small {...props}>
                   <Centered
                     onClick={(ev) => ev.stopPropagation()}
+                    // maxHeight needed for proper overflow behavior in Safari
+                    style={{ maxHeight: "65vh" }}
                     column
                     reverse
                   >
@@ -259,6 +261,7 @@ const Small = styled.div`
   width: 75vw;
   min-width: 350px;
   max-width: 450px;
+  max-height: 65vh;
   z-index: ${depths.modal};
   display: flex;
   justify-content: center;

app/components/Notifications/Notifications.tsx

@@ -79,11 +79,11 @@ function Notifications(
         </Header>
         <React.Suspense fallback={null}>
           <Scrollable ref={ref} flex topShadow>
-            <PaginatedList
+            <PaginatedList<Notification>
               fetch={notifications.fetchPage}
               options={{ archived: false }}
               items={isOpen ? notifications.orderedData : undefined}
-              renderItem={(item: Notification) => (
+              renderItem={(item) => (
                 <NotificationListItem
                   key={item.id}
                   notification={item}

app/components/PaginatedDocumentList.tsx

@@ -10,7 +10,7 @@ type Props = {
   fetch: (options: any) => Promise<Document[] | undefined>;
   options?: Record<string, any>;
   heading?: React.ReactNode;
-  empty?: React.ReactNode;
+  empty?: JSX.Element;
   showParentDocuments?: boolean;
   showCollection?: boolean;
   showPublished?: boolean;
@@ -34,7 +34,7 @@ const PaginatedDocumentList = React.memo<Props>(function PaginatedDocumentList({
   const { t } = useTranslation();
 
   return (
-    <PaginatedList
+    <PaginatedList<Document>
       aria-label={t("Documents")}
       items={documents}
       empty={empty}
@@ -42,7 +42,7 @@ const PaginatedDocumentList = React.memo<Props>(function PaginatedDocumentList({
       fetch={fetch}
       options={options}
       renderError={(props) => <Error {...props} />}
-      renderItem={(item: Document, _index) => (
+      renderItem={(item, _index) => (
         <DocumentListItem
           key={item.id}
           document={item}

app/components/PaginatedEventList.tsx

@@ -10,7 +10,7 @@ type Props = {
   fetch: (options: Record<string, any> | undefined) => Promise<Event[]>;
   options?: Record<string, any>;
   heading?: React.ReactNode;
-  empty?: React.ReactNode;
+  empty?: JSX.Element;
 };
 
 const PaginatedEventList = React.memo<Props>(function PaginatedEventList({

app/components/PaginatedList.test.tsx

@@ -1,13 +1,15 @@
 import "../stores";
 import { render } from "@testing-library/react";
 import { TFunction } from "i18next";
+import { Provider } from "mobx-react";
 import * as React from "react";
 import { getI18n } from "react-i18next";
 import { Pagination } from "@shared/constants";
-import { Component as PaginatedList } from "./PaginatedList";
+import PaginatedList from "./PaginatedList";
 
 describe("PaginatedList", () => {
   const i18n = getI18n();
+  const authStore = {};
 
   const props = {
     i18n,
@@ -17,19 +19,23 @@ describe("PaginatedList", () => {
 
   it("with no items renders nothing", () => {
     const result = render(
-      <PaginatedList items={[]} renderItem={render} {...props} />
+      <Provider auth={authStore}>
+        <PaginatedList items={[]} renderItem={render} {...props} />
+      </Provider>
     );
     expect(result.container.innerHTML).toEqual("");
   });
 
   it("with no items renders empty prop", async () => {
     const result = render(
-      <PaginatedList
-        items={[]}
-        empty={<p>Sorry, no results</p>}
-        renderItem={render}
-        {...props}
-      />
+      <Provider auth={authStore}>
+        <PaginatedList
+          items={[]}
+          empty={<p>Sorry, no results</p>}
+          renderItem={render}
+          {...props}
+        />{" "}
+      </Provider>
     );
     await expect(
       result.findAllByText("Sorry, no results")
@@ -42,13 +48,15 @@ describe("PaginatedList", () => {
       id: "one",
     };
     render(
-      <PaginatedList
-        items={[]}
-        fetch={fetch}
-        options={options}
-        renderItem={render}
-        {...props}
-      />
+      <Provider auth={authStore}>
+        <PaginatedList
+          items={[]}
+          fetch={fetch}
+          options={options}
+          renderItem={render}
+          {...props}
+        />{" "}
+      </Provider>
     );
     expect(fetch).toHaveBeenCalledWith({
       ...options,

app/components/PaginatedList.tsx

@@ -1,265 +1,315 @@
 import isEqual from "lodash/isEqual";
-import { observable, action, computed } from "mobx";
-import { observer } from "mobx-react";
 import * as React from "react";
-import { withTranslation, WithTranslation } from "react-i18next";
+import { useTranslation } from "react-i18next";
 import { Waypoint } from "react-waypoint";
 import { Pagination } from "@shared/constants";
-import RootStore from "~/stores/RootStore";
 import ArrowKeyNavigation from "~/components/ArrowKeyNavigation";
 import DelayedMount from "~/components/DelayedMount";
 import PlaceholderList from "~/components/List/Placeholder";
-import withStores from "~/components/withStores";
+import useCurrentUser from "~/hooks/useCurrentUser";
+import usePrevious from "~/hooks/usePrevious";
 import { dateToHeading } from "~/utils/date";
 
+/**
+ * Base interface for items that can be paginated
+ * @interface PaginatedItem
+ */
 export interface PaginatedItem {
+  /** Unique identifier for the item */
   id?: string;
+  /** Last update timestamp of the item */
   updatedAt?: string;
+  /** Creation timestamp of the item */
   createdAt?: string;
 }
 
-type Props<T> = WithTranslation &
-  RootStore &
-  React.HTMLAttributes<HTMLDivElement> & {
-    fetch?: (
-      options: Record<string, any> | undefined
-    ) => Promise<T[] | undefined> | undefined;
-    options?: Record<string, any>;
-    heading?: React.ReactNode;
-    empty?: React.ReactNode;
-    loading?: React.ReactElement;
-    items?: T[];
-    className?: string;
-    renderItem: (item: T, index: number) => React.ReactNode;
-    renderError?: (options: {
-      error: Error;
-      retry: () => void;
-    }) => React.ReactNode;
-    renderHeading?: (name: React.ReactElement<any> | string) => React.ReactNode;
-    onEscape?: (ev: React.KeyboardEvent<HTMLDivElement>) => void;
-    listRef?: React.RefObject<HTMLDivElement>;
-  };
+/**
+ * Props for the PaginatedList component
+ * @template T Type of items in the list, must extend PaginatedItem
+ */
+interface Props<T extends PaginatedItem>
+  extends React.HTMLAttributes<HTMLDivElement> {
+  /**
+   * Function to fetch paginated data. Should return a promise resolving to an array of items
+   * @param options Pagination and other query options
+   */
+  fetch?: (
+    options: Record<string, any> | undefined
+  ) => Promise<unknown[] | undefined> | undefined;
 
-@observer
-class PaginatedList<T extends PaginatedItem> extends React.PureComponent<
-  Props<T>
-> {
-  @observable
-  error?: Error;
+  /** Additional options to pass to the fetch function */
+  options?: Record<string, any>;
 
-  @observable
-  isFetchingMore = false;
+  /** Optional header content to display above the list */
+  heading?: React.ReactNode;
 
-  @observable
-  isFetching = false;
+  /** Content to display when the list is empty */
+  empty?: JSX.Element | null;
 
-  @observable
-  isFetchingInitial = !this.props.items?.length;
+  /** Optional loading state content */
+  loading?: JSX.Element | null;
 
-  @observable
-  fetchCounter = 0;
+  /** Array of items to display in the list */
+  items?: T[];
 
-  @observable
-  renderCount = Pagination.defaultLimit;
+  /** CSS class name to apply to the list container */
+  className?: string;
 
-  @observable
-  offset = 0;
+  /**
+   * Function to render each individual item in the list
+   * @param item The item to render
+   * @param index The index of the item in the list
+   */
+  renderItem: (item: T, index: number) => React.ReactNode;
 
-  @observable
-  allowLoadMore = true;
+  /**
+   * Function to render error state
+   * @param options Object containing error details and retry function
+   */
+  renderError?: (options: {
+    /** Details of the error */
+    error: Error;
+    /** Function to retry the fetch operation */
+    retry: () => void;
+  }) => JSX.Element;
 
-  componentDidMount() {
-    void this.fetchResults();
-  }
+  /**
+   * Function to render section headings (typically date-based)
+   * @param name The heading text or element to render
+   */
+  renderHeading?: (name: React.ReactElement<any> | string) => React.ReactNode;
 
-  componentDidUpdate(prevProps: Props<T>) {
-    if (
-      prevProps.fetch !== this.props.fetch ||
-      !isEqual(prevProps.options, this.props.options)
-    ) {
-      this.reset();
-      void this.fetchResults();
-    }
-  }
+  /**
+   * Handler for escape key press
+   * @param ev Keyboard event object
+   */
+  onEscape?: (ev: React.KeyboardEvent<HTMLDivElement>) => void;
 
-  reset = () => {
-    this.offset = 0;
-    this.allowLoadMore = true;
-    this.renderCount = Pagination.defaultLimit;
-    this.isFetching = false;
-    this.isFetchingInitial = false;
-    this.isFetchingMore = false;
-  };
+  /** Reference to the list container element */
+  listRef?: React.RefObject<HTMLDivElement>;
+}
 
-  @action
-  fetchResults = async () => {
-    if (!this.props.fetch) {
+/**
+ * A reusable component that renders a paginated list with infinite scrolling
+ * and optional date-based section headings.
+ *
+ * @template T Type of the list items, must extend PaginatedItem
+ */
+const PaginatedList = <T extends PaginatedItem>({
+  fetch,
+  options,
+  heading,
+  empty = null,
+  loading = null,
+  items = [],
+  className,
+  renderItem,
+  renderError,
+  renderHeading,
+  onEscape,
+  listRef,
+  ...rest
+}: Props<T>): JSX.Element | null => {
+  const user = useCurrentUser({ rejectOnEmpty: false });
+  const { t } = useTranslation();
+
+  const [error, setError] = React.useState<Error | undefined>();
+  const [isFetchingMore, setIsFetchingMore] = React.useState(false);
+  const [isFetching, setIsFetching] = React.useState(false);
+  const [isFetchingInitial, setIsFetchingInitial] = React.useState(
+    !items?.length
+  );
+  const [fetchCounter, setFetchCounter] = React.useState(0);
+  const [renderCount, setRenderCount] = React.useState(Pagination.defaultLimit);
+  const [offset, setOffset] = React.useState(0);
+  const [allowLoadMore, setAllowLoadMore] = React.useState(true);
+
+  const reset = React.useCallback(() => {
+    setOffset(0);
+    setAllowLoadMore(true);
+    setRenderCount(Pagination.defaultLimit);
+    setIsFetching(false);
+    setIsFetchingInitial(false);
+    setIsFetchingMore(false);
+  }, []);
+
+  const fetchResults = React.useCallback(async () => {
+    if (!fetch) {
       return;
     }
-    this.isFetching = true;
-    const counter = ++this.fetchCounter;
-    const limit = this.props.options?.limit ?? Pagination.defaultLimit;
-    this.error = undefined;
+
+    setIsFetching(true);
+    const counter = fetchCounter + 1;
+    setFetchCounter(counter);
+    const limit = options?.limit ?? Pagination.defaultLimit;
+    setError(undefined);
 
     try {
-      const results = await this.props.fetch({
+      const results = await fetch({
         limit,
-        offset: this.offset,
-        ...this.props.options,
+        offset,
+        ...options,
       });
 
-      if (this.offset !== 0) {
-        this.renderCount += limit;
+      if (offset !== 0) {
+        setRenderCount((prevCount) => prevCount + limit);
       }
 
       if (results && (results.length === 0 || results.length < limit)) {
-        this.allowLoadMore = false;
+        setAllowLoadMore(false);
       } else {
-        this.offset += limit;
+        setOffset((prevOffset) => prevOffset + limit);
       }
 
-      this.isFetchingInitial = false;
+      setIsFetchingInitial(false);
     } catch (err) {
-      this.error = err;
+      setError(err);
     } finally {
       // only the most recent fetch should end the loading state
-      if (counter >= this.fetchCounter) {
-        this.isFetching = false;
-        this.isFetchingMore = false;
+      if (counter >= fetchCounter) {
+        setIsFetching(false);
+        setIsFetchingMore(false);
       }
     }
-  };
+  }, [fetch, fetchCounter, offset, options]);
 
-  @action
-  loadMoreResults = async () => {
-    // Don't paginate if there aren't more results or we’re currently fetching
-    if (!this.allowLoadMore || this.isFetching) {
+  const loadMoreResults = React.useCallback(async () => {
+    // Don't paginate if there aren't more results or we're currently fetching
+    if (!allowLoadMore || isFetching) {
       return;
     }
+
     // If there are already cached results that we haven't yet rendered because
     // of lazy rendering then show another page.
-    const leftToRender = (this.props.items?.length ?? 0) - this.renderCount;
+    const leftToRender = (items?.length ?? 0) - renderCount;
 
     if (leftToRender > 0) {
-      this.renderCount += Pagination.defaultLimit;
+      setRenderCount((prevCount) => prevCount + Pagination.defaultLimit);
     }
 
     // If there are less than a pages results in the cache go ahead and fetch
     // another page from the server
     if (leftToRender <= Pagination.defaultLimit) {
-      this.isFetchingMore = true;
-      await this.fetchResults();
+      setIsFetchingMore(true);
+      await fetchResults();
     }
-  };
+  }, [allowLoadMore, isFetching, items?.length, renderCount, fetchResults]);
 
-  @computed
-  get itemsToRender() {
-    return this.props.items?.slice(0, this.renderCount) ?? [];
-  }
+  const prevFetch = usePrevious(fetch);
+  const prevOptions = usePrevious(options);
 
-  render() {
-    const {
-      items = [],
-      heading,
-      auth,
-      empty = null,
-      renderHeading,
-      renderError,
-      onEscape,
-    } = this.props;
+  // Initial fetch on mount
+  React.useEffect(() => {
+    if (fetch) {
+      void fetchResults();
+    }
+  }, [fetch]);
 
-    const showLoading =
-      this.isFetching &&
-      !this.isFetchingMore &&
-      (!items?.length || (this.fetchCounter <= 1 && this.isFetchingInitial));
-
-    if (showLoading) {
-      return (
-        this.props.loading || (
-          <DelayedMount>
-            <div className={this.props.className}>
-              <PlaceholderList count={5} />
-            </div>
-          </DelayedMount>
-        )
-      );
+  // Handle updates to fetch or options
+  React.useEffect(() => {
+    if (!prevFetch || !prevOptions) {
+      return; // Skip on initial mount since it's handled by the above effect
     }
 
-    if (items?.length === 0) {
-      if (this.error && renderError) {
-        return renderError({ error: this.error, retry: this.fetchResults });
-      }
-
-      return empty;
+    if (prevFetch !== fetch || !isEqual(prevOptions, options)) {
+      reset();
+      void fetchResults();
     }
+  }, [fetch, options, reset, fetchResults, prevFetch, prevOptions]);
 
+  // Computed property equivalent
+  const itemsToRender = React.useMemo(
+    () => items?.slice(0, renderCount) ?? [],
+    [items, renderCount]
+  );
+
+  const showLoading =
+    isFetching &&
+    !isFetchingMore &&
+    (!items?.length || (fetchCounter <= 1 && isFetchingInitial));
+
+  if (showLoading) {
     return (
-      <>
-        {heading}
-        <ArrowKeyNavigation
-          aria-label={this.props["aria-label"]}
-          onEscape={onEscape}
-          className={this.props.className}
-          items={this.itemsToRender}
-          ref={this.props.listRef}
-        >
-          {() => {
-            let previousHeading = "";
-            return this.itemsToRender.map((item, index) => {
-              const children = this.props.renderItem(item, index);
-
-              // If there is no renderHeading method passed then no date
-              // headings are rendered
-              if (!renderHeading) {
-                return children;
-              }
-
-              // Our models have standard date fields, updatedAt > createdAt.
-              // Get what a heading would look like for this item
-              const currentDate =
-                "updatedAt" in item && item.updatedAt
-                  ? item.updatedAt
-                  : "createdAt" in item && item.createdAt
-                  ? item.createdAt
-                  : previousHeading;
-              const currentHeading = dateToHeading(
-                currentDate,
-                this.props.t,
-                auth.user?.language
-              );
-
-              // If the heading is different to any previous heading then we
-              // should render it, otherwise the item can go under the previous
-              // heading
-              if (
-                children &&
-                (!previousHeading || currentHeading !== previousHeading)
-              ) {
-                previousHeading = currentHeading;
-                return (
-                  <React.Fragment
-                    key={"id" in item && item.id ? item.id : index}
-                  >
-                    {renderHeading(currentHeading)}
-                    {children}
-                  </React.Fragment>
-                );
-              }
-
-              return children;
-            });
-          }}
-        </ArrowKeyNavigation>
-        {this.allowLoadMore && (
-          <div style={{ height: "1px" }}>
-            <Waypoint key={this.renderCount} onEnter={this.loadMoreResults} />
+      loading || (
+        <DelayedMount>
+          <div className={className}>
+            <PlaceholderList count={5} />
           </div>
-        )}
-      </>
+        </DelayedMount>
+      )
     );
   }
-}
 
-export const Component = PaginatedList;
+  if (items?.length === 0) {
+    if (error && renderError) {
+      return renderError({ error, retry: fetchResults });
+    }
 
-export default withTranslation()(withStores(PaginatedList));
+    return empty;
+  }
+
+  return (
+    <React.Fragment>
+      {heading}
+      <ArrowKeyNavigation
+        aria-label={rest["aria-label"]}
+        onEscape={onEscape}
+        className={className}
+        items={itemsToRender}
+        ref={listRef}
+      >
+        {() => {
+          let previousHeading = "";
+          return itemsToRender.map((item, index) => {
+            const children = renderItem(item, index);
+
+            // If there is no renderHeading method passed then no date
+            // headings are rendered
+            if (!renderHeading) {
+              return children;
+            }
+
+            // Our models have standard date fields, updatedAt > createdAt.
+            // Get what a heading would look like for this item
+            const currentDate =
+              "updatedAt" in item && item.updatedAt
+                ? item.updatedAt
+                : "createdAt" in item && item.createdAt
+                ? item.createdAt
+                : previousHeading;
+            const currentHeading = dateToHeading(
+              currentDate,
+              t,
+              user?.language
+            );
+
+            // If the heading is different to any previous heading then we
+            // should render it, otherwise the item can go under the previous
+            // heading
+            if (
+              children &&
+              (!previousHeading || currentHeading !== previousHeading)
+            ) {
+              previousHeading = currentHeading;
+              return (
+                <React.Fragment key={"id" in item && item.id ? item.id : index}>
+                  {renderHeading(currentHeading)}
+                  {children}
+                </React.Fragment>
+              );
+            }
+
+            return children;
+          });
+        }}
+      </ArrowKeyNavigation>
+      {allowLoadMore && (
+        <div style={{ height: "1px" }}>
+          <Waypoint key={renderCount} onEnter={loadMoreResults} />
+        </div>
+      )}
+    </React.Fragment>
+  );
+};
+
+export default PaginatedList;

app/components/SearchPopover.tsx

@@ -200,7 +200,7 @@ function SearchPopover({ shareId, className }: Props) {
         style={{ zIndex: depths.sidebar + 1 }}
         shrink
       >
-        <PaginatedList
+        <PaginatedList<SearchResult>
           options={{ query, snippetMinWords: 10, snippetMaxWords: 11 }}
           items={cachedSearchResults}
           fetch={performSearch}
@@ -209,7 +209,7 @@ function SearchPopover({ shareId, className }: Props) {
             <NoResults>{t("No results for {{query}}", { query })}</NoResults>
           }
           loading={<PlaceholderList count={3} header={{ height: 20 }} />}
-          renderItem={(item: SearchResult, index) => (
+          renderItem={(item, index) => (
             <SearchListItem
               key={item.document.id}
               shareId={shareId}

app/components/Sidebar/components/ArchiveLink.tsx

@@ -82,12 +82,12 @@ function ArchiveLink() {
         </div>
         {expanded === true ? (
           <Relative>
-            <PaginatedList
+            <PaginatedList<Collection>
               aria-label={t("Archived collections")}
               items={collections.archived}
               loading={<PlaceholderCollections />}
               renderError={(props) => <StyledError {...props} />}
-              renderItem={(item: Collection) => (
+              renderItem={(item) => (
                 <ArchivedCollectionLink
                   key={item.id}
                   depth={1}

app/components/Sidebar/components/Collections.tsx

@@ -54,7 +54,7 @@ function Collections() {
       <Flex column>
         <Header id="collections" title={t("Collections")}>
           <Relative>
-            <PaginatedList
+            <PaginatedList<Collection>
               options={params}
               aria-label={t("Collections")}
               items={collections.allActive}
@@ -69,7 +69,7 @@ function Collections() {
                 ) : undefined
               }
               renderError={(props) => <StyledError {...props} />}
-              renderItem={(item: Collection, index) => (
+              renderItem={(item, index) => (
                 <DraggableCollectionLink
                   key={item.id}
                   collection={item}

app/components/Sidebar/components/DocumentLink.tsx

@@ -148,7 +148,12 @@ function InnerDocumentLink(
   const color = document?.color || node.color;
 
   // Draggable
-  const [{ isDragging }, drag] = useDragDocument(node, depth, document);
+  const [{ isDragging }, drag] = useDragDocument(
+    node,
+    depth,
+    document,
+    isEditing
+  );
 
   // Drop to re-parent
   const parentRef = React.useRef<HTMLDivElement>(null);
@@ -270,6 +275,8 @@ function InnerDocumentLink(
           <div ref={dropToReparent}>
             <DropToImport documentId={node.id} activeClassName="activeDropZone">
               <SidebarLink
+                // @ts-expect-error react-router type is wrong, string component is fine.
+                component={isEditing ? "div" : undefined}
                 expanded={hasChildren ? isExpanded : undefined}
                 onDisclosureClick={handleDisclosureClick}
                 onClickIntent={handlePrefetch}
@@ -285,6 +292,7 @@ function InnerDocumentLink(
                   <EditableTitle
                     title={title}
                     onSubmit={handleTitleChange}
+                    isEditing={isEditing}
                     onEditing={setIsEditing}
                     canUpdate={canUpdate}
                     maxLength={DocumentValidation.maxTitleLength}

app/components/Sidebar/components/NavLink.tsx

@@ -39,6 +39,7 @@ export interface Props extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
   location?: Location;
   strict?: boolean;
   to: LocationDescriptor;
+  component?: React.ComponentType;
   onBeforeClick?: () => void;
 }
 
@@ -146,17 +147,22 @@ const NavLink = ({
     setPreActive(undefined);
   }, [currentLocation]);
 
+  const handleKeyDown = React.useCallback(
+    (event: React.KeyboardEvent<HTMLAnchorElement>) => {
+      if (["Enter", " "].includes(event.key)) {
+        navigateTo();
+        event.currentTarget?.blur();
+      }
+    },
+    [navigateTo]
+  );
+
   return (
     <Link
       key={isActive ? "active" : "inactive"}
       ref={linkRef}
       onClick={handleClick}
-      onKeyDown={(event) => {
-        if (["Enter", " "].includes(event.key)) {
-          navigateTo();
-          event.currentTarget?.blur();
-        }
-      }}
+      onKeyDown={handleKeyDown}
       aria-current={(isActive && ariaCurrent) || undefined}
       className={className}
       style={style}

app/components/Sidebar/hooks/useDragAndDrop.tsx

@@ -166,11 +166,13 @@ export function useDropToReorderStar(getIndex?: () => string) {
  * @param node The NavigationNode model to drag.
  * @param depth The depth of the node in the sidebar.
  * @param document The related Document model.
+ * @param isEditing Whether the sidebar item is currently being edited.
  */
 export function useDragDocument(
   node: NavigationNode,
   depth: number,
-  document?: Document
+  document?: Document,
+  isEditing?: boolean
 ) {
   const icon = document?.icon || node.icon || node.emoji;
   const color = document?.color || node.color;
@@ -188,7 +190,7 @@ export function useDragDocument(
         icon: icon ? <Icon value={icon} color={color} /> : undefined,
         collectionId: document?.collectionId || "",
       } as DragObject),
-    canDrag: () => !!document?.isActive,
+    canDrag: () => !!document?.isActive && !isEditing,
     collect: (monitor) => ({
       isDragging: monitor.isDragging(),
     }),

app/components/Table.tsx

@@ -335,6 +335,7 @@ const TR = styled.div<{ $columns: string }>`
   grid-template-columns: ${({ $columns }) => `${$columns}`};
   align-items: center;
   border-bottom: 1px solid ${s("divider")};
+  overflow: hidden;
 
   &:last-child {
     border-bottom: 0;
@@ -357,7 +358,8 @@ const TD = styled.span`
   padding: 10px 6px;
   font-size: 14px;
   text-wrap: wrap;
-  word-break: break-word;
+  overflow: hidden;
+  text-overflow: ellipsis;
 
   &:first-child {
     font-size: 15px;

app/editor/components/LinkEditor.tsx

@@ -10,6 +10,7 @@ import styled from "styled-components";
 import Icon from "@shared/components/Icon";
 import { hideScrollbars, s } from "@shared/styles";
 import { isInternalUrl, sanitizeUrl } from "@shared/utils/urls";
+import DocumentBreadcrumb from "~/components/DocumentBreadcrumb";
 import Flex from "~/components/Flex";
 import { ResizingHeightContainer } from "~/components/ResizingHeightContainer";
 import Scrollable from "~/components/Scrollable";
@@ -253,7 +254,14 @@ const LinkEditor: React.FC<Props> = ({
                   onPointerMove={() => setSelectedIndex(index)}
                   selected={index === selectedIndex}
                   key={doc.id}
-                  subtitle={doc.collection?.name}
+                  subtitle={
+                    <DocumentBreadcrumb
+                      document={doc}
+                      onlyText
+                      reverse
+                      maxDepth={2}
+                    />
+                  }
                   title={doc.title}
                   icon={
                     doc.icon ? (

app/editor/components/MentionMenu.tsx

@@ -11,6 +11,7 @@ import { MenuItem } from "@shared/editor/types";
 import { MentionType } from "@shared/types";
 import parseDocumentSlug from "@shared/utils/parseDocumentSlug";
 import { Avatar, AvatarSize } from "~/components/Avatar";
+import DocumentBreadcrumb from "~/components/DocumentBreadcrumb";
 import Flex from "~/components/Flex";
 import {
   DocumentsSection,
@@ -57,7 +58,7 @@ function MentionMenu({ search, isActive, ...rest }: Props) {
       res.data.documents.map(documents.add);
       res.data.users.map(users.add);
       res.data.collections.map(collections.add);
-    }, [search, documents, users])
+    }, [search, documents, users, collections])
   );
 
   React.useEffect(() => {
@@ -68,7 +69,7 @@ function MentionMenu({ search, isActive, ...rest }: Props) {
 
   React.useEffect(() => {
     if (actorId && !loading) {
-      const items = users
+      const items: MentionItem[] = users
         .findByQuery(search, { maxResults: maxResultsInSection })
         .map(
           (user) =>
@@ -112,7 +113,14 @@ function MentionMenu({ search, isActive, ...rest }: Props) {
                     <DocumentIcon />
                   ),
                   title: doc.title,
-                  subtitle: doc.collection?.name,
+                  subtitle: (
+                    <DocumentBreadcrumb
+                      document={doc}
+                      onlyText
+                      reverse
+                      maxDepth={2}
+                    />
+                  ),
                   section: DocumentsSection,
                   appendSpace: true,
                   attrs: {

app/editor/components/PasteMenu.tsx

@@ -6,6 +6,7 @@ import { v4 } from "uuid";
 import { EmbedDescriptor } from "@shared/editor/embeds";
 import { MenuItem } from "@shared/editor/types";
 import { MentionType } from "@shared/types";
+import { isUrl } from "@shared/utils/urls";
 import Integration from "~/models/Integration";
 import useCurrentUser from "~/hooks/useCurrentUser";
 import useStores from "~/hooks/useStores";
@@ -26,12 +27,12 @@ type Props = Omit<
 export const PasteMenu = observer(({ pastedText, embeds, ...props }: Props) => {
   const { t } = useTranslation();
   const { integrations } = useStores();
-  const user = useCurrentUser();
+  const user = useCurrentUser({ rejectOnEmpty: false });
 
   let mentionType: MentionType | undefined;
-  const url = pastedText ? new URL(pastedText) : undefined;
 
-  if (url) {
+  if (pastedText && isUrl(pastedText)) {
+    const url = new URL(pastedText);
     const integration = integrations.find((intg: Integration) =>
       isURLMentionable({ url, integration: intg })
     );
@@ -70,7 +71,7 @@ export const PasteMenu = observer(({ pastedText, embeds, ...props }: Props) => {
             label: pastedText,
             href: pastedText,
             modelId: v4(),
-            actorId: user.id,
+            actorId: user?.id,
           },
           appendSpace: true,
         },

app/editor/components/SelectionToolbar.tsx

@@ -174,12 +174,12 @@ export default function SelectionToolbar(props: Props) {
   const { isTemplate, rtl, canComment, canUpdate, ...rest } = props;
   const { state } = view;
   const { selection } = state;
-  const isDividerSelection = isNodeActive(state.schema.nodes.hr)(state);
 
   if ((readOnly && !canComment) || isDragging) {
     return null;
   }
 
+  const isDividerSelection = isNodeActive(state.schema.nodes.hr)(state);
   const colIndex = getColumnIndex(state);
   const rowIndex = getRowIndex(state);
   const isTableSelection = colIndex !== undefined && rowIndex !== undefined;

app/hooks/useSettingsConfig.ts

@@ -8,7 +8,6 @@ import {
   GlobeIcon,
   TeamIcon,
   BeakerIcon,
-  BuildingBlocksIcon,
   SettingsIcon,
   ExportIcon,
   ImportIcon,
@@ -40,7 +39,6 @@ const Notifications = lazy(() => import("~/scenes/Settings/Notifications"));
 const Preferences = lazy(() => import("~/scenes/Settings/Preferences"));
 const Profile = lazy(() => import("~/scenes/Settings/Profile"));
 const Security = lazy(() => import("~/scenes/Settings/Security"));
-const SelfHosted = lazy(() => import("~/scenes/Settings/SelfHosted"));
 const Shares = lazy(() => import("~/scenes/Settings/Shares"));
 const Templates = lazy(() => import("~/scenes/Settings/Templates"));
 const Zapier = lazy(() => import("~/scenes/Settings/Zapier"));
@@ -177,14 +175,6 @@ const useSettingsConfig = () => {
         icon: ExportIcon,
       },
       // Integrations
-      {
-        name: t("Self Hosted"),
-        path: integrationSettingsPath("self-hosted"),
-        component: SelfHosted,
-        enabled: can.update && !isCloudHosted,
-        group: t("Integrations"),
-        icon: BuildingBlocksIcon,
-      },
       {
         name: "Zapier",
         path: integrationSettingsPath("zapier"),

app/scenes/Document/components/Insights.tsx

@@ -144,10 +144,10 @@ function Insights() {
                     small
                   />
                 )}
-                <PaginatedList
+                <PaginatedList<User>
                   aria-label={t("Contributors")}
                   items={document.collaborators}
-                  renderItem={(model: User) => (
+                  renderItem={(model) => (
                     <ListItem
                       key={model.id}
                       title={model.name}

app/scenes/Invite.tsx

@@ -209,7 +209,9 @@ function Invite({ onSubmit }: Props) {
                   placeholder={`name@${predictedDomain}`}
                   value={invite.email}
                   required={index === 0}
+                  autoComplete="off"
                   autoFocus
+                  data-1p-ignore
                   flex
                 />
                 <StyledInput

app/scenes/Login/components/LoginDialog.tsx

@@ -39,7 +39,10 @@ export function LoginDialog() {
         maxLength={255}
         autoComplete="off"
         placeholder={t("subdomain")}
-        {...register("subdomain", { required: true, pattern: /^[a-z\d-]+$/ })}
+        {...register("subdomain", {
+          required: true,
+          pattern: /^[a-z\d-]{1,63}$/,
+        })}
       >
         <Domain>.getoutline.com</Domain>
       </Input>

app/scenes/Login/urls.ts

@@ -3,6 +3,15 @@ import { parseDomain } from "@shared/utils/domains";
 import env from "~/env";
 import Desktop from "~/utils/Desktop";
 
+function validateAndEncodeSubdomain(subdomain: string): string {
+  const encodedSubdomain = encodeURIComponent(subdomain);
+  const urlPattern = /^[a-z\d-]{1,63}$/;
+  if (!urlPattern.test(encodedSubdomain)) {
+    throw new Error("Invalid subdomain");
+  }
+  return `https://${encodedSubdomain}.getoutline.com`;
+}
+
 /**
  * If we're on a custom domain or a subdomain then the auth must point to the
  * apex (env.URL) for authentication so that the state cookie can be set and read.
@@ -36,7 +45,7 @@ export async function navigateToSubdomain(subdomain: string) {
     .toLowerCase()
     .trim()
     .replace(/^https?:\/\//, "");
-  const host = `https://${normalizedSubdomain}.getoutline.com`;
+  const host = validateAndEncodeSubdomain(normalizedSubdomain);
   await Desktop.bridge?.addCustomHost(host);
   window.location.href = host;
 }

app/scenes/Settings/ApiKeys.tsx

@@ -58,11 +58,11 @@ function ApiKeys() {
           }}
         />
       </Text>
-      <PaginatedList
+      <PaginatedList<ApiKey>
         fetch={apiKeys.fetchPage}
         items={apiKeys.orderedData}
         heading={<h2>{t("All")}</h2>}
-        renderItem={(apiKey: ApiKey) => (
+        renderItem={(apiKey) => (
           <ApiKeyListItem key={apiKey.id} apiKey={apiKey} />
         )}
       />

app/scenes/Settings/Export.tsx

@@ -48,7 +48,7 @@ function Export() {
         {t("Export data")}…
       </Button>
       <br />
-      <PaginatedList
+      <PaginatedList<FileOperation>
         items={fileOperations.exports}
         fetch={fileOperations.fetchPage}
         options={{
@@ -59,7 +59,7 @@ function Export() {
             <Trans>Recent exports</Trans>
           </h2>
         }
-        renderItem={(item: FileOperation) => (
+        renderItem={(item) => (
           <FileOperationListItem key={item.id} fileOperation={item} />
         )}
       />

app/scenes/Settings/Import.tsx

@@ -183,7 +183,7 @@ function Import() {
         ))}
       </div>
       <br />
-      <PaginatedList
+      <PaginatedList<ImportModel | FileOperation>
         items={allImports}
         fetch={fetchImports}
         heading={
@@ -191,7 +191,7 @@ function Import() {
             <Trans>Recent imports</Trans>
           </h2>
         }
-        renderItem={(item: ImportModel | FileOperation) =>
+        renderItem={(item) =>
           item instanceof ImportModel ? (
             <ImportListItem key={item.id} importModel={item} />
           ) : (

app/scenes/Settings/PersonalApiKeys.tsx

@@ -61,12 +61,12 @@ function PersonalApiKeys() {
           }}
         />
       </Text>
-      <PaginatedList
+      <PaginatedList<ApiKey>
         fetch={apiKeys.fetchPage}
         items={apiKeys.personalApiKeys}
         options={{ userId: user.id }}
         heading={<h2>{t("Personal keys")}</h2>}
-        renderItem={(apiKey: ApiKey) => (
+        renderItem={(apiKey) => (
           <ApiKeyListItem key={apiKey.id} apiKey={apiKey} />
         )}
       />

app/scenes/Settings/SelfHosted.tsx

@@ -1,140 +0,0 @@
-import find from "lodash/find";
-import { observer } from "mobx-react";
-import { BuildingBlocksIcon } from "outline-icons";
-import * as React from "react";
-import { useForm } from "react-hook-form";
-import { useTranslation } from "react-i18next";
-import { toast } from "sonner";
-import { IntegrationService, IntegrationType } from "@shared/types";
-import Integration from "~/models/Integration";
-import Button from "~/components/Button";
-import Heading from "~/components/Heading";
-import Input from "~/components/Input";
-import Scene from "~/components/Scene";
-import useStores from "~/hooks/useStores";
-import SettingRow from "./components/SettingRow";
-
-type FormData = {
-  drawIoUrl: string;
-  gristUrl: string;
-};
-
-function SelfHosted() {
-  const { integrations } = useStores();
-  const { t } = useTranslation();
-
-  const integrationDiagrams = find(integrations.orderedData, {
-    type: IntegrationType.Embed,
-    service: IntegrationService.Diagrams,
-  }) as Integration<IntegrationType.Embed> | undefined;
-
-  const integrationGrist = find(integrations.orderedData, {
-    type: IntegrationType.Embed,
-    service: IntegrationService.Grist,
-  }) as Integration<IntegrationType.Embed> | undefined;
-
-  const {
-    register,
-    reset,
-    handleSubmit: formHandleSubmit,
-    formState,
-  } = useForm<FormData>({
-    mode: "all",
-    defaultValues: {
-      drawIoUrl: integrationDiagrams?.settings.url,
-      gristUrl: integrationGrist?.settings.url,
-    },
-  });
-
-  React.useEffect(() => {
-    void integrations.fetchPage({
-      type: IntegrationType.Embed,
-    });
-  }, [integrations]);
-
-  React.useEffect(() => {
-    reset({
-      drawIoUrl: integrationDiagrams?.settings.url,
-      gristUrl: integrationGrist?.settings.url,
-    });
-  }, [integrationDiagrams, integrationGrist, reset]);
-
-  const handleSubmit = React.useCallback(
-    async (data: FormData) => {
-      try {
-        if (data.drawIoUrl) {
-          await integrations.save({
-            id: integrationDiagrams?.id,
-            type: IntegrationType.Embed,
-            service: IntegrationService.Diagrams,
-            settings: {
-              url: data.drawIoUrl,
-            },
-          });
-        } else {
-          await integrationDiagrams?.delete();
-        }
-
-        if (data.gristUrl) {
-          await integrations.save({
-            id: integrationGrist?.id,
-            type: IntegrationType.Embed,
-            service: IntegrationService.Grist,
-            settings: {
-              url: data.gristUrl,
-            },
-          });
-        } else {
-          await integrationGrist?.delete();
-        }
-
-        toast.success(t("Settings saved"));
-      } catch (err) {
-        toast.error(err.message);
-      }
-    },
-    [integrations, integrationDiagrams, integrationGrist, t]
-  );
-
-  return (
-    <Scene title={t("Self Hosted")} icon={<BuildingBlocksIcon />}>
-      <Heading>{t("Self Hosted")}</Heading>
-
-      <form onSubmit={formHandleSubmit(handleSubmit)}>
-        <SettingRow
-          label={t("Draw.io deployment")}
-          name="drawIoUrl"
-          description={t(
-            "Add your self-hosted draw.io installation url here to enable automatic embedding of diagrams within documents."
-          )}
-          border={false}
-        >
-          <Input
-            placeholder="https://app.diagrams.net/"
-            pattern="https?://.*"
-            {...register("drawIoUrl")}
-          />
-        </SettingRow>
-
-        <SettingRow
-          label={t("Grist deployment")}
-          name="gristUrl"
-          description={t("Add your self-hosted grist installation URL here.")}
-          border={false}
-        >
-          <Input
-            placeholder="https://docs.getgrist.com/"
-            pattern="https?://.*"
-            {...register("gristUrl")}
-          />
-        </SettingRow>
-
-        <Button type="submit" disabled={formState.isSubmitting}>
-          {formState.isSubmitting ? `${t("Saving")}…` : t("Save")}
-        </Button>
-      </form>
-    </Scene>
-  );
-}
-
-export default observer(SelfHosted);

app/scenes/Settings/components/GroupDialogs.tsx

@@ -268,14 +268,14 @@ export const ViewGroupMembersDialog = observer(function ({
       <Subheading>
         <Trans>Members</Trans>
       </Subheading>
-      <PaginatedList
+      <PaginatedList<User>
         items={users.inGroup(group.id)}
         fetch={groupUsers.fetchPage}
         options={{
           id: group.id,
         }}
         empty={<Empty>{t("This group has no members.")}</Empty>}
-        renderItem={(user: User) => (
+        renderItem={(user) => (
           <GroupMemberListItem
             key={user.id}
             user={user}
@@ -382,7 +382,7 @@ const AddPeopleToGroupDialog = observer(function ({
           <PlaceholderList count={5} />
         </DelayedMount>
       ) : (
-        <PaginatedList
+        <PaginatedList<User>
           empty={
             query ? (
               <Empty>{t("No people matching your search")}</Empty>
@@ -392,7 +392,7 @@ const AddPeopleToGroupDialog = observer(function ({
           }
           items={users.notInGroup(group.id, query)}
           fetch={query ? undefined : users.fetchPage}
-          renderItem={(item: User) => (
+          renderItem={(item) => (
             <GroupMemberListItem
               key={item.id}
               user={item}

app/scenes/Settings/components/ImageUpload.tsx

@@ -3,7 +3,7 @@ import { observer } from "mobx-react";
 import * as React from "react";
 import { useState, useRef } from "react";
 import AvatarEditor from "react-avatar-editor";
-import Dropzone from "react-dropzone";
+import { useDropzone } from "react-dropzone";
 import { useTranslation } from "react-i18next";
 import styled from "styled-components";
 import { s } from "@shared/styles";
@@ -12,7 +12,6 @@ import { AttachmentValidation } from "@shared/validations";
 import ButtonLarge from "~/components/ButtonLarge";
 import Flex from "~/components/Flex";
 import LoadingIndicator from "~/components/LoadingIndicator";
-import Modal from "~/components/Modal";
 import useStores from "~/hooks/useStores";
 import { compressImage } from "~/utils/compressImage";
 import { uploadFile, dataUrlToBlob } from "~/utils/files";
@@ -28,81 +27,138 @@ const ImageUpload: React.FC<Props> = ({
   onSuccess,
   onError,
   submitText,
-  borderRadius = 150,
+  borderRadius,
   children,
 }) => {
-  const { ui } = useStores();
+  const { dialogs } = useStores();
   const { t } = useTranslation();
-  submitText || t("Crop image");
 
   const [isUploading, setIsUploading] = useState(false);
   const [isCropping, setIsCropping] = useState(false);
-  const [zoom, setZoom] = useState(1);
-  const [file, setFile] = useState<File | null>(null);
 
-  const avatarEditorRef = useRef<AvatarEditor>(null);
+  const uploadImage = React.useCallback(
+    async (blob: Blob, file: File) => {
+      try {
+        const compressed = await compressImage(blob, {
+          maxHeight: 512,
+          maxWidth: 512,
+        });
+        const attachment = await uploadFile(compressed, {
+          name: file.name,
+          preset: AttachmentPreset.Avatar,
+        });
+        void onSuccess(attachment.url);
+      } catch (err) {
+        onError(err.message);
+      } finally {
+        setIsUploading(false);
+        setIsCropping(false);
+        dialogs.closeAllModals();
+      }
+    },
+    [dialogs, onSuccess, onError]
+  );
 
-  const onDropAccepted = async (files: File[]) => {
-    setIsCropping(true);
-    setFile(files[0]);
-  };
+  const handleUpload = React.useCallback(
+    (blob: Blob, file: File) => {
+      setIsUploading(true);
+      // allow the UI to update before converting the canvas to a Blob
+      // for large images this can cause the page rendering to hang.
+      setTimeout(() => uploadImage(blob, file), 0);
+    },
+    [uploadImage]
+  );
 
-  const handleCrop = () => {
-    setIsUploading(true);
-    // allow the UI to update before converting the canvas to a Blob
-    // for large images this can cause the page rendering to hang.
-    setTimeout(uploadImage, 0);
-  };
-
-  const uploadImage = async () => {
-    const canvas = avatarEditorRef.current?.getImage();
-    invariant(canvas, "canvas is not defined");
-    const imageBlob = dataUrlToBlob(canvas.toDataURL());
-
-    try {
-      const compressed = await compressImage(imageBlob, {
-        maxHeight: 512,
-        maxWidth: 512,
-      });
-      const attachment = await uploadFile(compressed, {
-        name: file!.name,
-        preset: AttachmentPreset.Avatar,
-      });
-      void onSuccess(attachment.url);
-    } catch (err) {
-      onError(err.message);
-    } finally {
-      setIsUploading(false);
-      setIsCropping(false);
-    }
-  };
-
-  const handleClose = () => {
+  const handleClose = React.useCallback(() => {
     setIsUploading(false);
     setIsCropping(false);
-  };
+  }, []);
 
-  const handleZoom = (event: React.ChangeEvent<HTMLInputElement>) => {
-    const target = event.target;
+  const onDropAccepted = React.useCallback(
+    async (files: File[]) => {
+      setIsCropping(true);
+      dialogs.openModal({
+        title: "",
+        content: (
+          <AvatarEditorDialog
+            file={files[0]}
+            onUpload={handleUpload}
+            isUploading={isUploading}
+            borderRadius={borderRadius ?? 150}
+            submitText={submitText || t("Crop image")}
+          />
+        ),
+        onClose: handleClose,
+      });
+    },
+    [
+      t,
+      dialogs,
+      handleUpload,
+      handleClose,
+      isUploading,
+      borderRadius,
+      submitText,
+    ]
+  );
 
-    if (target instanceof HTMLInputElement) {
-      setZoom(parseFloat(target.value));
-    }
-  };
+  const { getRootProps, getInputProps } = useDropzone({
+    accept: AttachmentValidation.avatarContentTypes.join(", "),
+    onDropAccepted,
+  });
 
-  const renderCropping = () => (
-    <Modal
-      onRequestClose={handleClose}
-      fullscreen={false}
-      title={<>&nbsp;</>}
-      isOpen
-    >
+  if (isCropping) {
+    return null; // onDropAccepted would have opened a modal for cropping the image.
+  }
+
+  return (
+    <div {...getRootProps()}>
+      <input {...getInputProps()} />
+      {children}
+    </div>
+  );
+};
+
+type AvatarEditorDialogProps = {
+  file: File;
+  onUpload: (blob: Blob, file: File) => void;
+  isUploading: boolean;
+  borderRadius: number;
+  submitText: string;
+};
+
+const AvatarEditorDialog: React.FC<AvatarEditorDialogProps> = observer(
+  ({ file, onUpload, isUploading, borderRadius, submitText }) => {
+    const { ui } = useStores();
+    const { t } = useTranslation();
+    const [zoom, setZoom] = useState(1);
+    const avatarEditorRef = useRef<AvatarEditor>(null);
+
+    const handleUpload = React.useCallback(() => {
+      const canvas = avatarEditorRef.current?.getImage();
+      invariant(canvas, "canvas is not defined");
+      const blob = dataUrlToBlob(canvas.toDataURL());
+      onUpload(blob, file);
+    }, [file, onUpload]);
+
+    const handleZoom = React.useCallback(
+      (event: React.ChangeEvent<HTMLInputElement>) => {
+        const target = event.target;
+
+        if (target instanceof HTMLInputElement) {
+          setZoom(parseFloat(target.value));
+        }
+      },
+      []
+    );
+
+    return (
       <Flex auto column align="center" justify="center">
         {isUploading && <LoadingIndicator />}
         <AvatarEditorContainer>
           <AvatarEditor
             ref={avatarEditorRef}
-            image={file!}
+            image={file}
             width={250}
             height={250}
             border={25}
@@ -121,31 +177,13 @@ const ImageUpload: React.FC<Props> = ({
           onChange={handleZoom}
         />
         <br />
-        <ButtonLarge fullwidth onClick={handleCrop} disabled={isUploading}>
+        <ButtonLarge fullwidth onClick={handleUpload} disabled={isUploading}>
           {isUploading ? `${t(`Uploading`)}…` : submitText}
         </ButtonLarge>
       </Flex>
-    </Modal>
-  );
-
-  if (isCropping && file) {
-    return renderCropping();
+    );
   }
-
-  return (
-    <Dropzone
-      accept={AttachmentValidation.avatarContentTypes.join(", ")}
-      onDropAccepted={onDropAccepted}
-    >
-      {({ getRootProps, getInputProps }) => (
-        <div {...getRootProps()}>
-          <input {...getInputProps()} />
-          {children}
-        </div>
-      )}
-    </Dropzone>
-  );
-};
+);
 
 const AvatarEditorContainer = styled(Flex)`
   margin-bottom: 30px;

app/scenes/Settings/components/MembersTable.tsx

@@ -2,6 +2,7 @@ import compact from "lodash/compact";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
 import styled from "styled-components";
+import Text from "@shared/components/Text";
 import User from "~/models/User";
 import { Avatar, AvatarSize } from "~/components/Avatar";
 import Badge from "~/components/Badge";
@@ -14,6 +15,7 @@ import {
 import { type Column as TableColumn } from "~/components/Table";
 import Time from "~/components/Time";
 import useCurrentUser from "~/hooks/useCurrentUser";
+import useMobile from "~/hooks/useMobile";
 import UserMenu from "~/menus/UserMenu";
 import { FILTER_HEIGHT } from "./StickyFilters";
 
@@ -27,6 +29,7 @@ type Props = Omit<TableProps<User>, "columns" | "rowHeight"> & {
 export function MembersTable({ canManage, ...rest }: Props) {
   const { t } = useTranslation();
   const currentUser = useCurrentUser();
+  const isMobile = useMobile();
 
   const columns = React.useMemo<TableColumn<User>[]>(
     () =>
@@ -38,13 +41,20 @@ export function MembersTable({ canManage, ...rest }: Props) {
           accessor: (user) => user.name,
           component: (user) => (
             <Flex align="center" gap={8}>
-              <Avatar model={user} size={AvatarSize.Large} /> {user.name}{" "}
-              {currentUser.id === user.id && `(${t("You")})`}
+              <Avatar model={user} size={AvatarSize.Large} />{" "}
+              <Flex column>
+                <Text>
+                  {user.name} {currentUser.id === user.id && `(${t("You")})`}
+                </Text>
+                {isMobile && canManage && (
+                  <Text type="tertiary">{user.email}</Text>
+                )}
+              </Flex>
             </Flex>
           ),
           width: "4fr",
         },
-        canManage
+        canManage && !isMobile
           ? {
               type: "data",
               id: "email",
@@ -54,17 +64,19 @@ export function MembersTable({ canManage, ...rest }: Props) {
               width: "4fr",
             }
           : undefined,
-        {
-          type: "data",
-          id: "lastActiveAt",
-          header: t("Last active"),
-          accessor: (user) => user.lastActiveAt,
-          component: (user) =>
-            user.lastActiveAt ? (
-              <Time dateTime={user.lastActiveAt} addSuffix />
-            ) : null,
-          width: "2fr",
-        },
+        isMobile
+          ? undefined
+          : {
+              type: "data",
+              id: "lastActiveAt",
+              header: t("Last active"),
+              accessor: (user) => user.lastActiveAt,
+              component: (user) =>
+                user.lastActiveAt ? (
+                  <Time dateTime={user.lastActiveAt} addSuffix />
+                ) : null,
+              width: "2fr",
+            },
         {
           type: "data",
           id: "role",
@@ -85,7 +97,7 @@ export function MembersTable({ canManage, ...rest }: Props) {
               {user.isSuspended && <Badge>{t("Suspended")}</Badge>}
             </Badges>
           ),
-          width: "2fr",
+          width: "80px",
         },
         canManage
           ? {
@@ -97,7 +109,7 @@ export function MembersTable({ canManage, ...rest }: Props) {
             }
           : undefined,
       ]),
-    [t, currentUser, canManage]
+    [t, currentUser, canManage, isMobile]
   );
 
   return (

app/stores/IntegrationsStore.ts

@@ -21,6 +21,13 @@ class IntegrationsStore extends Store<Integration> {
       (integration) => integration.service === IntegrationService.GitHub
     );
   }
+
+  @computed
+  get linear(): Integration<IntegrationType.Embed>[] {
+    return this.orderedData.filter(
+      (integration) => integration.service === IntegrationService.Linear
+    );
+  }
 }
 
 export default IntegrationsStore;

app/stores/base/Store.ts

@@ -99,7 +99,14 @@ export default abstract class Store<T extends Model> {
     const normalized = deburr((query ?? "").trim().toLocaleLowerCase());
 
     if (!normalized) {
-      return this.orderedData.slice(0, options?.maxResults);
+      return this.orderedData
+        .filter((item) => {
+          if ("deletedAt" in item && item.deletedAt) {
+            return false;
+          }
+          return true;
+        })
+        .slice(0, options?.maxResults);
     }
 
     return this.orderedData

app/utils/mention.ts

@@ -27,6 +27,16 @@ export const isURLMentionable = ({
       );
     }
 
+    case IntegrationService.Linear: {
+      const settings =
+        integration.settings as IntegrationSettings<IntegrationType.Embed>;
+
+      return (
+        hostname === "linear.app" &&
+        settings.linear?.workspace.key === pathParts[1] // ensure installed workspace key matches with the provided url.
+      );
+    }
+
     default:
       return false;
   }
@@ -52,6 +62,11 @@ export const determineMentionType = ({
         : undefined;
     }
 
+    case IntegrationService.Linear: {
+      const type = pathParts[2];
+      return type === "issue" ? MentionType.Issue : undefined;
+    }
+
     default:
       return;
   }

package.json

@@ -48,11 +48,11 @@
     "> 0.25%, not dead"
   ],
   "dependencies": {
-    "@aws-sdk/client-s3": "3.782.0",
-    "@aws-sdk/lib-storage": "3.782.0",
-    "@aws-sdk/s3-presigned-post": "3.782.0",
-    "@aws-sdk/s3-request-presigner": "3.782.0",
-    "@aws-sdk/signature-v4-crt": "^3.782.0",
+    "@aws-sdk/client-s3": "3.787.0",
+    "@aws-sdk/lib-storage": "3.787.0",
+    "@aws-sdk/s3-presigned-post": "3.787.0",
+    "@aws-sdk/s3-request-presigner": "3.787.0",
+    "@aws-sdk/signature-v4-crt": "^3.787.0",
     "@babel/core": "^7.26.10",
     "@babel/plugin-proposal-decorators": "^7.25.9",
     "@babel/plugin-transform-class-properties": "^7.25.9",
@@ -79,12 +79,13 @@
     "@hocuspocus/server": "1.1.2",
     "@joplin/turndown-plugin-gfm": "^1.0.49",
     "@juggle/resize-observer": "^3.4.0",
-    "@notionhq/client": "^2.2.16",
+    "@linear/sdk": "^39.0.0",
+    "@notionhq/client": "^2.3.0",
     "@octokit/auth-app": "^6.1.3",
     "@outlinewiki/koa-passport": "^4.2.1",
     "@outlinewiki/passport-azure-ad-oauth2": "^0.1.0",
     "@radix-ui/react-select": "^2.1.4",
-    "@radix-ui/react-visually-hidden": "^1.1.2",
+    "@radix-ui/react-visually-hidden": "^1.2.0",
     "@renderlesskit/react": "^0.11.0",
     "@sentry/node": "^7.120.3",
     "@sentry/react": "^7.120.3",
@@ -114,7 +115,7 @@
     "date-fns": "^3.6.0",
     "dd-trace": "^5.40.0",
     "diff": "^5.2.0",
-    "dotenv": "^16.4.7",
+    "dotenv": "^16.5.0",
     "email-providers": "^1.14.0",
     "emoji-mart": "^5.6.0",
     "emoji-regex": "^10.4.0",
@@ -173,13 +174,13 @@
     "passport-oauth2": "^1.8.0",
     "passport-slack-oauth2": "^1.2.0",
     "patch-package": "^7.0.2",
-    "pg": "^8.14.1",
+    "pg": "^8.15.6",
     "pg-tsquery": "^8.4.2",
     "pluralize": "^8.0.0",
     "png-chunks-extract": "^1.0.0",
     "polished": "^4.3.1",
     "prosemirror-codemark": "^0.4.2",
-    "prosemirror-commands": "^1.7.0",
+    "prosemirror-commands": "^1.7.1",
     "prosemirror-dropcursor": "^1.8.1",
     "prosemirror-gapcursor": "^1.3.2",
     "prosemirror-history": "^1.4.1",
@@ -187,11 +188,11 @@
     "prosemirror-keymap": "^1.2.2",
     "prosemirror-markdown": "^1.13.2",
     "prosemirror-model": "^1.25.0",
-    "prosemirror-schema-list": "^1.4.1",
+    "prosemirror-schema-list": "^1.5.1",
     "prosemirror-state": "^1.4.3",
     "prosemirror-tables": "^1.6.4",
     "prosemirror-transform": "1.10.0",
-    "prosemirror-view": "^1.38.1",
+    "prosemirror-view": "^1.39.1",
     "query-string": "^7.1.3",
     "randomstring": "1.3.1",
     "rate-limiter-flexible": "^2.4.2",
@@ -208,9 +209,9 @@
     "react-i18next": "^12.3.1",
     "react-medium-image-zoom": "5.2.13",
     "react-merge-refs": "^2.1.1",
-    "react-portal": "^4.2.2",
+    "react-portal": "^4.3.0",
     "react-router-dom": "^5.3.4",
-    "react-virtualized-auto-sizer": "^1.0.21",
+    "react-virtualized-auto-sizer": "^1.0.26",
     "react-waypoint": "^10.3.0",
     "react-window": "^1.8.11",
     "reakit": "^1.3.11",
@@ -219,7 +220,7 @@
     "refractor": "^3.6.0",
     "request-filtering-agent": "^1.1.2",
     "resolve-path": "^1.4.0",
-    "rfc6902": "^5.1.1",
+    "rfc6902": "^5.1.2",
     "sanitize-filename": "^1.6.3",
     "scroll-into-view-if-needed": "^3.1.0",
     "semver": "^7.7.1",
@@ -248,8 +249,8 @@
     "uuid": "^8.3.2",
     "validator": "13.12.0",
     "vaul": "^1.1.2",
-    "vite": "^5.4.18",
-    "vite-plugin-pwa": "^0.20.3",
+    "vite": "^6.3.3",
+    "vite-plugin-pwa": "^0.21.2",
     "winston": "^3.17.0",
     "ws": "^7.5.10",
     "y-indexeddb": "^9.0.11",
@@ -355,14 +356,14 @@
     "jest-environment-jsdom": "^29.7.0",
     "jest-fetch-mock": "^3.0.3",
     "lint-staged": "^13.3.0",
-    "nodemon": "^3.1.9",
+    "nodemon": "^3.1.10",
     "postinstall-postinstall": "^2.1.0",
     "prettier": "^2.8.8",
     "react-refresh": "^0.14.2",
     "rimraf": "^2.5.4",
-    "rollup-plugin-webpack-stats": "^2.0.3",
+    "rollup-plugin-webpack-stats": "^2.0.5",
     "terser": "^5.39.0",
-    "typescript": "^5.7.3",
+    "typescript": "^5.8.3",
     "vite-plugin-static-copy": "^0.17.0",
     "yarn-deduplicate": "^6.0.2"
   },
@@ -374,8 +375,8 @@
     "node-fetch": "^2.7.0",
     "js-yaml": "^3.14.1",
     "qs": "6.9.7",
-    "rollup": "^4.5.1",
     "prismjs": "1.30.0"
   },
-  "version": "0.83.0"
+  "version": "0.83.0",
+  "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
 }

plugins/github/server/GitHubIssueProvider.ts

@@ -0,0 +1,40 @@
+import { Endpoints } from "@octokit/types";
+import { IssueSource } from "@shared/schema";
+import { IntegrationService, IntegrationType } from "@shared/types";
+import { Integration } from "@server/models";
+import { BaseIssueProvider } from "@server/utils/BaseIssueProvider";
+import { GitHub } from "./github";
+
+// This is needed to handle Octokit paginate response type mismatch.
+type ReposForInstallation =
+  Endpoints["GET /installation/repositories"]["response"]["data"]["repositories"];
+
+export class GitHubIssueProvider extends BaseIssueProvider {
+  constructor() {
+    super(IntegrationService.GitHub);
+  }
+
+  async fetchSources(
+    integration: Integration<IntegrationType.Embed>
+  ): Promise<IssueSource[]> {
+    const client = await GitHub.authenticateAsInstallation(
+      integration.settings.github!.installation.id
+    );
+
+    const sources: IssueSource[] = [];
+
+    for await (const response of client.requestRepos()) {
+      const repos = response.data as unknown as ReposForInstallation;
+      sources.push(
+        ...repos.map<IssueSource>((repo) => ({
+          id: String(repo.id),
+          name: repo.name,
+          owner: { id: String(repo.owner.id), name: repo.owner.login },
+          service: IntegrationService.GitHub,
+        }))
+      );
+    }
+
+    return sources;
+  }
+}

plugins/github/server/api/github.ts

@@ -1,12 +1,12 @@
 import Router from "koa-router";
 import find from "lodash/find";
 import { IntegrationService, IntegrationType } from "@shared/types";
-import { parseDomain } from "@shared/utils/domains";
-import Logger from "@server/logging/Logger";
+import { createContext } from "@server/context";
+import apexAuthRedirect from "@server/middlewares/apexAuthRedirect";
 import auth from "@server/middlewares/authentication";
 import { transaction } from "@server/middlewares/transaction";
 import validate from "@server/middlewares/validate";
-import { IntegrationAuthentication, Integration, Team } from "@server/models";
+import { IntegrationAuthentication, Integration } from "@server/models";
 import { APIContext } from "@server/types";
 import { GitHubUtils } from "../../shared/GitHubUtils";
 import { GitHub } from "../github";
@@ -16,10 +16,17 @@ const router = new Router();
 
 router.get(
   "github.callback",
-  auth({
-    optional: true,
-  }),
+  auth({ optional: true }),
   validate(T.GitHubCallbackSchema),
+  apexAuthRedirect<T.GitHubCallbackReq>({
+    getTeamId: (ctx) => ctx.input.query.state,
+    getRedirectPath: (ctx, team) =>
+      GitHubUtils.callbackUrl({
+        baseUrl: team.url,
+        params: ctx.request.querystring,
+      }),
+    getErrorPath: () => GitHubUtils.errorUrl("unauthenticated"),
+  }),
   transaction(),
   async (ctx: APIContext<T.GitHubCallbackReq>) => {
     const {
@@ -42,33 +49,6 @@ router.get(
       return;
     }
 
-    // this code block accounts for the root domain being unable to
-    // access authentication for subdomains. We must forward to the appropriate
-    // subdomain to complete the oauth flow
-    if (!user) {
-      if (teamId) {
-        try {
-          const team = await Team.findByPk(teamId, {
-            rejectOnEmpty: true,
-            transaction,
-          });
-          return parseDomain(ctx.host).teamSubdomain === team.subdomain
-            ? ctx.redirect("/")
-            : ctx.redirectOnClient(
-                GitHubUtils.callbackUrl({
-                  baseUrl: team.url,
-                  params: ctx.request.querystring,
-                })
-              );
-        } catch (err) {
-          Logger.error(`Error fetching team for teamId: ${teamId}!`, err);
-          return ctx.redirect(GitHubUtils.errorUrl("unauthenticated"));
-        }
-      } else {
-        return ctx.redirect(GitHubUtils.errorUrl("unauthenticated"));
-      }
-    }
-
     const client = await GitHub.authenticateAsUser(code!, teamId);
     const installationsByUser = await client.requestAppInstallations();
     const installation = find(
@@ -88,30 +68,27 @@ router.get(
       },
       { transaction }
     );
-    await Integration.create(
-      {
-        service: IntegrationService.GitHub,
-        type: IntegrationType.Embed,
-        userId: user.id,
-        teamId: user.teamId,
-        authenticationId: authentication.id,
-        settings: {
-          github: {
-            installation: {
-              id: installationId!,
-              account: {
-                id: installation.account?.id,
-                name:
-                  // @ts-expect-error Property 'login' does not exist on type
-                  installation.account?.login,
-                avatarUrl: installation.account?.avatar_url,
-              },
+    await Integration.createWithCtx(createContext({ user, transaction }), {
+      service: IntegrationService.GitHub,
+      type: IntegrationType.Embed,
+      userId: user.id,
+      teamId: user.teamId,
+      authenticationId: authentication.id,
+      settings: {
+        github: {
+          installation: {
+            id: installationId!,
+            account: {
+              id: installation.account?.id,
+              name:
+                // @ts-expect-error Property 'login' does not exist on type
+                installation.account?.login,
+              avatarUrl: installation.account?.avatar_url,
             },
           },
         },
       },
-      { transaction }
-    );
+    });
     ctx.redirect(GitHubUtils.url);
   }
 );

plugins/github/server/github.ts

@@ -4,36 +4,55 @@ import {
   type OAuthWebFlowAuthOptions,
   type InstallationAuthOptions,
 } from "@octokit/auth-app";
+import { Endpoints, OctokitResponse } from "@octokit/types";
 import { Octokit } from "octokit";
 import pluralize from "pluralize";
 import {
   IntegrationService,
   IntegrationType,
-  JSONObject,
   UnfurlResourceType,
 } from "@shared/types";
 import Logger from "@server/logging/Logger";
 import { Integration, User } from "@server/models";
-import { UnfurlSignature } from "@server/types";
+import { UnfurlIssueAndPR, UnfurlSignature } from "@server/types";
+import { GitHubUtils } from "../shared/GitHubUtils";
 import env from "./env";
 
+type PR =
+  Endpoints["GET /repos/{owner}/{repo}/pulls/{pull_number}"]["response"]["data"];
+type Issue =
+  Endpoints["GET /repos/{owner}/{repo}/issues/{issue_number}"]["response"]["data"];
+
 const requestPlugin = (octokit: Octokit) => ({
-  requestPR: async (params: ReturnType<typeof GitHub.parseUrl>) =>
-    octokit.request(`GET /repos/{owner}/{repo}/pulls/{id}`, {
-      owner: params?.owner,
-      repo: params?.repo,
-      id: params?.id,
+  requestRepos: () =>
+    octokit.paginate.iterator(
+      octokit.rest.apps.listReposAccessibleToInstallation,
+      {
+        headers: {
+          Accept: "application/vnd.github+json",
+          "X-GitHub-Api-Version": "2022-11-28",
+        },
+      }
+    ),
+
+  requestPR: async (params: NonNullable<ReturnType<typeof GitHub.parseUrl>>) =>
+    octokit.request(`GET /repos/{owner}/{repo}/pulls/{pull_number}`, {
+      owner: params.owner,
+      repo: params.repo,
+      pull_number: params.id,
       headers: {
         Accept: "application/vnd.github.text+json",
         "X-GitHub-Api-Version": "2022-11-28",
       },
     }),
 
-  requestIssue: async (params: ReturnType<typeof GitHub.parseUrl>) =>
-    octokit.request(`GET /repos/{owner}/{repo}/issues/{id}`, {
-      owner: params?.owner,
-      repo: params?.repo,
-      id: params?.id,
+  requestIssue: async (
+    params: NonNullable<ReturnType<typeof GitHub.parseUrl>>
+  ) =>
+    octokit.request(`GET /repos/{owner}/{repo}/issues/{issue_number}`, {
+      owner: params.owner,
+      repo: params.repo,
+      issue_number: params.id,
       headers: {
         Accept: "application/vnd.github.text+json",
         "X-GitHub-Api-Version": "2022-11-28",
@@ -56,14 +75,14 @@ const requestPlugin = (octokit: Octokit) => ({
    */
   requestResource: async function requestResource(
     resource: ReturnType<typeof GitHub.parseUrl>
-  ): Promise<{ data?: JSONObject }> {
+  ): Promise<OctokitResponse<Issue | PR> | undefined> {
     switch (resource?.type) {
       case UnfurlResourceType.PR:
-        return this.requestPR(resource);
+        return this.requestPR(resource) as Promise<OctokitResponse<PR>>;
       case UnfurlResourceType.Issue:
-        return this.requestIssue(resource);
+        return this.requestIssue(resource) as Promise<OctokitResponse<Issue>>;
       default:
-        return { data: undefined };
+        return;
     }
   },
 
@@ -91,7 +110,10 @@ export class GitHub {
 
   private static appOctokit: Octokit;
 
-  private static supportedResources = Object.values(UnfurlResourceType);
+  private static supportedResources = [
+    UnfurlResourceType.Issue,
+    UnfurlResourceType.PR,
+  ];
 
   /**
    * Parses a given URL and returns resource identifiers for GitHub specific URLs
@@ -111,7 +133,7 @@ export class GitHub {
     const type = parts[3]
       ? (pluralize.singular(parts[3]) as UnfurlResourceType)
       : undefined;
-    const id = parts[4];
+    const id = Number(parts[4]);
 
     if (!type || !GitHub.supportedResources.includes(type)) {
       return;
@@ -204,14 +226,64 @@ export class GitHub {
       const client = await GitHub.authenticateAsInstallation(
         integration.settings.github!.installation.id
       );
-      const { data } = await client.requestResource(resource);
-      if (!data) {
-        return;
+
+      const res = await client.requestResource(resource);
+      if (!res) {
+        return { error: "Resource not found" };
       }
-      return { ...data, type: resource.type };
+
+      return GitHub.transformData(res.data, resource.type);
     } catch (err) {
       Logger.warn("Failed to fetch resource from GitHub", err);
-      return;
+      return { error: err.message || "Unknown error" };
     }
   };
+
+  private static transformData(data: Issue | PR, type: UnfurlResourceType) {
+    if (type === UnfurlResourceType.Issue) {
+      const issue = data as Issue;
+      return {
+        type: UnfurlResourceType.Issue,
+        url: issue.html_url,
+        id: `#${issue.number}`,
+        title: issue.title,
+        description: issue.body_text ?? null,
+        author: {
+          name: issue.user?.login ?? "",
+          avatarUrl: issue.user?.avatar_url ?? "",
+        },
+        labels: issue.labels.map((label: { name: string; color: string }) => ({
+          name: label.name,
+          color: `#${label.color}`,
+        })),
+        state: {
+          name: issue.state,
+          color: GitHubUtils.getColorForStatus(issue.state),
+        },
+        createdAt: issue.created_at,
+        transformed_unfurl: true,
+      } satisfies UnfurlIssueAndPR;
+    }
+
+    const pr = data as PR;
+    const prState = pr.merged ? "merged" : pr.state;
+    return {
+      type: UnfurlResourceType.PR,
+      url: pr.html_url,
+      id: `#${pr.number}`,
+      title: pr.title,
+      description: pr.body,
+      author: {
+        name: pr.user.login,
+        avatarUrl: pr.user.avatar_url,
+      },
+      state: {
+        name: prState,
+        color: GitHubUtils.getColorForStatus(prState, !!pr.draft),
+        draft: pr.draft,
+      },
+      createdAt: pr.created_at,
+      transformed_unfurl: true,
+    } satisfies UnfurlIssueAndPR;
+  }
 }

plugins/github/server/index.ts

@@ -1,6 +1,7 @@
 import { Minute } from "@shared/utils/time";
 import { PluginManager, Hook } from "@server/utils/PluginManager";
 import config from "../plugin.json";
+import { GitHubIssueProvider } from "./GitHubIssueProvider";
 import router from "./api/github";
 import env from "./env";
 import { GitHub } from "./github";
@@ -20,6 +21,10 @@ if (enabled) {
       type: Hook.API,
       value: router,
     },
+    {
+      type: Hook.IssueProvider,
+      value: new GitHubIssueProvider(),
+    },
     {
       type: Hook.UnfurlProvider,
       value: { unfurl: GitHub.unfurl, cacheExpiry: Minute.seconds },

plugins/github/shared/GitHubUtils.ts

@@ -45,10 +45,10 @@ export class GitHubUtils {
     return `${this.url}?install_request=true`;
   }
 
-  public static getColorForStatus(status: string) {
+  public static getColorForStatus(status: string, isDraftPR: boolean = false) {
     switch (status) {
       case "open":
-        return "#238636";
+        return isDraftPR ? "#848d97" : "#238636";
       case "done":
         return "#a371f7";
       case "closed":

plugins/iframely/server/iframely.ts

@@ -1,6 +1,6 @@
 import { JSONObject, UnfurlResourceType } from "@shared/types";
 import Logger from "@server/logging/Logger";
-import { UnfurlSignature } from "@server/types";
+import { UnfurlError, UnfurlSignature } from "@server/types";
 import fetch from "@server/utils/fetch";
 import env from "./env";
 
@@ -10,7 +10,7 @@ class Iframely {
   public static async requestResource(
     url: string,
     type = "oembed"
-  ): Promise<JSONObject | undefined> {
+  ): Promise<JSONObject | UnfurlError> {
     const isDefaultHost = env.IFRAMELY_URL === this.defaultUrl;
 
     // Cloud Iframely requires /api path, while self-hosted does not.
@@ -25,7 +25,7 @@ class Iframely {
       return await res.json();
     } catch (err) {
       Logger.error(`Error fetching data from Iframely for url: ${url}`, err);
-      return;
+      return { error: err.message || "Unknown error" };
     }
   }
 
@@ -36,7 +36,9 @@ class Iframely {
    */
   public static unfurl: UnfurlSignature = async (url: string) => {
     const data = await Iframely.requestResource(url);
-    return { ...data, type: UnfurlResourceType.OEmbed };
+    return "error" in data // In addition to our custom UnfurlError, sometimes iframely returns error in the response body.
+      ? ({ error: data.error } as UnfurlError)
+      : { ...data, type: UnfurlResourceType.OEmbed };
   };
 }
 

plugins/linear/client/Icon.tsx

@@ -0,0 +1,41 @@
+import * as React from "react";
+
+type Props = {
+  /** The size of the icon, 24px is default to match standard icons */
+  size?: number;
+  /** The color of the icon, defaults to the current text color */
+  fill?: string;
+};
+
+export default function Icon({ size = 24, fill = "currentColor" }: Props) {
+  return (
+    <svg
+      fill={fill}
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      version="1.1"
+    >
+      <path
+        d="M3.93091 12.8481C4.11753 14.6298 4.89358 16.3615 6.25902 17.727C7.62446 19.0923 9.35612 19.8684 11.1378 20.0551L3.93091 12.8481Z"
+        fillRule="evenodd"
+        clipRule="evenodd"
+      />
+      <path
+        d="M3.89929 11.5437L12.4422 20.0865C13.1671 20.0459 13.8876 19.9084 14.5827 19.6738L4.31194 9.4032C4.07743 10.0982 3.93988 10.8187 3.89929 11.5437Z"
+        fillRule="evenodd"
+        clipRule="evenodd"
+      />
+      <path
+        d="M4.67981 8.49828L15.4875 19.306C16.0482 19.0374 16.5845 18.7005 17.0837 18.2953L5.6905 6.90222C5.28537 7.40142 4.94847 7.93759 4.67981 8.49828Z"
+        fillRule="evenodd"
+        clipRule="evenodd"
+      />
+      <path
+        d="M6.29602 6.23494C9.46213 3.10852 14.5632 3.12079 17.7141 6.27173C20.865 9.42266 20.8774 14.5237 17.7509 17.6898L6.29602 6.23494Z"
+        fillRule="evenodd"
+        clipRule="evenodd"
+      />
+    </svg>
+  );
+}

plugins/linear/client/Settings.tsx

@@ -0,0 +1,140 @@
+import { observer } from "mobx-react";
+import { PlusIcon } from "outline-icons";
+import * as React from "react";
+import { useTranslation, Trans } from "react-i18next";
+import { IntegrationService } from "@shared/types";
+import { ConnectedButton } from "~/scenes/Settings/components/ConnectedButton";
+import { AvatarSize } from "~/components/Avatar";
+import Flex from "~/components/Flex";
+import Heading from "~/components/Heading";
+import List from "~/components/List";
+import ListItem from "~/components/List/Item";
+import Notice from "~/components/Notice";
+import PlaceholderText from "~/components/PlaceholderText";
+import Scene from "~/components/Scene";
+import TeamLogo from "~/components/TeamLogo";
+import Text from "~/components/Text";
+import Time from "~/components/Time";
+import env from "~/env";
+import useQuery from "~/hooks/useQuery";
+import useStores from "~/hooks/useStores";
+import LinearIcon from "./Icon";
+import { LinearConnectButton } from "./components/LinearButton";
+
+function Linear() {
+  const { integrations } = useStores();
+  const { t } = useTranslation();
+  const query = useQuery();
+  const error = query.get("error");
+  const appName = env.APP_NAME;
+
+  React.useEffect(() => {
+    void integrations.fetchAll({
+      service: IntegrationService.Linear,
+      withRelations: true,
+    });
+  }, [integrations]);
+
+  return (
+    <Scene title="Linear" icon={<LinearIcon />}>
+      <Heading>Linear</Heading>
+
+      {error === "access_denied" && (
+        <Notice>
+          <Trans>
+            Whoops, you need to accept the permissions in Linear to connect{" "}
+            {{ appName }} to your workspace. Try again?
+          </Trans>
+        </Notice>
+      )}
+      {error === "unauthenticated" && (
+        <Notice>
+          <Trans>
+            Something went wrong while authenticating your request. Please try
+            logging in again.
+          </Trans>
+        </Notice>
+      )}
+      {env.LINEAR_CLIENT_ID ? (
+        <>
+          <Text as="p">
+            <Trans>
+              Enable previews of Linear issues in documents by connecting a
+              Linear workspace to {appName}.
+            </Trans>
+          </Text>
+          {integrations.linear.length ? (
+            <>
+              <Heading as="h2">
+                <Flex justify="space-between" auto>
+                  {t("Connected")}
+                  <LinearConnectButton icon={<PlusIcon />} />
+                </Flex>
+              </Heading>
+              <List>
+                {integrations.linear.map((integration) => {
+                  const linearWorkspace =
+                    integration.settings?.linear?.workspace;
+                  const integrationCreatedBy = integration.user
+                    ? integration.user.name
+                    : undefined;
+
+                  return (
+                    <ListItem
+                      key={linearWorkspace?.id}
+                      small
+                      title={linearWorkspace?.name}
+                      subtitle={
+                        integrationCreatedBy ? (
+                          <>
+                            <Trans>Enabled by {{ integrationCreatedBy }}</Trans>{" "}
+                            &middot;{" "}
+                            <Time
+                              dateTime={integration.createdAt}
+                              relative={false}
+                              format={{ en_US: "MMMM d, y" }}
+                            />
+                          </>
+                        ) : (
+                          <PlaceholderText />
+                        )
+                      }
+                      image={
+                        <TeamLogo
+                          src={linearWorkspace?.logoUrl}
+                          size={AvatarSize.Large}
+                        />
+                      }
+                      actions={
+                        <ConnectedButton
+                          onClick={integration.delete}
+                          confirmationMessage={t(
+                            "Disconnecting will prevent previewing Linear links from this workspace in documents. Are you sure?"
+                          )}
+                        />
+                      }
+                    />
+                  );
+                })}
+              </List>
+            </>
+          ) : (
+            <p>
+              <LinearConnectButton icon={<LinearIcon />} />
+            </p>
+          )}
+        </>
+      ) : (
+        <Notice>
+          <Trans>
+            The Linear integration is currently disabled. Please set the
+            associated environment variables and restart the server to enable
+            the integration.
+          </Trans>
+        </Notice>
+      )}
+    </Scene>
+  );
+}
+
+export default observer(Linear);

plugins/linear/client/components/LinearButton.tsx

@@ -0,0 +1,23 @@
+import * as React from "react";
+import { useTranslation } from "react-i18next";
+import Button, { type Props } from "~/components/Button";
+import useCurrentTeam from "~/hooks/useCurrentTeam";
+import { redirectTo } from "~/utils/urls";
+import { LinearUtils } from "../../shared/LinearUtils";
+
+export function LinearConnectButton(props: Props<HTMLButtonElement>) {
+  const { t } = useTranslation();
+  const team = useCurrentTeam();
+
+  return (
+    <Button
+      onClick={() =>
+        redirectTo(LinearUtils.authUrl({ state: { teamId: team.id } }))
+      }
+      neutral
+      {...props}
+    >
+      {t("Connect")}
+    </Button>
+  );
+}

plugins/linear/client/index.tsx

@@ -0,0 +1,16 @@
+import * as React from "react";
+import { Hook, PluginManager } from "~/utils/PluginManager";
+import config from "../plugin.json";
+import Icon from "./Icon";
+
+PluginManager.add([
+  {
+    ...config,
+    type: Hook.Settings,
+    value: {
+      group: "Integrations",
+      icon: Icon,
+      component: React.lazy(() => import("./Settings")),
+    },
+  },
+]);

plugins/linear/plugin.json

@@ -0,0 +1,7 @@
+{
+  "id": "linear",
+  "name": "Linear",
+  "priority": 15,
+  "description": "Adds a Linear integration for link unfurling and converting links to mentions.",
+  "after": "github"
+}

plugins/linear/server/api/linear.ts

@@ -0,0 +1,93 @@
+import Router from "koa-router";
+import { IntegrationService, IntegrationType } from "@shared/types";
+import apexAuthRedirect from "@server/middlewares/apexAuthRedirect";
+import auth from "@server/middlewares/authentication";
+import { transaction } from "@server/middlewares/transaction";
+import validate from "@server/middlewares/validate";
+import { IntegrationAuthentication, Integration } from "@server/models";
+import { APIContext } from "@server/types";
+import { Linear } from "../linear";
+import UploadLinearWorkspaceLogoTask from "../tasks/UploadLinearWorkspaceLogoTask";
+import * as T from "./schema";
+import { LinearUtils } from "plugins/linear/shared/LinearUtils";
+
+const router = new Router();
+
+router.get(
+  "linear.callback",
+  auth({
+    optional: true,
+  }),
+  validate(T.LinearCallbackSchema),
+  apexAuthRedirect<T.LinearCallbackReq>({
+    getTeamId: (ctx) => LinearUtils.parseState(ctx.input.query.state)?.teamId,
+    getRedirectPath: (ctx, team) =>
+      LinearUtils.callbackUrl({
+        baseUrl: team.url,
+        params: ctx.request.querystring,
+      }),
+    getErrorPath: () => LinearUtils.errorUrl("unauthenticated"),
+  }),
+  transaction(),
+  async (ctx: APIContext<T.LinearCallbackReq>) => {
+    const { code, error } = ctx.input.query;
+    const { user } = ctx.state.auth;
+    const { transaction } = ctx.state;
+
+    // Check error after any sub-domain redirection. Otherwise, the user will be redirected to the root domain.
+    if (error) {
+      ctx.redirect(LinearUtils.errorUrl(error));
+      return;
+    }
+
+    // validation middleware ensures that code is non-null at this point.
+    const oauth = await Linear.oauthAccess(code!);
+    const workspace = await Linear.getInstalledWorkspace(oauth.access_token);
+
+    const authentication = await IntegrationAuthentication.create(
+      {
+        service: IntegrationService.Linear,
+        userId: user.id,
+        teamId: user.teamId,
+        token: oauth.access_token,
+        scopes: oauth.scope.split(" "),
+      },
+      { transaction }
+    );
+    const integration = await Integration.create<
+      Integration<IntegrationType.Embed>
+    >(
+      {
+        service: IntegrationService.Linear,
+        type: IntegrationType.Embed,
+        userId: user.id,
+        teamId: user.teamId,
+        authenticationId: authentication.id,
+        settings: {
+          linear: {
+            workspace: {
+              id: workspace.id,
+              name: workspace.name,
+              key: workspace.urlKey,
+              logoUrl: workspace.logoUrl,
+            },
+          },
+        },
+      },
+      { transaction }
+    );
+
+    transaction.afterCommit(async () => {
+      if (workspace.logoUrl) {
+        await new UploadLinearWorkspaceLogoTask().schedule({
+          integrationId: integration.id,
+          logoUrl: workspace.logoUrl,
+        });
+      }
+    });
+
+    ctx.redirect(LinearUtils.successUrl());
+  }
+);
+
+export default router;

plugins/linear/server/api/schema.ts

@@ -0,0 +1,17 @@
+import isEmpty from "lodash/isEmpty";
+import { z } from "zod";
+import { BaseSchema } from "@server/routes/api/schema";
+
+export const LinearCallbackSchema = BaseSchema.extend({
+  query: z
+    .object({
+      code: z.string().nullish(),
+      state: z.string(),
+      error: z.string().nullish(),
+    })
+    .refine((req) => !(isEmpty(req.code) && isEmpty(req.error)), {
+      message: "one of code or error is required",
+    }),
+});
+
+export type LinearCallbackReq = z.infer<typeof LinearCallbackSchema>;

plugins/linear/server/env.ts

@@ -0,0 +1,25 @@
+import { IsOptional } from "class-validator";
+import { Environment } from "@server/env";
+import { Public } from "@server/utils/decorators/Public";
+import environment from "@server/utils/environment";
+import { CannotUseWithout } from "@server/utils/validators";
+
+class LinearPluginEnvironment extends Environment {
+  /**
+   * Linear OAuth2 app client id. To enable integration with Linear.
+   */
+  @Public
+  @IsOptional()
+  public LINEAR_CLIENT_ID = this.toOptionalString(environment.LINEAR_CLIENT_ID);
+
+  /**
+   * Linear OAuth2 app client secret. To enable integration with Linear.
+   */
+  @IsOptional()
+  @CannotUseWithout("LINEAR_CLIENT_ID")
+  public LINEAR_CLIENT_SECRET = this.toOptionalString(
+    environment.LINEAR_CLIENT_SECRET
+  );
+}
+
+export default new LinearPluginEnvironment();

plugins/linear/server/index.ts

@@ -0,0 +1,32 @@
+import { Minute } from "@shared/utils/time";
+import { Hook, PluginManager } from "@server/utils/PluginManager";
+import config from "../plugin.json";
+import router from "./api/linear";
+import env from "./env";
+import { Linear } from "./linear";
+import UploadLinearWorkspaceLogoTask from "./tasks/UploadLinearWorkspaceLogoTask";
+import { uninstall } from "./uninstall";
+
+const enabled = !!env.LINEAR_CLIENT_ID && !!env.LINEAR_CLIENT_SECRET;
+
+if (enabled) {
+  PluginManager.add([
+    {
+      ...config,
+      type: Hook.API,
+      value: router,
+    },
+    {
+      type: Hook.Task,
+      value: UploadLinearWorkspaceLogoTask,
+    },
+    {
+      type: Hook.UnfurlProvider,
+      value: { unfurl: Linear.unfurl, cacheExpiry: Minute.seconds },
+    },
+    {
+      type: Hook.Uninstall,
+      value: uninstall,
+    },
+  ]);
+}

plugins/linear/server/linear.ts

@@ -0,0 +1,211 @@
+import { Issue, LinearClient, WorkflowState } from "@linear/sdk";
+import sortBy from "lodash/sortBy";
+import { z } from "zod";
+import {
+  IntegrationService,
+  IntegrationType,
+  UnfurlResourceType,
+} from "@shared/types";
+import Logger from "@server/logging/Logger";
+import { Integration } from "@server/models";
+import User from "@server/models/User";
+import { UnfurlIssueAndPR, UnfurlSignature } from "@server/types";
+import { LinearUtils } from "../shared/LinearUtils";
+import env from "./env";
+
+const AccessTokenResponseSchema = z.object({
+  access_token: z.string(),
+  token_type: z.string(),
+  expires_in: z.number(),
+  scope: z.string(),
+});
+
+export class Linear {
+  private static supportedUnfurls = [UnfurlResourceType.Issue];
+
+  static async oauthAccess(code: string) {
+    const headers = {
+      "Content-Type": "application/x-www-form-urlencoded",
+      Accept: "application/json",
+    };
+
+    const body = new URLSearchParams();
+    body.set("code", code);
+    body.set("client_id", env.LINEAR_CLIENT_ID!);
+    body.set("client_secret", env.LINEAR_CLIENT_SECRET!);
+    body.set("redirect_uri", LinearUtils.callbackUrl());
+    body.set("grant_type", "authorization_code");
+
+    const res = await fetch(LinearUtils.tokenUrl, {
+      method: "POST",
+      headers,
+      body,
+    });
+
+    return AccessTokenResponseSchema.parse(await res.json());
+  }
+
+  static async revokeAccess(accessToken: string) {
+    const headers = {
+      Authorization: `Bearer ${accessToken}`,
+    };
+
+    await fetch(LinearUtils.revokeUrl, {
+      method: "POST",
+      headers,
+    });
+  }
+
+  static async getInstalledWorkspace(accessToken: string) {
+    const client = new LinearClient({ accessToken });
+    return client.organization;
+  }
+
+  /**
+   *
+   * @param url Linear resource url
+   * @param actor User attempting to unfurl resource url
+   * @returns An object containing resource details e.g, a Linear issue details
+   */
+  static unfurl: UnfurlSignature = async (url: string, actor: User) => {
+    const resource = Linear.parseUrl(url);
+
+    if (!resource) {
+      return;
+    }
+
+    const integration = (await Integration.scope("withAuthentication").findOne({
+      where: {
+        service: IntegrationService.Linear,
+        teamId: actor.teamId,
+        "settings.linear.workspace.key": resource.workspaceKey,
+      },
+    })) as Integration<IntegrationType.Embed>;
+
+    if (!integration) {
+      return;
+    }
+
+    try {
+      const client = new LinearClient({
+        accessToken: integration.authentication.token,
+      });
+      const issue = await client.issue(resource.id);
+
+      if (!issue) {
+        return { error: "Resource not found" };
+      }
+
+      const [author, state, labels] = await Promise.all([
+        issue.creator,
+        issue.state,
+        issue.paginate(issue.labels, {}),
+      ]);
+
+      if (!author || !state || !labels) {
+        return { error: "Failed to fetch auxiliary data from Linear" };
+      }
+
+      const completionPercentage = await Linear.completionPercentage(
+        client,
+        issue,
+        state
+      );
+
+      return {
+        type: UnfurlResourceType.Issue,
+        url: issue.url,
+        id: issue.identifier,
+        title: issue.title,
+        description: issue.description ?? null,
+        author: {
+          name: author.name,
+          avatarUrl: author.avatarUrl ?? "",
+        },
+        labels: labels.map((label) => ({
+          name: label.name,
+          color: label.color,
+        })),
+        state: {
+          type: state.type,
+          name: state.name,
+          color: state.color,
+          completionPercentage,
+        },
+        createdAt: issue.createdAt.toISOString(),
+        transformed_unfurl: true,
+      } satisfies UnfurlIssueAndPR;
+    } catch (err) {
+      Logger.warn("Failed to fetch resource from Linear", err);
+      return { error: err.message || "Unknown error" };
+    }
+  };
+
+  private static async completionPercentage(
+    client: LinearClient,
+    issue: Issue,
+    state: WorkflowState
+  ) {
+    const defaultCompletionPercentage = 0.5; // fallback when we cannot determine actual value.
+
+    if (state.type !== "started") {
+      return defaultCompletionPercentage;
+    }
+
+    const team = await issue.team;
+    if (!team) {
+      return defaultCompletionPercentage;
+    }
+
+    const allStates = await client.paginate(client.workflowStates, {
+      filter: {
+        team: { id: { eq: team.id } },
+        type: { eq: "started" },
+      },
+    });
+    const states = sortBy(
+      allStates.map((s) => ({
+        name: s.name,
+        position: s.position,
+      })),
+      (s) => s.position
+    );
+
+    const idx = states.findIndex((s) => s.name === state.name);
+
+    if (idx === -1) {
+      return defaultCompletionPercentage;
+    } else if (states.length === 1) {
+      return 0.5;
+    } else if (states.length === 2) {
+      return idx === 0 ? 0.5 : 0.75;
+    } else {
+      return (idx + 1) / (states.length + 1); // add 1 to states for the "done" state.
+    }
+  }
+
+  /**
+   * Parses a given URL and returns resource identifiers for Linear specific URLs
+   *
+   * @param url URL to parse
+   * @returns {object} Containing resource identifiers - `workspaceKey`, `type`, `id` and `name`.
+   */
+  private static parseUrl(url: string) {
+    const { hostname, pathname } = new URL(url);
+    if (hostname !== "linear.app") {
+      return;
+    }
+
+    const parts = pathname.split("/");
+    const workspaceKey = parts[1];
+    const type = parts[2] ? (parts[2] as UnfurlResourceType) : undefined;
+    const id = parts[3];
+    const name = parts[4];
+
+    if (!type || !Linear.supportedUnfurls.includes(type)) {
+      return;
+    }
+
+    return { workspaceKey, type, id, name };
+  }
+}

plugins/linear/server/tasks/UploadLinearWorkspaceLogoTask.ts

@@ -0,0 +1,52 @@
+import { v4 as uuidv4 } from "uuid";
+import { IntegrationService, IntegrationType } from "@shared/types";
+import { Integration } from "@server/models";
+import { Buckets } from "@server/models/helpers/AttachmentHelper";
+import BaseTask, { TaskPriority } from "@server/queues/tasks/BaseTask";
+import FileStorage from "@server/storage/files";
+
+type Props = {
+  /** The integrationId to operate on */
+  integrationId: string;
+  /** The original logoUrl from Linear */
+  logoUrl: string;
+};
+
+/**
+ * A task that uploads the provided logoUrl to storage and updates the
+ * Linear integration record with the new url.
+ */
+export default class UploadLinearWorkspaceLogoTask extends BaseTask<Props> {
+  public async perform(props: Props) {
+    const integration = await Integration.scope("withAuthentication").findByPk<
+      Integration<IntegrationType.Embed>
+    >(props.integrationId);
+    if (!integration || integration.service !== IntegrationService.Linear) {
+      return;
+    }
+
+    const res = await FileStorage.storeFromUrl(
+      props.logoUrl,
+      `${Buckets.avatars}/${integration.teamId}/${uuidv4()}`,
+      "public-read",
+      {
+        headers: {
+          Authorization: `Bearer ${integration.authentication.token}`,
+        },
+      }
+    );
+
+    if (res?.url) {
+      integration.settings.linear!.workspace.logoUrl = res.url;
+      integration.changed("settings", true);
+      await integration.save();
+    }
+  }
+
+  public get options() {
+    return {
+      attempts: 3,
+      priority: TaskPriority.Normal,
+    };
+  }
+}

plugins/linear/server/uninstall.ts

@@ -0,0 +1,25 @@
+import { IntegrationService, IntegrationType } from "@shared/types";
+import Logger from "@server/logging/Logger";
+import { Integration } from "@server/models";
+import { Linear } from "./linear";
+
+export async function uninstall(
+  integration: Integration<IntegrationType.Embed>
+) {
+  if (integration.service !== IntegrationService.Linear) {
+    return;
+  }
+
+  const authentication = await integration.$get("authentication");
+
+  if (!authentication) {
+    return;
+  }
+
+  try {
+    await Linear.revokeAccess(authentication.token);
+  } catch (err) {
+    // suppress error since this is a best-effort operation.
+    Logger.error("Failed to revoke Linear access token", err);
+  }
+}

plugins/linear/shared/LinearUtils.ts

@@ -0,0 +1,53 @@
+import queryString from "query-string";
+import env from "@shared/env";
+import { integrationSettingsPath } from "@shared/utils/routeHelpers";
+
+export type OAuthState = {
+  teamId: string;
+};
+
+export class LinearUtils {
+  private static oauthScopes = "read,issues:create";
+
+  public static tokenUrl = "https://api.linear.app/oauth/token";
+  public static revokeUrl = "https://api.linear.app/oauth/revoke";
+  private static authBaseUrl = "https://linear.app/oauth/authorize";
+
+  private static settingsUrl = integrationSettingsPath("linear");
+
+  static parseState(state: string): OAuthState {
+    return JSON.parse(state);
+  }
+
+  static successUrl() {
+    return this.settingsUrl;
+  }
+
+  static errorUrl(error: string) {
+    return `${this.settingsUrl}?error=${error}`;
+  }
+
+  static callbackUrl(
+    { baseUrl, params }: { baseUrl: string; params?: string } = {
+      baseUrl: `${env.URL}`,
+      params: undefined,
+    }
+  ) {
+    return params
+      ? `${baseUrl}/api/linear.callback?${params}`
+      : `${baseUrl}/api/linear.callback`;
+  }
+
+  static authUrl({ state }: { state: OAuthState }) {
+    const params = {
+      client_id: env.LINEAR_CLIENT_ID,
+      redirect_uri: this.callbackUrl(),
+      state: JSON.stringify(state),
+      scope: this.oauthScopes,
+      response_type: "code",
+      prompt: "consent",
+      actor: "app",
+    };
+    return `${this.authBaseUrl}?${queryString.stringify(params)}`;
+  }
+}

plugins/notion/server/api/notion.ts

@@ -1,11 +1,10 @@
 import Router from "koa-router";
 import { IntegrationService, IntegrationType } from "@shared/types";
-import { parseDomain } from "@shared/utils/domains";
-import Logger from "@server/logging/Logger";
+import apexAuthRedirect from "@server/middlewares/apexAuthRedirect";
 import auth from "@server/middlewares/authentication";
 import { transaction } from "@server/middlewares/transaction";
 import validate from "@server/middlewares/validate";
-import { Integration, IntegrationAuthentication, Team } from "@server/models";
+import { Integration, IntegrationAuthentication } from "@server/models";
 import { APIContext } from "@server/types";
 import { NotionClient } from "../notion";
 import * as T from "./schema";
@@ -17,49 +16,21 @@ router.get(
   "notion.callback",
   auth({ optional: true }),
   validate(T.NotionCallbackSchema),
+  apexAuthRedirect<T.NotionCallbackReq>({
+    getTeamId: (ctx) => NotionUtils.parseState(ctx.input.query.state)?.teamId,
+    getRedirectPath: (ctx, team) =>
+      NotionUtils.callbackUrl({
+        baseUrl: team.url,
+        params: ctx.request.querystring,
+      }),
+    getErrorPath: () => NotionUtils.errorUrl("unauthenticated"),
+  }),
   transaction(),
   async (ctx: APIContext<T.NotionCallbackReq>) => {
-    const { code, state, error } = ctx.input.query;
+    const { code, error } = ctx.input.query;
     const { user } = ctx.state.auth;
     const { transaction } = ctx.state;
 
-    let parsedState;
-    try {
-      parsedState = NotionUtils.parseState(state);
-    } catch {
-      ctx.redirect(NotionUtils.errorUrl("invalid_state"));
-      return;
-    }
-
-    const { teamId } = parsedState;
-
-    // This code block accounts for the root domain being unable to access authentication for subdomains.
-    // We must forward to the appropriate subdomain to complete the oauth flow.
-    if (!user) {
-      if (teamId) {
-        try {
-          const team = await Team.findByPk(teamId, {
-            rejectOnEmpty: true,
-            transaction,
-          });
-
-          return parseDomain(ctx.host).teamSubdomain === team.subdomain
-            ? ctx.redirect("/")
-            : ctx.redirectOnClient(
-                NotionUtils.callbackUrl({
-                  baseUrl: team.url,
-                  params: ctx.request.querystring,
-                })
-              );
-        } catch (err) {
-          Logger.error(`Error fetching team for teamId: ${teamId}!`, err);
-          return ctx.redirect(NotionUtils.errorUrl("unauthenticated"));
-        }
-      } else {
-        return ctx.redirect(NotionUtils.errorUrl("unauthenticated"));
-      }
-    }
-
     // Check error after any sub-domain redirection. Otherwise, the user will be redirected to the root domain.
     if (error) {
       ctx.redirect(NotionUtils.errorUrl(error));

plugins/notion/server/notion.ts

@@ -13,9 +13,13 @@ import {
   RichTextItemResponse,
 } from "@notionhq/client/build/src/api-endpoints";
 import { RateLimit } from "async-sema";
+import emojiRegex from "emoji-regex";
 import compact from "lodash/compact";
+import truncate from "lodash/truncate";
 import { z } from "zod";
 import { Second } from "@shared/utils/time";
+import { isUrl } from "@shared/utils/urls";
+import { CollectionValidation, DocumentValidation } from "@shared/validations";
 import { NotionUtils } from "../shared/NotionUtils";
 import { Block, Page, PageType } from "../shared/types";
 import env from "./env";
@@ -37,7 +41,16 @@ const AccessTokenResponseSchema = z.object({
   bot_id: z.string(),
   workspace_id: z.string(),
   workspace_name: z.string().nullish(),
-  workspace_icon: z.string().url().nullish(),
+  workspace_icon: z
+    .string()
+    .nullish()
+    .transform((val) => {
+      const emojiRegexp = emojiRegex();
+      if (val && (isUrl(val) || emojiRegexp.test(val))) {
+        return val;
+      }
+      return undefined;
+    }),
 });
 
 export class NotionClient {
@@ -105,7 +118,9 @@ export class NotionClient {
           pages.push({
             type: item.object === "page" ? PageType.Page : PageType.Database,
             id: item.id,
-            name: this.parseTitle(item),
+            name: this.parseTitle(item, {
+              maxLength: CollectionValidation.maxNameLength,
+            }),
             emoji: this.parseEmoji(item),
           });
         }
@@ -118,14 +133,22 @@ export class NotionClient {
     return pages;
   }
 
-  async fetchPage(pageId: string) {
-    const pageInfo = await this.fetchPageInfo(pageId);
+  async fetchPage(
+    pageId: string,
+    { titleMaxLength }: { titleMaxLength: number }
+  ) {
+    const pageInfo = await this.fetchPageInfo(pageId, { titleMaxLength });
     const blocks = await this.fetchBlockChildren(pageId);
     return { ...pageInfo, blocks };
   }
 
-  async fetchDatabase(databaseId: string) {
-    const databaseInfo = await this.fetchDatabaseInfo(databaseId);
+  async fetchDatabase(
+    databaseId: string,
+    { titleMaxLength }: { titleMaxLength: number }
+  ) {
+    const databaseInfo = await this.fetchDatabaseInfo(databaseId, {
+      titleMaxLength,
+    });
     const pages = await this.queryDatabase(databaseId);
     return { ...databaseInfo, pages };
   }
@@ -151,7 +174,6 @@ export class NotionClient {
       cursor = response.next_cursor ?? undefined;
     }
 
-    // Recursive fetch when direct children have their own children.
     await Promise.all(
       blocks.map(async (block) => {
         if (
@@ -192,7 +214,9 @@ export class NotionClient {
           return {
             type: PageType.Page,
             id: item.id,
-            name: this.parseTitle(item),
+            name: this.parseTitle(item, {
+              maxLength: DocumentValidation.maxTitleLength,
+            }),
             emoji: this.parseEmoji(item),
           };
         })
@@ -207,7 +231,10 @@ export class NotionClient {
     return pages;
   }
 
-  private async fetchPageInfo(pageId: string): Promise<PageInfo> {
+  private async fetchPageInfo(
+    pageId: string,
+    { titleMaxLength }: { titleMaxLength: number }
+  ): Promise<PageInfo> {
     await this.limiter();
     const page = (await this.client.pages.retrieve({
       page_id: pageId,
@@ -216,7 +243,9 @@ export class NotionClient {
     const author = await this.fetchUsername(page.created_by.id);
 
     return {
-      title: this.parseTitle(page),
+      title: this.parseTitle(page, {
+        maxLength: titleMaxLength,
+      }),
       emoji: this.parseEmoji(page),
       author: author ?? undefined,
       createdAt: !page.created_time ? undefined : new Date(page.created_time),
@@ -226,7 +255,10 @@ export class NotionClient {
     };
   }
 
-  private async fetchDatabaseInfo(databaseId: string): Promise<PageInfo> {
+  private async fetchDatabaseInfo(
+    databaseId: string,
+    { titleMaxLength }: { titleMaxLength: number }
+  ): Promise<PageInfo> {
     await this.limiter();
     const database = (await this.client.databases.retrieve({
       database_id: databaseId,
@@ -235,7 +267,9 @@ export class NotionClient {
     const author = await this.fetchUsername(database.created_by.id);
 
     return {
-      title: this.parseTitle(database),
+      title: this.parseTitle(database, {
+        maxLength: titleMaxLength,
+      }),
       emoji: this.parseEmoji(database),
       author: author ?? undefined,
       createdAt: !database.created_time
@@ -256,12 +290,12 @@ export class NotionClient {
         return user.name;
       }
 
-      // bot belongs to a user, get the user's name.
+      // bot belongs to a user, get the user's name
       if (user.bot.owner.type === "user" && isFullUser(user.bot.owner.user)) {
         return user.bot.owner.user.name;
       }
 
-      // bot belongs to a workspace, fallback to bot's name.
+      // bot belongs to a workspace, fallback to bot's name
       return user.name;
     } catch (error) {
       // Handle the case where a user can't be found
@@ -275,7 +309,12 @@ export class NotionClient {
     }
   }
 
-  private parseTitle(item: PageObjectResponse | DatabaseObjectResponse) {
+  private parseTitle(
+    item: PageObjectResponse | DatabaseObjectResponse,
+    {
+      maxLength = DocumentValidation.maxTitleLength,
+    }: { maxLength?: number } = {}
+  ) {
     let richTexts: RichTextItemResponse[];
 
     if (item.object === "page") {
@@ -287,7 +326,10 @@ export class NotionClient {
       richTexts = item.title;
     }
 
-    return richTexts.map((richText) => richText.plain_text).join("");
+    const title = richTexts.map((richText) => richText.plain_text).join("");
+
+    // Truncate title to fit within validation limits
+    return truncate(title, { length: maxLength });
   }
 
   private parseEmoji(item: PageObjectResponse | DatabaseObjectResponse) {

plugins/notion/server/processors/NotionImportsProcessor.ts

@@ -66,6 +66,6 @@ export class NotionImportsProcessor extends ImportsProcessor<IntegrationService.
   protected async scheduleTask(
     importTask: ImportTask<IntegrationService.Notion>
   ): Promise<void> {
-    await NotionAPIImportTask.schedule({ importTaskId: importTask.id });
+    await new NotionAPIImportTask().schedule({ importTaskId: importTask.id });
   }
 }

plugins/notion/server/tasks/NotionAPIImportTask.ts

@@ -2,6 +2,7 @@ import { APIResponseError, APIErrorCode } from "@notionhq/client";
 import { ImportTaskInput, ImportTaskOutput } from "@shared/schema";
 import { IntegrationService, ProsemirrorDoc } from "@shared/types";
 import { ProsemirrorHelper } from "@shared/utils/ProsemirrorHelper";
+import { CollectionValidation, DocumentValidation } from "@shared/validations";
 import Logger from "@server/logging/Logger";
 import { Integration } from "@server/models";
 import ImportTask from "@server/models/ImportTask";
@@ -76,7 +77,7 @@ export default class NotionAPIImportTask extends APIImportTask<IntegrationServic
   protected async scheduleNextTask(
     importTask: ImportTask<IntegrationService.Notion>
   ) {
-    await NotionAPIImportTask.schedule({ importTaskId: importTask.id });
+    await new NotionAPIImportTask().schedule({ importTaskId: importTask.id });
     return;
   }
 
@@ -95,12 +96,17 @@ export default class NotionAPIImportTask extends APIImportTask<IntegrationServic
     client: NotionClient;
   }): Promise<ParsePageOutput | null> {
     const collectionExternalId = item.collectionExternalId ?? item.externalId;
+    const titleMaxLength =
+      item.externalId === collectionExternalId // This means it's a root page which will be imported as a collection
+        ? CollectionValidation.maxNameLength
+        : DocumentValidation.maxTitleLength;
 
     try {
       // Convert Notion database to an empty page with "pages in database" as its children.
       if (item.type === PageType.Database) {
         const { pages, ...databaseInfo } = await client.fetchDatabase(
-          item.externalId
+          item.externalId,
+          { titleMaxLength }
         );
 
         return {
@@ -115,7 +121,9 @@ export default class NotionAPIImportTask extends APIImportTask<IntegrationServic
         };
       }
 
-      const { blocks, ...pageInfo } = await client.fetchPage(item.externalId);
+      const { blocks, ...pageInfo } = await client.fetchPage(item.externalId, {
+        titleMaxLength,
+      });
 
       return {
         ...pageInfo,

plugins/slack/server/auth/slack.ts

@@ -4,16 +4,15 @@ import Router from "koa-router";
 import { Profile } from "passport";
 import { Strategy as SlackStrategy } from "passport-slack-oauth2";
 import { IntegrationService, IntegrationType } from "@shared/types";
-import { parseDomain } from "@shared/utils/domains";
 import accountProvisioner from "@server/commands/accountProvisioner";
 import { ValidationError } from "@server/errors";
+import apexAuthRedirect from "@server/middlewares/apexAuthRedirect";
 import auth from "@server/middlewares/authentication";
 import passportMiddleware from "@server/middlewares/passport";
 import validate from "@server/middlewares/validate";
 import {
   IntegrationAuthentication,
   Integration,
-  Team,
   User,
   Collection,
 } from "@server/models";
@@ -126,6 +125,15 @@ if (env.SLACK_CLIENT_ID && env.SLACK_CLIENT_SECRET) {
     "slack.post",
     auth({ optional: true }),
     validate(T.SlackPostSchema),
+    apexAuthRedirect<T.SlackPostReq>({
+      getTeamId: (ctx) => SlackUtils.parseState(ctx.input.query.state)?.teamId,
+      getRedirectPath: (ctx, team) =>
+        SlackUtils.connectUrl({
+          baseUrl: team.url,
+          params: ctx.request.querystring,
+        }),
+      getErrorPath: () => SlackUtils.errorUrl("unauthenticated"),
+    }),
     async (ctx: APIContext<T.SlackPostReq>) => {
       const { code, error, state } = ctx.input.query;
       const { user } = ctx.state.auth;
@@ -144,31 +152,7 @@ if (env.SLACK_CLIENT_ID && env.SLACK_CLIENT_SECRET) {
         throw ValidationError("Invalid state");
       }
 
-      const { teamId, collectionId, type } = parsedState;
-
-      // This code block accounts for the root domain being unable to access authentication for
-      // subdomains. We must forward to the appropriate subdomain to complete the OAuth flow.
-      if (!user) {
-        if (teamId) {
-          try {
-            const team = await Team.findByPk(teamId, {
-              rejectOnEmpty: true,
-            });
-            return parseDomain(ctx.host).teamSubdomain === team.subdomain
-              ? ctx.redirect("/")
-              : ctx.redirectOnClient(
-                  SlackUtils.connectUrl({
-                    baseUrl: team.url,
-                    params: ctx.request.querystring,
-                  })
-                );
-          } catch (err) {
-            return ctx.redirect(SlackUtils.errorUrl("unauthenticated"));
-          }
-        } else {
-          return ctx.redirect(SlackUtils.errorUrl("unauthenticated"));
-        }
-      }
+      const { collectionId, type } = parsedState;
 
       switch (type) {
         case IntegrationType.Post: {

plugins/storage/server/api/files.test.ts

@@ -277,6 +277,35 @@ describe("#files.get", () => {
     );
   });
 
+  it("should succeed with status 200 ok when avatar is requested using key", async () => {
+    const user = await buildUser();
+    const key = path.join("avatars", user.id, uuidV4());
+    const attachment = await buildAttachment({
+      key,
+      teamId: user.teamId,
+      userId: user.id,
+      contentType: "image/jpg",
+      acl: "public-read",
+    });
+
+    await attachment.destroy({
+      hooks: false,
+    });
+
+    ensureDirSync(
+      path.dirname(path.join(env.FILE_STORAGE_LOCAL_ROOT_DIR, key))
+    );
+
+    copyFileSync(
+      path.resolve(__dirname, "..", "test", "fixtures", "avatar.jpg"),
+      path.join(env.FILE_STORAGE_LOCAL_ROOT_DIR, key)
+    );
+
+    const res = await server.get(`/api/files.get?key=${key}`);
+    expect(res.status).toEqual(200);
+    expect(res.headers.get("Content-Disposition")).toEqual("attachment");
+  });
+
   it("should succeed with status 200 ok when avatar is requested using key", async () => {
     const user = await buildUser();
     const key = path.join("avatars", user.id, uuidV4());

plugins/storage/server/api/files.ts

@@ -78,17 +78,13 @@ router.get(
     const { isPublicBucket, fileName } = AttachmentHelper.parseKey(key);
     const skipAuthorize = isPublicBucket || isSignedRequest;
     const cacheHeader = "max-age=604800, immutable";
-
-    const attachment = await Attachment.findOne({
-      where: { key },
-    });
-
-    // Attachment is requested with a key, but it was not found
-    if (!attachment && !!ctx.input.query.key) {
-      throw NotFoundError();
-    }
+    const attachment = await Attachment.findByKey(key);
 
     if (!skipAuthorize) {
+      if (!attachment && !!ctx.input.query.key) {
+        throw NotFoundError();
+      }
+
       authorize(actor, "read", attachment);
     }
 
@@ -100,6 +96,7 @@ router.get(
     ctx.set("Accept-Ranges", "bytes");
     ctx.set("Cache-Control", cacheHeader);
     ctx.set("Content-Type", contentType);
+    ctx.set("Content-Security-Policy", "sandbox");
     ctx.attachment(fileName, {
       type: forceDownload
         ? "attachment"

plugins/webhooks/client/Settings.tsx

@@ -52,18 +52,18 @@ function Webhooks() {
           in near real-time.
         </Trans>
       </Text>
-      <PaginatedList
+      <PaginatedList<WebhookSubscription>
         fetch={webhookSubscriptions.fetchPage}
         items={webhookSubscriptions.enabled}
         heading={<h2>{t("Active")}</h2>}
-        renderItem={(webhook: WebhookSubscription) => (
+        renderItem={(webhook) => (
           <WebhookSubscriptionListItem key={webhook.id} webhook={webhook} />
         )}
       />
-      <PaginatedList
+      <PaginatedList<WebhookSubscription>
         items={webhookSubscriptions.disabled}
         heading={<h2>{t("Inactive")}</h2>}
-        renderItem={(webhook: WebhookSubscription) => (
+        renderItem={(webhook) => (
           <WebhookSubscriptionListItem key={webhook.id} webhook={webhook} />
         )}
       />

plugins/webhooks/server/processors/WebhookProcessor.test.ts

@@ -29,8 +29,12 @@ describe("WebhookProcessor", () => {
 
     await processor.perform(event);
 
-    expect(DeliverWebhookTask.schedule).toHaveBeenCalled();
-    expect(DeliverWebhookTask.schedule).toHaveBeenCalledWith({
+    expect(
+      jest.mocked(DeliverWebhookTask.prototype.schedule)
+    ).toHaveBeenCalled();
+    expect(
+      jest.mocked(DeliverWebhookTask.prototype.schedule)
+    ).toHaveBeenCalledWith({
       event,
       subscriptionId: subscription.id,
     });
@@ -53,7 +57,9 @@ describe("WebhookProcessor", () => {
 
     await processor.perform(event);
 
-    expect(DeliverWebhookTask.schedule).toHaveBeenCalledTimes(0);
+    expect(
+      jest.mocked(DeliverWebhookTask.prototype.schedule)
+    ).toHaveBeenCalledTimes(0);
   });
 
   it("it schedules a delivery for the event for each subscription", async () => {
@@ -79,13 +85,21 @@ describe("WebhookProcessor", () => {
 
     await processor.perform(event);
 
-    expect(DeliverWebhookTask.schedule).toHaveBeenCalled();
-    expect(DeliverWebhookTask.schedule).toHaveBeenCalledTimes(2);
-    expect(DeliverWebhookTask.schedule).toHaveBeenCalledWith({
+    expect(
+      jest.mocked(DeliverWebhookTask.prototype.schedule)
+    ).toHaveBeenCalled();
+    expect(
+      jest.mocked(DeliverWebhookTask.prototype.schedule)
+    ).toHaveBeenCalledTimes(2);
+    expect(
+      jest.mocked(DeliverWebhookTask.prototype.schedule)
+    ).toHaveBeenCalledWith({
       event,
       subscriptionId: subscription.id,
     });
-    expect(DeliverWebhookTask.schedule).toHaveBeenCalledWith({
+    expect(
+      jest.mocked(DeliverWebhookTask.prototype.schedule)
+    ).toHaveBeenCalledWith({
       event,
       subscriptionId: subscriptionTwo.id,
     });

plugins/webhooks/server/processors/WebhookProcessor.ts

@@ -24,7 +24,10 @@ export default class WebhookProcessor extends BaseProcessor {
 
     await Promise.all(
       applicableSubscriptions.map((subscription) =>
-        DeliverWebhookTask.schedule({ event, subscriptionId: subscription.id })
+        new DeliverWebhookTask().schedule({
+          event,
+          subscriptionId: subscription.id,
+        })
       )
     );
   }

server/commands/documentMover.ts

@@ -24,7 +24,7 @@ type Props = {
   /** Position of moved document within document structure */
   index?: number;
   /** The IP address of the user moving the document */
-  ip: string;
+  ip: string | null;
   /** The database transaction to run within */
   transaction?: Transaction;
 };

server/commands/documentPermanentDeleter.test.ts

@@ -4,9 +4,11 @@ import DeleteAttachmentTask from "@server/queues/tasks/DeleteAttachmentTask";
 import { buildAttachment, buildDocument } from "@server/test/factories";
 import documentPermanentDeleter from "./documentPermanentDeleter";
 
-jest.mock("@server/queues/tasks/DeleteAttachmentTask", () => ({
-  schedule: jest.fn(),
-}));
+jest.mock("@server/queues/tasks/DeleteAttachmentTask");
+
+beforeEach(() => {
+  jest.resetAllMocks();
+});
 
 describe("documentPermanentDeleter", () => {
   it("should destroy documents", async () => {
@@ -60,7 +62,9 @@ describe("documentPermanentDeleter", () => {
     await document.save();
     const countDeletedDoc = await documentPermanentDeleter([document]);
     expect(countDeletedDoc).toEqual(1);
-    expect(DeleteAttachmentTask.schedule).toHaveBeenCalledTimes(2);
+    expect(
+      jest.mocked(DeleteAttachmentTask.prototype.schedule)
+    ).toHaveBeenCalledTimes(2);
     expect(
       await Document.unscoped().count({
         where: {

server/commands/documentPermanentDeleter.ts

@@ -67,7 +67,7 @@ export default async function documentPermanentDeleter(documents: Document[]) {
             "commands",
             `Attachment ${attachmentId} scheduled for deletion`
           );
-          await DeleteAttachmentTask.schedule({
+          await new DeleteAttachmentTask().schedule({
             attachmentId,
             teamId: document.teamId,
           });

server/commands/userSuspender.ts

@@ -56,5 +56,5 @@ export default async function userSuspender({
     }
   );
 
-  await CleanupDemotedUserTask.schedule({ userId: user.id });
+  await new CleanupDemotedUserTask().schedule({ userId: user.id });
 }

server/middlewares/apexAuthRedirect.ts

@@ -0,0 +1,54 @@
+import { Next } from "koa";
+import { parseDomain } from "@shared/utils/domains";
+import { Team } from "@server/models";
+import { APIContext } from "@server/types";
+
+/**
+ * An authentication middleware that should be used on routes that return from external auth flows
+ * to the apex domain. In these cases the user will be redirected to the correct subdomain where
+ * they are authenticated.
+ *
+ * @param options Options for the middleware
+ * @returns Koa middleware function
+ */
+export default function apexAuthRedirect<T>({
+  getTeamId,
+  getRedirectPath,
+  getErrorPath,
+}: {
+  /** Get the team ID for the current request */
+  getTeamId: (ctx: APIContext<T>) => string | null | undefined;
+  /** Get the redirect URL for the given team ID */
+  getRedirectPath: (ctx: APIContext<T>, team: Team) => string;
+  /** Get the error URL for the current request */
+  getErrorPath: (ctx: APIContext<T>) => string;
+}) {
+  return async function apexAuthRedirectMiddleware(
+    ctx: APIContext<T>,
+    next: Next
+  ) {
+    const { user } = ctx.state.auth;
+    if (user) {
+      return next();
+    }
+
+    const teamId = getTeamId(ctx);
+
+    if (teamId) {
+      try {
+        const team = await Team.findByPk(teamId, {
+          attributes: ["id", "subdomain"],
+          rejectOnEmpty: true,
+        });
+
+        return parseDomain(ctx.host).teamSubdomain === team.subdomain
+          ? ctx.redirect("/")
+          : ctx.redirectOnClient(getRedirectPath(ctx, team));
+      } catch (err) {
+        return ctx.redirect(getErrorPath(ctx));
+      }
+    } else {
+      return ctx.redirect(getErrorPath(ctx));
+    }
+  };
+}

server/migrations/20250409184249-add-issueSources-to-integrations.js

@@ -0,0 +1,15 @@
+"use strict";
+
+/** @type {import('sequelize-cli').Migration} */
+module.exports = {
+  async up(queryInterface, Sequelize) {
+    queryInterface.addColumn("integrations", "issueSources", {
+      type: Sequelize.JSONB,
+      allowNull: true,
+    });
+  },
+
+  async down(queryInterface, Sequelize) {
+    queryInterface.removeColumn("integrations", "issueSources");
+  },
+};

server/models/Attachment.ts

@@ -5,6 +5,7 @@ import {
   InferAttributes,
   InferCreationAttributes,
   QueryTypes,
+  FindOptions,
 } from "sequelize";
 import {
   BeforeDestroy,
@@ -164,6 +165,20 @@ class Attachment extends IdModel<
 
   // static methods
 
+  /**
+   * Find an attachment by its key.
+   *
+   * @param key - The key of the attachment to find.
+   * @param options - Additional options for the query.
+   * @returns A promise resolving to the attachment with the given key, or null if not found.
+   */
+  static async findByKey(
+    key: string,
+    options?: FindOptions<Attachment>
+  ): Promise<Attachment | null> {
+    return this.findOne({ where: { key }, ...options });
+  }
+
   /**
    * Get the total size of all attachments for a given team.
    *

server/models/Integration.ts

@@ -13,6 +13,7 @@ import {
   IsIn,
   AfterDestroy,
 } from "sequelize-typescript";
+import { IssueSource } from "@shared/schema";
 import { IntegrationType, IntegrationService } from "@shared/types";
 import type { IntegrationSettings } from "@shared/types";
 import Collection from "@server/models/Collection";
@@ -53,6 +54,9 @@ class Integration<T = unknown> extends ParanoidModel<
   @Column(DataType.ARRAY(DataType.STRING))
   events: string[];
 
+  @Column(DataType.JSONB)
+  issueSources: IssueSource[] | null;
+
   // associations
 
   @BelongsTo(() => User, "userId")

server/models/Team.ts

@@ -408,7 +408,7 @@ class Team extends ParanoidModel<
       });
 
       if (attachment) {
-        await DeleteAttachmentTask.schedule({
+        await new DeleteAttachmentTask().schedule({
           attachmentId: attachment.id,
           teamId: model.id,
         });

server/models/User.ts

@@ -717,7 +717,7 @@ class User extends ParanoidModel<
       });
 
       if (attachment) {
-        await DeleteAttachmentTask.schedule({
+        await new DeleteAttachmentTask().schedule({
           attachmentId: attachment.id,
           teamId: model.teamId,
         });

server/models/helpers/NotificationHelper.test.ts

@@ -251,6 +251,10 @@ describe("NotificationHelper", () => {
         userId: subscribedUser.id,
         collectionId: document.collectionId!,
       });
+      await buildSubscription({
+        userId: subscribedUser.id,
+        documentId: document.id,
+      });
 
       const recipients =
         await NotificationHelper.getDocumentNotificationRecipients({

server/models/helpers/NotificationHelper.ts

@@ -1,4 +1,5 @@
 import uniq from "lodash/uniq";
+import uniqBy from "lodash/uniqBy";
 import { Op } from "sequelize";
 import {
   NotificationEventType,
@@ -187,7 +188,6 @@ export default class NotificationHelper {
       });
     } else {
       const subscriptions = await Subscription.findAll({
-        attributes: ["userId"],
         where: {
           userId: {
             [Op.ne]: actorId,
@@ -206,17 +206,19 @@ export default class NotificationHelper {
         ],
       });
 
-      recipients = subscriptions.map((s) => s.user);
+      recipients = uniqBy(
+        subscriptions.map((s) => s.user),
+        (user) => user.id
+      );
     }
 
-    recipients = recipients.filter((recipient) =>
-      recipient.subscribedToEventType(notificationType)
-    );
-
     const filtered = [];
 
     for (const recipient of recipients) {
-      if (recipient.isSuspended) {
+      if (
+        recipient.isSuspended ||
+        !recipient.subscribedToEventType(notificationType)
+      ) {
         continue;
       }
 

server/policies/team.test.ts

@@ -57,7 +57,7 @@ describe("policies/team", () => {
     const permissions = new Map<UserRole, boolean>([
       [UserRole.Admin, true],
       [UserRole.Member, true],
-      [UserRole.Viewer, false],
+      [UserRole.Viewer, true],
       [UserRole.Guest, true],
     ]);
     for (const [role, permission] of permissions.entries()) {

server/policies/team.ts

@@ -9,7 +9,7 @@ import {
   or,
 } from "./utils";
 
-allow(User, "read", Team, isTeamModel);
+allow(User, ["read", "readTemplate"], Team, isTeamModel);
 
 allow(User, "share", Team, (actor, team) =>
   and(
@@ -50,10 +50,6 @@ allow(User, "createTemplate", Team, (actor, team) =>
   )
 );
 
-allow(User, "readTemplate", Team, (actor, team) =>
-  and(!actor.isViewer, isTeamModel(actor, team))
-);
-
 allow(User, "updateTemplate", Team, (actor, team) =>
   and(
     //

server/presenters/unfurl.ts

@@ -71,47 +71,63 @@ const presentDocument = (
 
 const presentPR = (
   data: Record<string, any>
-): UnfurlResponse[UnfurlResourceType.PR] => ({
-  url: data.html_url,
-  type: UnfurlResourceType.PR,
-  id: `#${data.number}`,
-  title: data.title,
-  description: data.body,
-  author: {
-    name: data.user.login,
-    avatarUrl: data.user.avatar_url,
-  },
-  state: {
-    name: data.merged ? "merged" : data.state,
-    color: GitHubUtils.getColorForStatus(data.merged ? "merged" : data.state),
-  },
-  createdAt: data.created_at,
-});
+): UnfurlResponse[UnfurlResourceType.PR] => {
+  // TODO: For backwards compatibility, remove once cache has expired in next release.
+  if (data.transformed_unfurl) {
+    delete data.transformed_unfurl;
+    return data as UnfurlResponse[UnfurlResourceType.PR]; // this would have been transformed by the unfurl plugin.
+  }
+
+  return {
+    url: data.html_url,
+    type: UnfurlResourceType.PR,
+    id: `#${data.number}`,
+    title: data.title,
+    description: data.body,
+    author: {
+      name: data.user.login,
+      avatarUrl: data.user.avatar_url,
+    },
+    state: {
+      name: data.merged ? "merged" : data.state,
+      color: GitHubUtils.getColorForStatus(data.merged ? "merged" : data.state),
+    },
+    createdAt: data.created_at,
+  };
+};
 
 const presentIssue = (
   data: Record<string, any>
-): UnfurlResponse[UnfurlResourceType.Issue] => ({
-  url: data.html_url,
-  type: UnfurlResourceType.Issue,
-  id: `#${data.number}`,
-  title: data.title,
-  description: data.body_text,
-  author: {
-    name: data.user.login,
-    avatarUrl: data.user.avatar_url,
-  },
-  labels: data.labels.map((label: { name: string; color: string }) => ({
-    name: label.name,
-    color: `#${label.color}`,
-  })),
-  state: {
-    name: data.state,
-    color: GitHubUtils.getColorForStatus(
-      data.state === "closed" ? "done" : data.state
-    ),
-  },
-  createdAt: data.created_at,
-});
+): UnfurlResponse[UnfurlResourceType.Issue] => {
+  // TODO: For backwards compatibility, remove once cache has expired in next release.
+  if (data.transformed_unfurl) {
+    delete data.transformed_unfurl;
+    return data as UnfurlResponse[UnfurlResourceType.Issue]; // this would have been transformed by the unfurl plugin.
+  }
+
+  return {
+    url: data.html_url,
+    type: UnfurlResourceType.Issue,
+    id: `#${data.number}`,
+    title: data.title,
+    description: data.body_text,
+    author: {
+      name: data.user.login,
+      avatarUrl: data.user.avatar_url,
+    },
+    labels: data.labels.map((label: { name: string; color: string }) => ({
+      name: label.name,
+      color: `#${label.color}`,
+    })),
+    state: {
+      name: data.state,
+      color: GitHubUtils.getColorForStatus(
+        data.state === "closed" ? "done" : data.state
+      ),
+    },
+    createdAt: data.created_at,
+  };
+};
 
 const presentLastOnlineInfoFor = (user: User) => {
   const locale = dateLocale(user.language);

server/queues/processors/AvatarProcessor.ts

@@ -17,7 +17,7 @@ export default class AvatarProcessor extends BaseProcessor {
       });
 
       if (user.avatarUrl) {
-        await UploadUserAvatarTask.schedule({
+        await new UploadUserAvatarTask().schedule({
           userId: event.userId,
           avatarUrl: user.avatarUrl,
         });
@@ -30,7 +30,7 @@ export default class AvatarProcessor extends BaseProcessor {
       });
 
       if (team.avatarUrl) {
-        await UploadTeamAvatarTask.schedule({
+        await new UploadTeamAvatarTask().schedule({
           teamId: event.teamId,
           avatarUrl: team.avatarUrl,
         });

server/queues/processors/CollectionsProcessor.ts

@@ -12,7 +12,7 @@ export default class CollectionsProcessor extends BaseProcessor {
   ];
 
   async perform(event: CollectionEvent) {
-    await DetachDraftsFromCollectionTask.schedule({
+    await new DetachDraftsFromCollectionTask().schedule({
       collectionId: event.collectionId,
       actorId: event.actorId,
       ip: event.ip,

server/queues/processors/DocumentSubscriptionProcessor.ts

@@ -27,7 +27,7 @@ export default class DocumentSubscriptionProcessor extends BaseProcessor {
   async perform(event: ReceivedEvent) {
     switch (event.name) {
       case "collections.remove_user": {
-        await CollectionSubscriptionRemoveUserTask.schedule(event);
+        await new CollectionSubscriptionRemoveUserTask().schedule(event);
         return;
       }
 
@@ -35,7 +35,7 @@ export default class DocumentSubscriptionProcessor extends BaseProcessor {
         return this.handleRemoveGroupFromCollection(event);
 
       case "documents.remove_user": {
-        await DocumentSubscriptionRemoveUserTask.schedule(event);
+        await new DocumentSubscriptionRemoveUserTask().schedule(event);
         return;
       }
 
@@ -57,11 +57,11 @@ export default class DocumentSubscriptionProcessor extends BaseProcessor {
       async (groupUsers) => {
         await Promise.all(
           groupUsers.map((groupUser) =>
-            CollectionSubscriptionRemoveUserTask.schedule({
+            new CollectionSubscriptionRemoveUserTask().schedule({
               ...event,
               name: "collections.remove_user",
               userId: groupUser.userId,
-            })
+            } as CollectionUserEvent)
           )
         );
       }
@@ -79,11 +79,11 @@ export default class DocumentSubscriptionProcessor extends BaseProcessor {
       async (groupUsers) => {
         await Promise.all(
           groupUsers.map((groupUser) =>
-            DocumentSubscriptionRemoveUserTask.schedule({
+            new DocumentSubscriptionRemoveUserTask().schedule({
               ...event,
               name: "documents.remove_user",
               userId: groupUser.userId,
-            })
+            } as DocumentUserEvent)
           )
         );
       }

server/queues/processors/FileOperationCreatedProcessor.ts

@@ -20,12 +20,12 @@ export default class FileOperationCreatedProcessor extends BaseProcessor {
     if (fileOperation.type === FileOperationType.Import) {
       switch (fileOperation.format) {
         case FileOperationFormat.MarkdownZip:
-          await ImportMarkdownZipTask.schedule({
+          await new ImportMarkdownZipTask().schedule({
             fileOperationId: event.modelId,
           });
           break;
         case FileOperationFormat.JSON:
-          await ImportJSONTask.schedule({
+          await new ImportJSONTask().schedule({
             fileOperationId: event.modelId,
           });
           break;
@@ -36,17 +36,17 @@ export default class FileOperationCreatedProcessor extends BaseProcessor {
     if (fileOperation.type === FileOperationType.Export) {
       switch (fileOperation.format) {
         case FileOperationFormat.HTMLZip:
-          await ExportHTMLZipTask.schedule({
+          await new ExportHTMLZipTask().schedule({
             fileOperationId: event.modelId,
           });
           break;
         case FileOperationFormat.MarkdownZip:
-          await ExportMarkdownZipTask.schedule({
+          await new ExportMarkdownZipTask().schedule({
             fileOperationId: event.modelId,
           });
           break;
         case FileOperationFormat.JSON:
-          await ExportJSONTask.schedule({
+          await new ExportJSONTask().schedule({
             fileOperationId: event.modelId,
           });
           break;

server/queues/processors/IntegrationCreatedProcessor.ts

@@ -3,6 +3,7 @@ import { Integration } from "@server/models";
 import BaseProcessor from "@server/queues/processors/BaseProcessor";
 import { IntegrationEvent, Event } from "@server/types";
 import { CacheHelper } from "@server/utils/CacheHelper";
+import CacheIssueSourcesTask from "../tasks/CacheIssueSourcesTask";
 
 export default class IntegrationCreatedProcessor extends BaseProcessor {
   static applicableEvents: Event["name"][] = ["integrations.create"];
@@ -18,6 +19,11 @@ export default class IntegrationCreatedProcessor extends BaseProcessor {
       return;
     }
 
+    // Store the available issue sources in the integration record.
+    await new CacheIssueSourcesTask().schedule({
+      integrationId: integration.id,
+    });
+
     // Clear the cache of unfurled data for the team as it may be stale now.
     await CacheHelper.clearData(CacheHelper.getUnfurlKey(integration.teamId));
   }

server/queues/processors/NotificationsProcessor.ts

@@ -62,25 +62,25 @@ export default class NotificationsProcessor extends BaseProcessor {
       return;
     }
 
-    await DocumentPublishedNotificationsTask.schedule(event);
+    await new DocumentPublishedNotificationsTask().schedule(event);
   }
 
   async documentAddUser(event: DocumentUserEvent) {
     if (!event.data.isNew || event.userId === event.actorId) {
       return;
     }
-    await DocumentAddUserNotificationsTask.schedule(event);
+    await new DocumentAddUserNotificationsTask().schedule(event);
   }
 
   async documentAddGroup(event: DocumentGroupEvent) {
     if (!event.data.isNew) {
       return;
     }
-    await DocumentAddGroupNotificationsTask.schedule(event);
+    await new DocumentAddGroupNotificationsTask().schedule(event);
   }
 
   async revisionCreated(event: RevisionEvent) {
-    await RevisionCreatedNotificationsTask.schedule(event);
+    await new RevisionCreatedNotificationsTask().schedule(event);
   }
 
   async collectionCreated(event: CollectionEvent) {
@@ -93,7 +93,7 @@ export default class NotificationsProcessor extends BaseProcessor {
       return;
     }
 
-    await CollectionCreatedNotificationsTask.schedule(event);
+    await new CollectionCreatedNotificationsTask().schedule(event);
   }
 
   async collectionAddUser(event: CollectionUserEvent) {
@@ -101,14 +101,14 @@ export default class NotificationsProcessor extends BaseProcessor {
       return;
     }
 
-    await CollectionAddUserNotificationsTask.schedule(event);
+    await new CollectionAddUserNotificationsTask().schedule(event);
   }
 
   async commentCreated(event: CommentEvent) {
-    await CommentCreatedNotificationsTask.schedule(event);
+    await new CommentCreatedNotificationsTask().schedule(event);
   }
 
   async commentUpdated(event: CommentEvent) {
-    await CommentUpdatedNotificationsTask.schedule(event);
+    await new CommentUpdatedNotificationsTask().schedule(event);
   }
 }

server/queues/processors/RevisionsProcessor.ts

@@ -37,7 +37,7 @@ export default class RevisionsProcessor extends BaseProcessor {
           return;
         }
 
-        await DocumentUpdateTextTask.schedule(event);
+        await new DocumentUpdateTextTask().schedule(event);
 
         const user = await User.findByPk(event.actorId, {
           paranoid: false,

server/queues/processors/UserDemotedProcessor.ts

@@ -6,6 +6,6 @@ export default class UserDemotedProcessor extends BaseProcessor {
   static applicableEvents: TEvent["name"][] = ["users.demote"];
 
   async perform(event: UserEvent) {
-    await CleanupDemotedUserTask.schedule({ userId: event.userId });
+    await new CleanupDemotedUserTask().schedule({ userId: event.userId });
   }
 }

server/queues/tasks/APIImportTask.ts

@@ -325,7 +325,9 @@ export default abstract class APIImportTask<
         ([url, attachment]) => ({ attachmentId: attachment.id, url })
       );
       // publish task after attachments are persisted in DB.
-      const job = await UploadAttachmentsForImportTask.schedule(uploadItems);
+      const job = await new UploadAttachmentsForImportTask().schedule(
+        uploadItems
+      );
       await job.finished();
     } catch (err) {
       // upload attachments failure is not critical enough to fail the whole import.

server/queues/tasks/BaseTask.ts

@@ -21,7 +21,7 @@ export default abstract class BaseTask<T extends Record<string, any>> {
   static cron: TaskSchedule | undefined;
 
   /**
-   * Schedule this task type to be processed asyncronously by a worker.
+   * Schedule this task type to be processed asynchronously by a worker.
    *
    * @param props Properties to be used by the task
    * @returns A promise that resolves once the job is placed on the task queue
@@ -39,6 +39,23 @@ export default abstract class BaseTask<T extends Record<string, any>> {
     );
   }
 
+  /**
+   * Schedule this task type to be processed asynchronously by a worker.
+   *
+   * @param props Properties to be used by the task
+   * @param options Job options such as priority and retry strategy, as defined by Bull.
+   * @returns A promise that resolves once the job is placed on the task queue
+   */
+  public schedule(props: T, options?: JobOptions): Promise<Job> {
+    return taskQueue.add(
+      {
+        name: this.constructor.name,
+        props,
+      },
+      { ...options, ...this.options }
+    );
+  }
+
   /**
    * Execute the task.
    *

server/queues/tasks/CacheIssueSourcesTask.ts

@@ -0,0 +1,32 @@
+import { Integration } from "@server/models";
+import { sequelize } from "@server/storage/database";
+import { Hook, PluginManager } from "@server/utils/PluginManager";
+import BaseTask from "./BaseTask";
+
+const plugins = PluginManager.getHooks(Hook.IssueProvider);
+
+type Props = {
+  integrationId: string;
+};
+
+export default class CacheIssueSourcesTask extends BaseTask<Props> {
+  async perform({ integrationId }: Props) {
+    const integration = await Integration.findByPk(integrationId);
+    if (!integration) {
+      return;
+    }
+
+    const plugin = plugins.find((p) => p.value.service === integration.service);
+    if (!plugin) {
+      return;
+    }
+
+    const sources = await plugin.value.fetchSources(integration);
+
+    await sequelize.transaction(async (transaction) => {
+      await integration.reload({ transaction, lock: transaction.LOCK.UPDATE });
+      integration.issueSources = sources;
+      await integration.save({ transaction });
+    });
+  }
+}

server/queues/tasks/CleanupDeletedTeamsTask.ts

@@ -29,7 +29,7 @@ export default class CleanupDeletedTeamsTask extends BaseTask<Props> {
     });
 
     for (const team of teams) {
-      await CleanupDeletedTeamTask.schedule({
+      await new CleanupDeletedTeamTask().schedule({
         teamId: team.id,
       });
     }

server/queues/tasks/CommentCreatedNotificationsTask.ts

@@ -85,16 +85,21 @@ export default class CommentCreatedNotificationsTask extends BaseTask<CommentEve
       )
     ).filter((recipient) => !userIdsMentioned.includes(recipient.id));
 
-    for (const recipient of recipients) {
-      await Notification.create({
-        event: NotificationEventType.CreateComment,
-        userId: recipient.id,
-        actorId: comment.createdById,
-        teamId: document.teamId,
-        commentId: comment.id,
-        documentId: document.id,
-      });
-    }
+    await sequelize.transaction(async (transaction) => {
+      for (const recipient of recipients) {
+        await Notification.create(
+          {
+            event: NotificationEventType.CreateComment,
+            userId: recipient.id,
+            actorId: comment.createdById,
+            teamId: document.teamId,
+            commentId: comment.id,
+            documentId: document.id,
+          },
+          { transaction }
+        );
+      }
+    });
   }
 
   public get options() {