#747 show ontology classes in newresource route

browser/CHANGELOG.md

@@ -2,6 +2,13 @@
 
 This changelog covers all three packages, as they are (for now) updated as a whole
 
+## UNRELEASED
+
+### Atomic Browser
+
+- [#747](https://github.com/atomicdata-dev/atomic-server/issues/747) Show ontology classes on new resource page.
+- Fix server not rebuilding client when files changed.
+
 ## v0.36.2
 
 ### Atomic Browser

browser/data-browser/src/App.tsx

@@ -1,6 +1,7 @@
 import { BrowserRouter } from 'react-router-dom';
 import { HelmetProvider } from 'react-helmet-async';
 import { StoreContext, Store } from '@tomic/react';
+import { StyleSheetManager } from 'styled-components';
 
 import { GlobalStyle, ThemeWrapper } from './styling';
 import { AppRoutes } from './routes/Routes';
@@ -22,7 +23,7 @@ import { PopoverContainer } from './components/Popover';
 import { SkipNav } from './components/SkipNav';
 import { ControlLockProvider } from './hooks/useControlLock';
 import { FormValidationContextProvider } from './components/forms/formValidation/FormValidationContextProvider';
-import { StyleSheetManager } from 'styled-components';
+import { registerCustomCreateActions } from './components/forms/NewForm/CustomCreateActions';
 
 function fixDevUrl(url: string) {
   if (isDev()) {
@@ -60,6 +61,7 @@ const ErrBoundary = window.bugsnagApiKey
 // Fetch all the Properties and Classes - this helps speed up the app.
 store.preloadPropsAndClasses();
 
+registerCustomCreateActions();
 // Register global event handlers.
 registerHandlers(store);
 
@@ -69,6 +71,7 @@ if (isDev()) {
 }
 
 import isPropValid from '@emotion/is-prop-valid';
+import { NewResourceUIProvider } from './components/forms/NewForm/useNewResourceUI';
 
 // This implements the default behavior from styled-components v5
 function shouldForwardProp(propName, target) {
@@ -107,10 +110,12 @@ function App(): JSX.Element {
                           <DialogContainer>
                             <PopoverContainer>
                               <DropdownContainer>
-                                <SkipNav />
-                                <NavWrapper>
-                                  <AppRoutes />
-                                </NavWrapper>
+                                <NewResourceUIProvider>
+                                  <SkipNav />
+                                  <NavWrapper>
+                                    <AppRoutes />
+                                  </NavWrapper>
+                                </NewResourceUIProvider>
                               </DropdownContainer>
                             </PopoverContainer>
                             <NetworkIndicator />

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

@@ -89,7 +89,7 @@ const IconButtonBase = styled.button<ButtonBaseProps>`
   color: ${p => p.theme.colors.text};
   font-size: ${p => p.size ?? '1em'};
   border: none;
-
+  user-select: none;
   padding: var(--button-padding);
   width: calc(${p => p.size} + var(--button-padding) * 2);
   height: calc(${p => p.size} + var(--button-padding) * 2);
@@ -115,7 +115,7 @@ const SimpleIconButton = styled(IconButtonBase)<ButtonStyleProps>`
       background-color: ${p => p.theme.colors.bg1};
     }
 
-    :active {
+    &:active {
       background-color: ${p => p.theme.colors.bg2};
     }
   }

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

@@ -0,0 +1,53 @@
+import { useResource } from '@tomic/react';
+
+import { useSettings } from '../../helpers/AppSettings';
+import { useNewResourceUI } from '../forms/NewForm/useNewResourceUI';
+import { Base } from './Base';
+import { IconType } from 'react-icons';
+
+interface NewInstanceButtonProps {
+  /** URL of the Class to be instantiated */
+  klass: string;
+  subtle?: boolean;
+  icon?: boolean;
+  IconComponent?: IconType;
+  /** subject of the parent Resource, which will be passed to the form */
+  parent?: string;
+  /** Give explicit label. If missing, uses the Shortname of the Class */
+  label?: string;
+  className?: string;
+}
+
+/** A button for creating a new instance of some thing */
+export function NewInstanceButton({
+  klass,
+  subtle,
+  icon,
+  IconComponent,
+  parent,
+  children,
+  label,
+  className,
+}: React.PropsWithChildren<NewInstanceButtonProps>): JSX.Element {
+  const { drive } = useSettings();
+  const classResource = useResource(klass);
+  const showNewResourceUI = useNewResourceUI();
+
+  const onClick = () => {
+    showNewResourceUI(klass, parent ?? drive);
+  };
+
+  return (
+    <Base
+      className={className}
+      onClick={onClick}
+      IconComponent={IconComponent}
+      title={classResource.title}
+      icon={icon}
+      subtle={subtle}
+      label={label}
+    >
+      {children}
+    </Base>
+  );
+}