Add more fields to shared links management screen

app/scenes/Settings/Shares.tsx

@@ -6,6 +6,7 @@ import { useTranslation, Trans } from "react-i18next";
 import { Link } from "react-router-dom";
 import { PAGINATION_SYMBOL } from "~/stores/base/Store";
 import Share from "~/models/Share";
+import Fade from "~/components/Fade";
 import Heading from "~/components/Heading";
 import Notice from "~/components/Notice";
 import Scene from "~/components/Scene";
@@ -67,7 +68,7 @@ function Shares() {
   }, [shares.orderedData, shareIds]);
 
   return (
-    <Scene title={t("Shared Links")} icon={<LinkIcon />}>
+    <Scene title={t("Shared Links")} icon={<LinkIcon />} wide>
       <Heading>{t("Shared Links")}</Heading>
 
       {can.update && !canShareDocuments && (
@@ -93,15 +94,19 @@ function Shares() {
         </Trans>
       </Text>
 
-      <SharesTable
-        data={data}
-        canManage={can.update}
-        isLoading={isLoading}
-        page={page}
-        pageSize={limit}
-        totalPages={totalPages}
-        defaultSortDirection="ASC"
-      />
+      {data.length ? (
+        <Fade>
+          <SharesTable
+            data={data}
+            canManage={can.update}
+            isLoading={isLoading}
+            page={page}
+            pageSize={limit}
+            totalPages={totalPages}
+            defaultSortDirection="ASC"
+          />
+        </Fade>
+      ) : null}
     </Scene>
   );
 }

app/scenes/Settings/components/SharesTable.tsx

@@ -8,6 +8,7 @@ import Avatar from "~/components/Avatar";
 import Flex from "~/components/Flex";
 import TableFromParams from "~/components/TableFromParams";
 import Time from "~/components/Time";
+import Tooltip from "~/components/Tooltip";
 import ShareMenu from "~/menus/ShareMenu";
 
 type Props = Omit<React.ComponentProps<typeof TableFromParams>, "columns"> & {
@@ -15,9 +16,10 @@ type Props = Omit<React.ComponentProps<typeof TableFromParams>, "columns"> & {
   canManage: boolean;
 };
 
-function SharesTable({ canManage, ...rest }: Props) {
+function SharesTable({ canManage, data, ...rest }: Props) {
   const { t } = useTranslation();
   const theme = useTheme();
+  const hasDomain = data.some((share) => share.domain);
 
   const columns = React.useMemo(
     () =>
@@ -29,23 +31,28 @@ function SharesTable({ canManage, ...rest }: Props) {
           disableSortBy: true,
           Cell: observer(({ value }: { value: string }) => <>{value}</>),
         },
+        {
+          id: "who",
+          Header: t("Shared by"),
+          accessor: "createdById",
+          disableSortBy: true,
+          Cell: observer(
+            ({ row }: { value: string; row: { original: Share } }) => (
+              <Flex align="center" gap={4}>
+                {row.original.createdBy && (
+                  <Avatar model={row.original.createdBy} />
+                )}
+                {row.original.createdBy.name}
+              </Flex>
+            )
+          ),
+        },
         {
           id: "createdAt",
           Header: t("Date shared"),
           accessor: "createdAt",
-          Cell: observer(
-            ({ value, row }: { value: string; row: { original: Share } }) =>
-              value ? (
-                <Flex align="center" gap={4}>
-                  {row.original.createdBy && (
-                    <Avatar
-                      model={row.original.createdBy}
-                      alt={row.original.createdBy.name}
-                    />
-                  )}
-                  <Time dateTime={value} addSuffix />
-                </Flex>
-              ) : null
+          Cell: observer(({ value }: { value: string }) =>
+            value ? <Time dateTime={value} addSuffix /> : null
           ),
         },
         {
@@ -63,11 +70,21 @@ function SharesTable({ canManage, ...rest }: Props) {
           Cell: observer(({ value }: { value: string }) =>
             value ? (
               <Flex align="center">
-                <CheckmarkIcon color={theme.accent} />
+                <Tooltip tooltip={t("Nested documents are publicly available")}>
+                  <CheckmarkIcon color={theme.accent} />
+                </Tooltip>
               </Flex>
             ) : null
           ),
         },
+        hasDomain
+          ? {
+              id: "domain",
+              Header: t("Domain"),
+              accessor: "domain",
+              disableSortBy: true,
+            }
+          : undefined,
         {
           id: "views",
           Header: t("Views"),
@@ -89,10 +106,10 @@ function SharesTable({ canManage, ...rest }: Props) {
             }
           : undefined,
       ].filter((i) => i),
-    [t, theme.accent, canManage]
+    [t, theme.accent, hasDomain, canManage]
   );
 
-  return <TableFromParams columns={columns} {...rest} />;
+  return <TableFromParams columns={columns} data={data} {...rest} />;
 }
 
 export default SharesTable;