CLI should use Agent in requests - get #986

CHANGELOG.md

@@ -11,6 +11,9 @@ See [STATUS.md](server/STATUS.md) to learn more about which features will remain
 - [#1056](https://github.com/atomicdata-dev/atomic-server/issues/1056) Switched from Earthly to Dagger for CI. Also made improvements to E2E test publishing and building docker images.
 - [#979](https://github.com/atomicdata-dev/atomic-server/issues/979) Fix nested resource deletion, use transactions
 - [#1057](https://github.com/atomicdata-dev/atomic-server/issues/1057) Fix double slashes in search bar
+- CLI should use Agent in requests - get #986
+- Search endpoint throws error for websocket requests #1047
+- Fix search in CLI / atomic_lib #958
 
 ## [v0.40.2]
 

browser/cli/src/generateIndex.ts

@@ -44,10 +44,8 @@ export const generateIndex = (
   const importLines = names.map(createImportLine).join('\n');
   const registerArgs = names.join(', ');
 
-  const content = TEMPLATE.replaceAll(
-    Inserts.MODULE_ALIAS,
-    atomicConfig.moduleAlias ?? '@tomic/lib',
-  )
+  const moduleAlias = atomicConfig.moduleAlias ?? '@tomic/lib';
+  const content = TEMPLATE.replaceAll(Inserts.MODULE_ALIAS, moduleAlias)
     .replace(Inserts.IMPORTS, importLines)
     .replace(Inserts.REGISTER_ARGS, registerArgs);
 

browser/cli/src/utils.ts

@@ -11,14 +11,11 @@ export const dedupe = <T>(array: T[]): T[] => {
 
 export const getExtension = () => {
   try {
-    const tsconfig = getTsconfig();
-    if (!tsconfig) return '.js';
-    const moduleResolution = tsconfig.config.compilerOptions?.moduleResolution;
-    if (!moduleResolution) return '.js';
-
-    return moduleResolution === 'Bundler' ? '' : '.js';
-  } catch (error) {
-    console.error('Error getting extension:', error);
+    return getTsconfig()?.config.compilerOptions?.moduleResolution === 'Bundler'
+      ? ''
+      : '.js';
+  } catch (e) {
+    console.warn('Something went wrong getting TS Config / file extension', e);
 
     return '.js';
   }

browser/create-template/src/postprocess.ts

@@ -35,7 +35,7 @@ export async function postProcess(context: PostProcessContext) {
       switch (ontology.error.type) {
         case ErrorType.NotFound:
           console.error(
-            `\nThe ${baseTemplate.name} template does not exist on your drive. To get the template go to the Create Resource page and select the ${baseTemplate.name} template`,
+            `\nThe '${baseTemplate.name}' template does not exist on your drive on '${ontologySubject}'. To get the template go to the Create Resource page and select the ${baseTemplate.name} template.`,
           );
           break;
         case ErrorType.Unauthorized:

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

@@ -153,7 +153,7 @@ export const ButtonBar = styled(ButtonClean)<ButtonBarProps>`
   }
 
   padding-left: ${p => (p.leftPadding ? '1.2rem' : '')};
-  padding-right: ${p => (p.rightPadding ? '1.2rem' : '')};
+  padding-right: ${p => (p.rightPadding ? '1rem' : '')};
 `;
 
 /** Button with some optional margins around it */

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

@@ -2,8 +2,8 @@ import { styled } from 'styled-components';
 import { useSettings } from '../helpers/AppSettings';
 
 import type { JSX } from 'react';
+import { NAVBAR_HEIGHT } from './Navigation';
 
-const NAVBAR_HEIGHT = '2rem';
 const NAVBAR_CALC_PART = ` + ${NAVBAR_HEIGHT}`;
 
 export interface NavBarSpacerProps {

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

@@ -15,6 +15,8 @@ import { NAVBAR_TRANSITION_TAG } from '../helpers/transitionName';
 import { SearchbarFakeInput } from './Searchbar/SearchbarInput';
 import { CalculatedPageHeight } from '../globalCssVars';
 
+export const NAVBAR_HEIGHT = '2.5rem';
+
 interface NavWrapperProps {
   children: React.ReactNode;
 }
@@ -102,6 +104,7 @@ function NavBar(): JSX.Element {
       <>
         <ButtonBar
           leftPadding
+          rightPadding={!isInStandaloneMode}
           type='button'
           onClick={() => setSideBarLocked(!sideBarLocked)}
           title={`Show / hide sidebar (${shortcuts.sidebarToggle})`}
@@ -136,7 +139,7 @@ const NavBarBase = styled.div<NavBarStyledProps>`
   /* transition: all 0.2s; */
   position: fixed;
   z-index: ${p => p.theme.zIndex.sidebar};
-  height: 2.5rem;
+  height: ${NAVBAR_HEIGHT};
   display: flex;
   border: solid 1px ${props => props.theme.colors.bg2};
   background-color: ${props => props.theme.colors.bg};
@@ -201,7 +204,6 @@ const VerticalDivider = styled.div`
   width: 1px;
   background-color: ${props => props.theme.colors.bg2};
   height: 100%;
-  margin-left: ${p => p.theme.size(2)};
 `;
 
 const SideBarWrapper = styled.div<{ navbarPosition: NavBarPosition }>`

browser/data-browser/src/components/Template/ApplyTemplateDialog.tsx

@@ -10,7 +10,6 @@ import {
   useDialog,
 } from '../Dialog';
 import { Column } from '../Row';
-import type { Template } from './template';
 import { useEffect, useMemo, useState } from 'react';
 import Markdown from '../datatypes/Markdown';
 import { dataBrowser, useResource, useResources, useStore } from '@tomic/react';
@@ -19,6 +18,7 @@ import { InlineErrMessage } from '../forms/InputStyles';
 import { useSettings } from '../../helpers/AppSettings';
 import { useNavigateWithTransition } from '../../hooks/useNavigateWithTransition';
 import { constructOpenURL } from '../../helpers/navigation';
+import type { Template } from './template';
 
 interface ApplyTemplateDialogProps {
   template?: Template;
@@ -95,9 +95,7 @@ export function ApplyTemplateDialog({
           </DialogTitle>
           <DialogContent>
             <Column>
-              <Markdown
-                text={template.description({ serverUrl: store.getServerUrl() })}
-              />
+              <Markdown text={template.description} />
               <Details title='Preview JSON-AD'>
                 <CodeBlock content={formattedJSONAD} />
               </Details>

browser/data-browser/src/components/Template/TemplateList.tsx

@@ -1,32 +1,50 @@
 import { TemplateListItem } from './TemplateListItem';
 import { styled } from 'styled-components';
 import { website } from './templates/website';
-import type { Template } from './template';
+import type { Template, TemplateFn } from './template';
 import { useState } from 'react';
 import { ApplyTemplateDialog } from './ApplyTemplateDialog';
+import { useSettings } from '../../helpers/AppSettings';
 
-const templates: Template[] = [website];
+const templates: TemplateFn[] = [website];
 
 export function TemplateList(): React.JSX.Element {
   const [dialogOpen, setDialogOpen] = useState(false);
   const [selectedTemplate, setSelectedTemplate] = useState<Template>();
+  const { drive } = useSettings();
 
   return (
     <>
       <List>
-        {templates.map(template => (
-          <li key={template.id}>
-            <TemplateListItem
-              id={template.id}
-              title={template.title}
-              Image={template.Image}
-              onClick={id => {
-                setSelectedTemplate(templates.find(t => t.id === id));
-                setDialogOpen(true);
-              }}
-            />
-          </li>
-        ))}
+        {templates.map(templatefn => {
+          const context = {
+            driveURL: drive,
+          };
+
+          const template = templatefn(context);
+
+          const { id, title, Image } = template;
+
+          return (
+            <li key={id}>
+              <TemplateListItem
+                id={id}
+                title={title}
+                Image={Image}
+                onClick={tmpl => {
+                  const newTemplate = templates.find(
+                    t => t(context).id === tmpl,
+                  );
+
+                  if (!newTemplate) return;
+
+                  setSelectedTemplate(template);
+                  setDialogOpen(true);
+                }}
+              />
+            </li>
+          );
+        })}
       </List>
       <ApplyTemplateDialog
         template={selectedTemplate}

browser/data-browser/src/components/Template/template.ts

@@ -1,14 +1,16 @@
 import type { JSONValue } from '@tomic/react';
 
-export type DescriptionContext = {
-  serverUrl: string;
+export type TemplateContext = {
+  driveURL: string;
 };
 
-export type Template = {
+export type TemplateFn = (context: TemplateContext) => {
   rootResourceLocalIDs: string[];
   id: string;
   title: string;
-  description: (context: DescriptionContext) => string;
+  description: string;
   Image: React.FC;
   resources: Record<string, JSONValue>[];
 };
+
+export type Template = ReturnType<TemplateFn>;

browser/data-browser/src/components/Template/templates/website.tsx

@@ -1,5 +1,5 @@
 import { core, dataBrowser } from '@tomic/react';
-import type { Template } from '../template';
+import type { TemplateFn, TemplateContext } from '../template';
 
 const Image: React.FC = () => {
   return (
@@ -130,21 +130,24 @@ const Image: React.FC = () => {
   );
 };
 
-export const website: Template = {
-  title: 'website',
-  id: 'website',
-  description:
-    context => `This template adds a website ontology to your AtomicServer along with some sample website data.
+const description = (
+  context: TemplateContext,
+) => `Based on the Atomic Website Template.
 The website features blog posts, nested menu items and content blocks to create expressive pages from data.\n
 An \`@tomic/template\` template is also available to setup a fully working website in a variety of front-end frameworks that you can then customize to your preferences.
 \`\`\`
-npm create @tomic/template my-project -- --template sveltekit-site --server-url ${context.serverUrl}
-pnpm create @tomic/template my-project --template sveltekit-site --server-url ${context.serverUrl}
-yarn create @tomic/template my-project --template sveltekit-site --server-url ${context.serverUrl}
+npm create @tomic/template my-project -- --template sveltekit-site --server-url ${context.driveURL}
+pnpm create @tomic/template my-project --template sveltekit-site --server-url ${context.driveURL}
+yarn create @tomic/template my-project --template sveltekit-site --server-url ${context.driveURL}
 \`\`\`
 Currently available @tomic/templates for the website template are:
 - sveltekit-site
-- nextjs-site`,
+- nextjs-site`;
+
+export const website: TemplateFn = context => ({
+  title: 'website',
+  id: 'website',
+  description: description(context),
   Image,
   rootResourceLocalIDs: ['website', 'site-data'],
   resources: [
@@ -160,7 +163,7 @@ Currently available @tomic/templates for the website template are:
         'website/class/text-block',
         'website/class/website',
       ],
-      [core.properties.description]: 'Ontology for the template website.',
+      [core.properties.description]: description(context),
       [core.properties.instances]: [],
       [core.properties.isA]: [core.classes.ontology],
       [core.properties.properties]: [
@@ -620,4 +623,4 @@ Currently available @tomic/templates for the website template are:
       [core.properties.parent]: 'site-data',
     },
   ],
-};
+});

browser/e2e/tests/template.spec.ts

@@ -40,20 +40,19 @@ const TEMPLATE_DIR_NAME = 'template-tests';
 // test.describe.configure({ mode: 'serial' });
 
 async function setupTemplateSite(
-  templateDir: string,
   serverUrl: string,
-  siteType: string,
+  siteType: 'nextjs-site' | 'sveltekit-site',
 ) {
-  if (!fs.existsSync(templateDir)) {
-    fs.mkdirSync(templateDir);
+  if (!fs.existsSync(TEMPLATE_DIR_NAME)) {
+    fs.mkdirSync(TEMPLATE_DIR_NAME);
   }
 
   await execAsync('pnpm link ../create-template');
   await execAsync(
-    `pnpm exec create-template ${templateDir}/${siteType} --template ${siteType} --server-url ${serverUrl}`,
+    `pnpm exec create-template ${TEMPLATE_DIR_NAME}/${siteType} --template ${siteType} --server-url ${serverUrl}`,
   );
 
-  const sitePath = `${templateDir}/${siteType}`;
+  const sitePath = `${TEMPLATE_DIR_NAME}/${siteType}`;
   await execAsync('pnpm install', { cwd: sitePath });
   await execAsync('pnpm link ../../../cli', { cwd: sitePath });
   await execAsync('pnpm link ../../../lib', { cwd: sitePath });
@@ -62,6 +61,7 @@ async function setupTemplateSite(
     await execAsync('pnpm link ../../../react', { cwd: sitePath });
   } else if (siteType === 'sveltekit-site') {
     await execAsync('pnpm link ../../../svelte', { cwd: sitePath });
+    await execAsync('pnpm svelte-kit sync', { cwd: sitePath });
   }
 
   await execAsync('pnpm update-ontologies', { cwd: sitePath });
@@ -142,7 +142,7 @@ test.describe('Create Next.js Template', () => {
     });
     await applyTemplateButton.click();
 
-    await setupTemplateSite(TEMPLATE_DIR_NAME, drive.driveURL, 'nextjs-site');
+    await setupTemplateSite(drive.driveURL, 'nextjs-site');
 
     try {
       //start server
@@ -221,11 +221,7 @@ test.describe('Create SvelteKit Template', () => {
     });
     await applyTemplateButton.click();
 
-    await setupTemplateSite(
-      TEMPLATE_DIR_NAME,
-      drive.driveURL,
-      'sveltekit-site',
-    );
+    await setupTemplateSite(drive.driveURL, 'sveltekit-site');
 
     try {
       const child = startServer(TEMPLATE_DIR_NAME, 'sveltekit-site');