Fixed Duplicate API Call Bug for describe_table, registration_info, and describe_all queries

src/components/instance/browse/BrowseDatatable.js

@@ -18,7 +18,7 @@ let controller;
 let controller2;
 let controller3;
 
-function BrowseDatatable({ tableState, setTableState, activeTable, tableDescriptionAttributes }) {
+function BrowseDatatable({ tableState, setTableState, activeTable }) {
 	const navigate = useNavigate();
 	const { compute_stack_id, schema, table, customer_id } = useParams();
 	const auth = useStoreState(instanceState, (s) => s.auth);
@@ -74,6 +74,7 @@ function BrowseDatatable({ tableState, setTableState, activeTable, tableDescript
 				hashAttribute,
 				dynamicAttributesFromDataTable,
 				dataTableColumns,
+				schemaAttributes,
 				error,
 			} = await getTableData({
 				schema,
@@ -114,6 +115,7 @@ function BrowseDatatable({ tableState, setTableState, activeTable, tableDescript
 						hashAttribute,
 						dataTableColumns,
 						dynamicAttributesFromDataTable,
+						schemaAttributes,
 						error,
 					});
 				}
@@ -175,7 +177,7 @@ function BrowseDatatable({ tableState, setTableState, activeTable, tableDescript
 						columns={tableState.dataTableColumns || []}
 						data={tableState.tableData || []}
 						error={tableState.error}
-						tableDescriptionAttributes={tableDescriptionAttributes}
+						tableDescriptionAttributes={tableState.schemaAttributes}
 						dynamicAttributesFromDataTable={tableState.dynamicAttributesFromDataTable}
 						currentPage={tableState.page}
 						pageSize={tableState.pageSize}

src/components/instance/browse/EntityManagerRow.js

@@ -58,6 +58,9 @@ function EntityManagerRow({ item, itemType, baseUrl, isActive, toggleDropItem, i
 		toggleConfirmDropItem(false);
 	};
 
+	const syncInstanceStructure = () => {
+		buildInstanceStructure({ auth, url });
+	};
 	const handleSetActive = () =>
 		isActive || isDropping || isConfirmingDropItem ? false : navigate(`${baseUrl}/${item}`);
 
@@ -66,7 +69,10 @@ function EntityManagerRow({ item, itemType, baseUrl, isActive, toggleDropItem, i
 			key={item}
 			title={`View${isActive ? 'ing' : ''} ${itemType} ${item}`}
 			className={`item-row ${isActive ? 'active' : ''}`}
-			onClick={handleSetActive}
+			onClick={() => {
+				handleSetActive();
+				syncInstanceStructure();
+			}}
 			tabIndex="0"
 		>
 			<Col className={`item-label ${isConfirmingDropItem ? 'text-danger text-nowrap' : ''}`}>
@@ -86,7 +92,7 @@ function EntityManagerRow({ item, itemType, baseUrl, isActive, toggleDropItem, i
 							title={`confirm drop ${itemType} ${item}`}
 							onClick={confirmItemForDrop}
 						>
-							<i className="fa fa-check text-white" />
+							<i className="text-white fa fa-check" />
 						</Button>
 						<Button
 							id="cancelDropItem"
@@ -95,7 +101,7 @@ function EntityManagerRow({ item, itemType, baseUrl, isActive, toggleDropItem, i
 							title={`Cancel drop ${itemType} ${item}`}
 							onClick={cancelConfirmDrop}
 						>
-							<i className="fa fa-times text-white" />
+							<i className="text-white fa fa-times" />
 						</Button>
 					</>
 				) : isDropping ? (
@@ -106,7 +112,7 @@ function EntityManagerRow({ item, itemType, baseUrl, isActive, toggleDropItem, i
 						title={`Drop ${itemType} ${item}`}
 						onClick={selectItemForDrop}
 					>
-						<i className="fa fa-minus text-white" />
+						<i className="text-white fa fa-minus" />
 					</Button>
 				) : isActive ? (
 					<Button tabIndex="-1" color="purple" className="round">

src/components/instance/browse/index.js

@@ -5,16 +5,14 @@ import { useStoreState } from 'pullstate';
 import { ErrorBoundary } from 'react-error-boundary';
 
 import instanceState from '../../../functions/state/instanceState';
-import describeTable from '../../../functions/api/instance/describeTable';
 
 import ErrorFallback from '../../shared/ErrorFallback';
 import addError from '../../../functions/api/lms/addError';
 import useInstanceAuth from '../../../functions/state/instanceAuths';
 import EmptyPrompt from '../../shared/EmptyPrompt';
-import buildInstanceStructure from '../../../functions/instance/browse/buildInstanceStructure';
 import { clearTableDescriptionCache } from '../../../functions/instance/state/describeTableCache';
 
-const DataTable = lazy(() => import(/* webpackChunkName: "browse-datatable" */ './BrowseDatatable'));
+const BrowseDatatable = lazy(() => import(/* webpackChunkName: "browse-datatable" */ './BrowseDatatable'));
 const EntityManager = lazy(() => import(/* webpackChunkName: "browse-entitymanager" */ './EntityManager'));
 const JSONEditor = lazy(() => import(/* webpackChunkName: "browse-jsonviewer" */ './JSONEditor'));
 const CSVUpload = lazy(() => import(/* webpackChunkName: "browse-csvupload" */ './CsvUpload'));
@@ -40,7 +38,7 @@ function NoPrimaryKeyMessage({ table }) {
 		<Card className="my-3 missing-primary-key">
 			<CardBody>
 				<CardTitle>No Primary Key</CardTitle>
-				<i className="fa fa-warning mt-3" />
+				<i className="mt-3 fa fa-warning" />
 				<span className="mt-3">
 					The table {`'${table}'`} does not have a primary key. The HarperDB Studio does not currently support tables
 					without a primary key defined. Please see the{' '}
@@ -59,16 +57,13 @@ function BrowseIndex() {
 	const location = useLocation();
 	const { schema, table, action, customer_id, compute_stack_id } = useParams();
 	const [instanceAuths] = useInstanceAuth({});
-	const auth = instanceAuths?.[compute_stack_id];
-	const url = useStoreState(instanceState, (s) => s.url);
 	const registration = useStoreState(instanceState, (s) => s.registration);
 	const version = registration?.version;
 	const [major, minor] = version?.split('.') || [];
 	const versionAsFloat = `${major}.${minor}`;
 	const structure = useStoreState(instanceState, (s) => s.structure);
 	const [entities, setEntities] = useState({ schemas: [], tables: [], activeTable: false });
 	const [tableState, setTableState] = useState(defaultTableState);
-	const [tableDescription, setTableDescription] = useState(null);
 	const baseUrl = `/o/${customer_id}/i/${compute_stack_id}/browse`;
 	const showForm = instanceAuths[compute_stack_id]?.super || instanceAuths[compute_stack_id]?.structure === true;
 	const showTableForm =
@@ -81,29 +76,11 @@ function BrowseIndex() {
 		: "This user has not been granted access to any tables. A super-user must update this user's role.";
 	const [hasHashAttr, setHasHashAttr] = useState(true);
 
-	const syncInstanceStructure = () => {
-		buildInstanceStructure({ auth, url });
-	};
-
-	useEffect(() => {
-		const fetchDescribeTable = async () => {
-			if (table) {
-				try {
-					const result = await describeTable({ auth, url, schema, table });
-					setTableDescription(result);
-				} catch (e) {
-					addError(e);
-				}
-			}
-		};
-		fetchDescribeTable();
-	}, [auth, url, schema, table]);
-
 	useEffect(() => {
-		if (tableDescription) {
-			setHasHashAttr(Boolean(tableDescription.hash_attribute));
+		if (tableState) {
+			setHasHashAttr(Boolean(tableState.hashAttribute));
 		}
-	}, [tableDescription]);
+	}, [tableState]);
 
 	const validate = () => {
 		if (structure) {
@@ -146,7 +123,6 @@ function BrowseIndex() {
 
 	// eslint-disable-next-line
 	useEffect(validate, [structure, schema, table, compute_stack_id]);
-	useEffect(syncInstanceStructure, [auth, url, schema, table]);
 	useEffect(() => {
 		const clearTableDescriptionCacheInterval = setInterval(() => {
 			clearTableDescriptionCache();
@@ -198,12 +174,7 @@ function BrowseIndex() {
 					) : schema && table && action && entities.activeTable ? (
 						<JSONEditor newEntityAttributes={tableState.newEntityAttributes} hashAttribute={tableState.hashAttribute} />
 					) : schema && table && entities.activeTable ? (
-						<DataTable
-							activeTable={entities.activeTable}
-							tableDescriptionAttributes={tableDescription?.attributes}
-							tableState={tableState}
-							setTableState={setTableState}
-						/>
+						<BrowseDatatable activeTable={entities.activeTable} tableState={tableState} setTableState={setTableState} />
 					) : schema && table && !hasHashAttr ? (
 						<NoPrimaryKeyMessage />
 					) : (

src/components/instance/index.js

@@ -68,7 +68,6 @@ function InstanceIndex() {
 		if (thisInstance && instanceAuth) {
 			instanceState.update(() => thisInstance);
 			const { error } = await buildInstanceStructure({ auth: instanceAuth, url: thisInstance.url });
-			await registrationInfo({ auth: instanceAuth, url: thisInstance.url });
 			setLoadingInstance(false);
 			if (error) {
 				if (config.is_local_studio) {

src/functions/instance/getTableData.js

@@ -29,6 +29,7 @@ export default async ({ schema, table, filtered, pageSize, onlyCached, sorted, p
 	let newData = [];
 	let allAttributes = false;
 	let hashAttribute = false;
+	let schemaAttributes = [];
 	let get_attributes = ['*'];
 	let dynamicAttributesFromDataTable = [];
 	const offset = page * pageSize;
@@ -46,6 +47,7 @@ export default async ({ schema, table, filtered, pageSize, onlyCached, sorted, p
 		}
 
 		const { record_count, attributes, hash_attribute } = result;
+		schemaAttributes = attributes;
 		allAttributes = attributes.map((a) => a.attribute);
 		if (hash_attribute === undefined) {
 			hashAttribute = '$id';
@@ -55,6 +57,7 @@ export default async ({ schema, table, filtered, pageSize, onlyCached, sorted, p
 		}
 
 		newTotalRecords = record_count;
+		schemaAttributes = attributes;
 		newTotalPages = newTotalRecords && Math.ceil(newTotalRecords / pageSize);
 	} catch (e) {
 		fetchError = e.message;
@@ -124,6 +127,7 @@ export default async ({ schema, table, filtered, pageSize, onlyCached, sorted, p
 		newTotalRecords,
 		newTotalPages,
 		hashAttribute,
+		schemaAttributes,
 		dataTableColumns,
 		error: fetchError === 'table' ? `You are not authorized to view ${schema}:${table}` : fetchError,
 		dynamicAttributesFromDataTable,