#925 Add csv export to tables

CHANGELOG.md

@@ -8,6 +8,7 @@ See [STATUS.md](server/STATUS.md) to learn more about which features will remain
 ## Unreleased
 
 - The download endpoint can now optimize images on the fly. This is controlled via query parameters. #257
+- Added export endpoint for exporting resources to other formats. Currently only supports exporting tables to csv. [#925](https://github.com/atomicdata-dev/atomic-server/issues/925)
 
 ## [v0.38.0] - 2024-06-08
 

browser/CHANGELOG.md

@@ -21,6 +21,7 @@ This changelog covers all five packages, as they are (for now) updated as a whol
 - [#861](https://github.com/atomicdata-dev/atomic-server/issues/861) Fix long usernames overflowing on the share page.
 - [#906](https://github.com/atomicdata-dev/atomic-server/issues/906) Reset changes after clicking the cancel button in a form or navigating away.
 - [#914](https://github.com/atomicdata-dev/atomic-server/issues/914) Fix an issue where changing the subject in a new resource form could update the parent of existing resources if their subject matched the new subject.
+- [#925](https://github.com/atomicdata-dev/atomic-server/issues/925) Added export to CSV option to tables.
 - [#919](https://github.com/atomicdata-dev/atomic-server/issues/919) Automatically sort classes and properties in the ontology editor.
 - [#936](https://github.com/atomicdata-dev/atomic-server/issues/936) Updated the address bar to make it clearer it's also search bar.
 

browser/data-browser/src/components/Button.tsx

@@ -165,10 +165,9 @@ export const ButtonDefault = styled(ButtonBase)<ButtonPropsStyled>`
   --button-text-color: ${p => p.theme.colors.bg};
   --button-text-color-hover: ${p => p.theme.colors.bg};
 
-  padding: 0.4rem;
   border-radius: ${p => p.theme.radius};
-  padding-left: ${p => p.theme.margin}rem;
-  padding-right: ${p => p.theme.margin}rem;
+  padding-block: 0.4rem;
+  padding-inline: ${p => p.theme.margin}rem;
   display: inline-flex;
   background-color: var(--button-bg-color);
   color: var(--button-text-color);

browser/data-browser/src/components/ButtonLink.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { ButtonDefault } from './Button';
+import styled from 'styled-components';
+
+export function ButtonLink(
+  props: React.AnchorHTMLAttributes<HTMLAnchorElement>,
+): React.JSX.Element {
+  return (
+    <StyledButtonDefault as='a' {...props}>
+      {props.children}
+    </StyledButtonDefault>
+  );
+}
+
+const StyledButtonDefault = styled(ButtonDefault)`
+  text-decoration: none;
+`;

browser/data-browser/src/components/Dropdown/index.tsx

@@ -394,7 +394,6 @@ const MenuItemStyled = styled(Button)<MenuItemStyledProps>`
   color: ${p => p.theme.colors.text};
   padding: 0.4rem 1rem;
   height: auto;
-  text-transform: capitalize;
   background-color: ${p =>
     p.selected ? p.theme.colors.bg1 : p.theme.colors.bg};
   text-decoration: ${p => (p.selected ? 'underline' : 'none')};

browser/data-browser/src/components/ResourceContextMenu/index.tsx

@@ -49,6 +49,7 @@ export enum ContextMenuOptions {
   Import = 'import',
   UseInCode = 'useInCode',
   NewChild = 'newChild',
+  Export = 'export',
 }
 
 export interface ResourceContextMenuProps {
@@ -117,14 +118,14 @@ function ResourceContextMenu({
       {
         disabled: location.pathname.startsWith(paths.show),
         id: ContextMenuOptions.View,
-        label: 'normal view',
+        label: 'Normal View',
         helper: 'Open the regular, default View.',
         onClick: () => navigate(constructOpenURL(subject)),
       },
       {
         disabled: location.pathname.startsWith(paths.data),
         id: ContextMenuOptions.Data,
-        label: 'data view',
+        label: 'Data View',
         helper: 'View the resource and its properties in the Data View.',
         shortcut: shortcuts.data,
         onClick: () => navigate(dataURL(subject)),
@@ -136,31 +137,31 @@ function ResourceContextMenu({
       {
         // disabled: !canWrite || location.pathname.startsWith(paths.edit),
         id: ContextMenuOptions.Edit,
-        label: 'edit',
+        label: 'Edit',
         helper: 'Open the edit form.',
         icon: <FaPencil />,
         shortcut: simple ? '' : shortcuts.edit,
         onClick: () => navigate(editURL(subject)),
       },
       {
         id: ContextMenuOptions.NewChild,
-        label: 'add child',
+        label: 'Add child',
         helper: 'Create a new resource under this resource.',
         icon: <FaPlus />,
         onClick: handleAddClick,
       },
     ),
     {
       id: ContextMenuOptions.UseInCode,
-      label: 'use in code',
+      label: 'Use in code',
       helper:
         'Usage instructions for how to fetch and use the resource in your code.',
       icon: <FaCode />,
       onClick: () => setShowCodeUsageDialog(true),
     },
     {
       id: ContextMenuOptions.Scope,
-      label: 'search children',
+      label: 'Search children',
       helper: 'Scope search to resource',
       icon: <FaMagnifyingGlass />,
       onClick: enableScope,
@@ -176,7 +177,7 @@ function ResourceContextMenu({
     {
       id: ContextMenuOptions.History,
       icon: <FaClock />,
-      label: 'history',
+      label: 'History',
       helper: 'Show the history of this resource',
       onClick: () => navigate(historyURL(subject)),
     },
@@ -185,15 +186,15 @@ function ResourceContextMenu({
       {
         id: ContextMenuOptions.Import,
         icon: <FaDownload />,
-        label: 'import',
+        label: 'Import',
         helper: 'Import Atomic Data to this resource',
         onClick: () => navigate(importerURL(subject)),
       },
       {
         disabled: !canWrite,
         id: ContextMenuOptions.Delete,
         icon: <FaTrash />,
-        label: 'delete',
+        label: 'Delete',
         helper: 'Delete this resource.',
         onClick: () => setShowDeleteDialog(true),
       },

browser/data-browser/src/components/SideBar/About.tsx

@@ -15,7 +15,7 @@ const aboutMenuItems: AboutItem[] = [
   {
     icon: <FaGithub />,
     helper: 'Github; View the source code for this application',
-    href: 'https://github.com/atomicdata-dev/atomic-data-browser',
+    href: 'https://github.com/atomicdata-dev/atomic-server',
   },
   {
     icon: <FaDiscord />,

browser/data-browser/src/components/SideBar/AppMenu.tsx

@@ -10,7 +10,12 @@ import { constructOpenURL } from '../../helpers/navigation';
 import { useCurrentSubject } from '../../helpers/useCurrentSubject';
 import { SideBarMenuItem } from './SideBarMenuItem';
 import { paths } from '../../routes/paths';
-import { unknownSubject, useCurrentAgent, useResource } from '@tomic/react';
+import {
+  core,
+  unknownSubject,
+  useCurrentAgent,
+  useResource,
+} from '@tomic/react';
 
 // Non standard event type so we have to type it ourselfs for now.
 type BeforeInstallPromptEvent = {
@@ -59,7 +64,11 @@ export function AppMenu({ onItemClick }: AppMenuProps): JSX.Element {
     <section aria-label='App menu'>
       <SideBarMenuItem
         icon={<FaUser />}
-        label={agent ? agentResource.title : 'Login'}
+        label={
+          agent
+            ? agentResource.get(core.properties.name) ?? 'User Settings'
+            : 'Login'
+        }
         helper='See and edit the current Agent / User (u)'
         path={paths.agentSettings}
         onClick={onItemClick}

browser/data-browser/src/views/TablePage/TableExportDialog.tsx

@@ -0,0 +1,68 @@
+import { useEffect, useState } from 'react';
+import { useStore, type Store } from '@tomic/react';
+import { FaDownload } from 'react-icons/fa6';
+import {
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+  useDialog,
+} from '../../components/Dialog';
+import { Checkbox, CheckboxLabel } from '../../components/forms/Checkbox';
+import { ButtonLink } from '../../components/ButtonLink';
+
+interface TableExportDialogProps {
+  subject: string;
+  show: boolean;
+  bindShow: React.Dispatch<boolean>;
+}
+
+const buildLink = (subject: string, refAsSubject: boolean, store: Store) => {
+  const url = new URL(`${store.getServerUrl()}/export`);
+
+  url.searchParams.set('format', 'csv');
+  url.searchParams.set('subject', subject);
+  url.searchParams.set('display_refs_as_name', refAsSubject ? 'false' : 'true');
+
+  return url.toString();
+};
+
+export function TableExportDialog({
+  subject,
+  show,
+  bindShow,
+}: TableExportDialogProps): React.JSX.Element {
+  const store = useStore();
+  const [dialogProps, showDialog] = useDialog({ bindShow });
+  const [refAsSubject, setRefAsSubject] = useState(false);
+
+  const url = buildLink(subject, refAsSubject, store);
+
+  useEffect(() => {
+    if (show) {
+      showDialog();
+    }
+  }, [show, showDialog]);
+
+  return (
+    <>
+      <Dialog {...dialogProps}>
+        <DialogTitle>
+          <h1>Export table as CSV</h1>
+        </DialogTitle>
+        <DialogContent>
+          <CheckboxLabel>
+            <Checkbox checked={refAsSubject} onChange={setRefAsSubject} />{' '}
+            Reference resources by subject instead of name.
+          </CheckboxLabel>
+        </DialogContent>
+        <DialogActions>
+          <ButtonLink download href={url}>
+            <FaDownload />
+            Download
+          </ButtonLink>
+        </DialogActions>
+      </Dialog>
+    </>
+  );
+}