#747 New Resource Refactor

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);
 

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>
+  );
+}

browser/data-browser/src/components/NewInstanceButton/index.ts

@@ -0,0 +1 @@
+export * from './NewInstanceButton';