Add more fields to shared links management screen

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;