chore: Consistently refer to this as New Table

https://harperdb.atlassian.net/browse/STUDIO-463

Author: dawsontoth

src/features/instance/applications/components/AddSchemaForm/index.tsx

@@ -37,7 +37,7 @@ const addSchema = z.object({
 });
 
 export function AddSchemaForm() {
-	const closeModal = useSetWatchedValue('ShowAddSchemaModal', false);
+	const closeModal = useSetWatchedValue('ShowNewTableModal', false);
 	const { openedEntry, openedEntryContents } = useEditorView();
 	const { setContent } = useEditorFileContent(!!openedEntry && !openedEntry.package && openedEntry.path);
 
@@ -317,6 +317,19 @@ type ${formData.tableName} @table${formData.replicate ? '' : '(replicate: false)
 					<Plus /> Add Another Field
 				</Button>
 
+				<div className="text-muted-foreground italic text-sm pb-2">
+					There are even more directives available to you when editing your schema.graphql by hand! You can read more
+					about them{' '}
+					<a
+						className="underline"
+						target="_blank"
+						rel="noreferrer"
+						href="https://docs.harperdb.io/docs/developers/applications/defining-schemas"
+					>
+						in our documentation
+					</a>.
+				</div>
+
 				<div className="flex w-full gap-4">
 					<Button variant="ghost" className="w-full rounded-full" onClick={closeModal}>
 						<Ban /> Cancel
@@ -327,7 +340,7 @@ type ${formData.tableName} @table${formData.replicate ? '' : '(replicate: false)
 						className="w-full rounded-full"
 						disabled={!formState.isValid}
 					>
-						<PlusIcon /> Add Schema
+						<PlusIcon /> New Table
 					</Button>
 				</div>
 			</form>

src/features/instance/applications/components/ContentActions.tsx

@@ -47,7 +47,7 @@ export function ContentActions({
 	const onRedeployClick = useSetWatchedValue('ShowRedeployApplicationModal', true);
 	const onSaveClick = useEmitToListeners('SaveFile', true);
 	const onRevertChangesClicked = useEmitToListeners('RevertChanges', true);
-	const onAddSchemaClick = useEmitToListeners('ShowAddSchemaModal', true);
+	const onNewTableClick = useEmitToListeners('ShowNewTableModal', true);
 
 	const fileIsClean = updatedFileContent === undefined || updatedFileContent === openedEntryContents;
 
@@ -148,7 +148,7 @@ export function ContentActions({
 					)}
 
 					{openedEntry.path.endsWith('.graphql') && canManageBrowseInstance && (
-						<Button variant="ghost" className="rounded-none" onClick={onAddSchemaClick} title="New Table">
+						<Button variant="ghost" className="rounded-none" onClick={onNewTableClick} title="New Table">
 							<PlusIcon className="pointer-events-none" />
 							<span className="hidden lg:inline-block pointer-events-none">
 								<span className="hidden xl:inline-block">New</span> Table

src/features/instance/applications/context/EditorViewProvider.tsx

@@ -21,6 +21,7 @@ import {
 	useSetComponentFile,
 } from '@/integrations/api/instance/applications/setComponentFile';
 import { transformNodes } from '@/lib/arrays/transformNodes';
+import { setWatchedValue } from '@/lib/events/watcher';
 import { useQuery, useQueryClient, useSuspenseQuery } from '@tanstack/react-query';
 import { useNavigate, useSearch } from '@tanstack/react-router';
 import { PropsWithChildren, useCallback, useEffect, useMemo, useState } from 'react';
@@ -113,18 +114,29 @@ export function EditorViewProvider({ children }: PropsWithChildren) {
 	 */
 	useEffect(() => {
 		if (open?.length) {
-			const parts = open.split('/');
+			// ./schema.graphql?ShowNewTableModal=true
+			const openParts = open.split('?');
+			const ref = openParts[0];
+			const action = openParts[1];
+			const refParts = ref.split('/');
 
+			if (action) {
+				const actionParts = action.split('=');
+				setWatchedValue(
+					actionParts[0] as any,
+					actionParts[1] === 'true' ? true : actionParts[1] === 'false' ? false : actionParts[1],
+				);
+			}
 			setExpandedItems(expandedItems => {
 				const expansion = new Set(expandedItems);
-				for (let i = 1; i < parts.length; i++) {
-					expansion.add(parts.slice(0, i).join('/'));
+				for (let i = 1; i < refParts.length; i++) {
+					expansion.add(refParts.slice(0, i).join('/'));
 				}
 				return [...expansion];
 			});
 
-			setSelectedItems([open]);
-			setFocusedItem(open);
+			setSelectedItems([ref]);
+			setFocusedItem(ref);
 
 			void navigate({ search: undefined });
 		}

src/features/instance/applications/index.tsx

@@ -1,4 +1,3 @@
-import { AddSchemaModal } from '@/features/instance/applications/modals/AddSchemaModal';
 import { useSessionToggler } from '@/hooks/useSessionToggler';
 import { cx } from 'class-variance-authority';
 import { ApplicationsSidebar } from './components/ApplicationsSidebar';
@@ -8,6 +7,7 @@ import { EditorViewProvider } from './context/EditorViewProvider';
 import { AddDirectoryOrFileModal } from './modals/AddDirectoryOrFileModal';
 import { DeleteDirectoryOrFileModal } from './modals/DeleteDirectoryOrFileModal';
 import { DownloadApplicationModal } from './modals/DownloadApplicationModal';
+import { NewTableModal } from './modals/NewTableModal';
 import { RedeployApplicationModal } from './modals/RedeployApplicationModal';
 import { RenameFileModal } from './modals/RenameFileModal';
 
@@ -44,7 +44,7 @@ export function ApplicationsEditor() {
 			</div>
 
 			<AddDirectoryOrFileModal />
-			<AddSchemaModal />
+			<NewTableModal />
 			<DeleteDirectoryOrFileModal />
 			<DownloadApplicationModal />
 			<RedeployApplicationModal />

…e/applications/modals/AddSchemaModal.tsx …ce/applications/modals/NewTableModal.tsxsrc/features/instance/applications/modals/AddSchemaModal.tsx renamed to src/features/instance/applications/modals/NewTableModal.tsx src/features/instance/applications/modals/AddSchemaModal.tsx renamed to src/features/instance/applications/modals/NewTableModal.tsx

@@ -4,19 +4,19 @@ import { attemptToRestoreFocus } from '@/lib/attemptToRestoreFocus';
 import { setWatchedValue, useWatchedValue } from '@/lib/events/watcher';
 import { useCallback } from 'react';
 
-export function AddSchemaModal() {
-	const { value: isModalOpen, trigger } = useWatchedValue('ShowAddSchemaModal', false);
+export function NewTableModal() {
+	const { value: isModalOpen, trigger } = useWatchedValue('ShowNewTableModal', false);
 
 	const closeModal = useCallback(() => {
-		setWatchedValue('ShowAddSchemaModal', false);
+		setWatchedValue('ShowNewTableModal', false);
 		attemptToRestoreFocus(trigger);
 	}, [trigger]);
 
 	return (
 		<Dialog onOpenChange={closeModal} open={isModalOpen}>
 			<DialogContent aria-describedby={undefined} className="text-white">
 				<DialogHeader>
-					<DialogTitle>Add Schema</DialogTitle>
+					<DialogTitle>New Table</DialogTitle>
 					<DialogDescription>
 						Creating a table is the basis of a data-driven application and can immediately be used as RESTful endpoints.
 						This can also be configured as a caching table and extended and customized for specific endpoint behavior.

src/lib/storage/watchedValueKeys.ts

@@ -2,7 +2,7 @@ export interface WatchedValuesTypeMap {
 	RevertChanges: true;
 	SaveFile: true;
 	ShowAddDirectoryOrFileModalType: 'file' | 'directory' | false;
-	ShowAddSchemaModal: boolean;
+	ShowNewTableModal: boolean;
 	ShowDeleteDirectoryOrFileModal: boolean;
 	ShowDownloadApplicationModal: boolean;
 	ShowRedeployApplicationModal: boolean;