Merge pull request #3850 from specify/issue-3830

Add query builder header in embedded dialog
specify · Sep 29, 2023 · 987ecb8 · 987ecb8
2 parents f560658 + 81735a5
commit 987ecb8
Show file tree

Hide file tree

Showing 6 changed files with 36 additions and 84 deletions.
diff --git a/specifyweb/frontend/js_src/lib/components/Forms/SearchDialog.tsx b/specifyweb/frontend/js_src/lib/components/Forms/SearchDialog.tsx
@@ -3,12 +3,10 @@ import type { LocalizedString } from 'typesafe-i18n';
 
 import { useAsyncState } from '../../hooks/useAsyncState';
 import { useBooleanState } from '../../hooks/useBooleanState';
-import { useCachedState } from '../../hooks/useCachedState';
 import { useId } from '../../hooks/useId';
 import { commonText } from '../../localization/common';
 import { formsText } from '../../localization/forms';
 import { queryText } from '../../localization/query';
-import { wbPlanText } from '../../localization/wbPlan';
 import { queryCbxExtendedSearch } from '../../utils/ajax/specifyApi';
 import type { RA } from '../../utils/types';
 import { sortFunction } from '../../utils/utils';
@@ -264,8 +262,6 @@ function QueryBuilderSearch<SCHEMA extends AnySchema>({
   );
   const [selected, setSelected] = React.useState<RA<number>>([]);
 
-  const [showEmbeddedMappingView = true, setShowEmbeddedMappingView] =
-    useCachedState('queryBuilder', 'showMappingView');
   return (
     <Dialog
       buttons={
@@ -288,18 +284,6 @@ function QueryBuilderSearch<SCHEMA extends AnySchema>({
       }}
       dimensionsKey="QueryBuilder"
       header={queryText.queryBuilder()}
-      headerButtons={
-        <>
-          <span className="-ml-2 flex-1" />
-          <Button.Small
-            onClick={() => setShowEmbeddedMappingView(!showEmbeddedMappingView)}
-          >
-            {showEmbeddedMappingView
-              ? wbPlanText.hideFieldMapper()
-              : wbPlanText.showFieldMapper()}
-          </Button.Small>
-        </>
-      }
       onClose={handleClose}
     >
       <QueryBuilder

diff --git a/specifyweb/frontend/js_src/lib/components/QueryBuilder/Components.tsx b/specifyweb/frontend/js_src/lib/components/QueryBuilder/Components.tsx
@@ -29,6 +29,7 @@ import { ButtonWithConfirmation } from '../WbPlanView/Components';
 import { mappingPathIsComplete } from '../WbPlanView/helpers';
 import type { QueryField } from './helpers';
 import { QuerySaveDialog } from './Save';
+import { useCachedState } from '../../hooks/useCachedState';
 
 export function SaveQueryButtons({
   isReadOnly,
@@ -126,17 +127,18 @@ export function SaveQueryButtons({
 
 export function ToggleMappingViewButton({
   fields,
-  showMappingView,
-  onClick: handleClick,
 }: {
   readonly fields: RA<QueryField>;
-  readonly showMappingView: boolean;
-  readonly onClick: () => void;
 }): JSX.Element {
+  const [showMappingView = true, setShowMappingView] = useCachedState(
+    'queryBuilder',
+    'showMappingView'
+  );
+
   return (
     <Button.Small
       disabled={fields.length === 0 && showMappingView}
-      onClick={handleClick}
+      onClick={() => setShowMappingView(!showMappingView)}
     >
       {showMappingView
         ? wbPlanText.hideFieldMapper()

diff --git a/specifyweb/frontend/js_src/lib/components/QueryBuilder/Header.tsx b/specifyweb/frontend/js_src/lib/components/QueryBuilder/Header.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
 import { useNavigate } from 'react-router-dom';
 
-import { useCachedState } from '../../hooks/useCachedState';
 import { commonText } from '../../localization/common';
 import { preferencesText } from '../../localization/preferences';
 import { queryText } from '../../localization/query';
@@ -40,6 +39,7 @@ export function QueryHeader({
   isScrolledTop,
   form,
   state,
+  isEmbedded,
   getQueryFieldRecords,
   isReadOnly,
   saveRequired,
@@ -53,6 +53,7 @@ export function QueryHeader({
   readonly isScrolledTop: boolean;
   readonly form: HTMLFormElement | null;
   readonly state: MainState;
+  readonly isEmbedded: boolean;
   readonly getQueryFieldRecords:
     | (() => RA<SerializedResource<SpQueryField>>)
     | undefined;
@@ -78,11 +79,6 @@ export function QueryHeader({
 
   const [isBasic, setIsBasic] = useQueryViewPref(query.id);
 
-  const [showMappingView = true, setShowMappingView] = useCachedState(
-    'queryBuilder',
-    'showMappingView'
-  );
-
   return (
     <header
       className={`
@@ -138,15 +134,11 @@ export function QueryHeader({
             ? preferencesText.detailedView()
             : preferencesText.basicView()}
         </Button.Small>
-        <ToggleMappingViewButton
-          fields={state.fields}
-          showMappingView={showMappingView}
-          onClick={() => setShowMappingView(!showMappingView)}
-        />
+        <ToggleMappingViewButton fields={state.fields} />
         {hasToolPermission(
           'queryBuilder',
           queryResource.isNew() ? 'create' : 'update'
-        ) && (
+        ) && !isEmbedded ? (
           <SaveQueryButtons
             fields={state.fields}
             getQueryFieldRecords={getQueryFieldRecords}
@@ -168,7 +160,7 @@ export function QueryHeader({
               );
             }}
           />
-        )}
+        ) : null}
       </div>
     </header>
   );

diff --git a/specifyweb/frontend/js_src/lib/components/QueryBuilder/Wrapped.tsx b/specifyweb/frontend/js_src/lib/components/QueryBuilder/Wrapped.tsx
@@ -104,11 +104,6 @@ export function QueryBuilder({
     new Set()
   );
 
-  const [showMappingView = true, _] = useCachedState(
-    'queryBuilder',
-    'showMappingView'
-  );
-
   const model = getModelById(query.contextTableId);
   const buildInitialState = React.useCallback(
     () =>
@@ -120,6 +115,12 @@ export function QueryBuilder({
       }),
     [queryResource, model, autoRun]
   );
+
+  const [showMappingView = true, _] = useCachedState(
+    'queryBuilder',
+    'showMappingView'
+  );
+
   const [state, dispatch] = React.useReducer(reducer, pendingState);
   React.useEffect(() => {
     dispatch({
@@ -298,22 +299,21 @@ export function QueryBuilder({
          * FEATURE: For embedded queries, add a button to open query in new tab
          *   See https://github.com/specify/specify7/issues/3000
          */}
-        {!isEmbedded && (
-          <QueryHeader
-            form={form}
-            getQueryFieldRecords={getQueryFieldRecords}
-            isReadOnly={isReadOnly}
-            isScrolledTop={isScrolledTop}
-            query={query}
-            queryResource={queryResource}
-            recordSet={recordSet}
-            saveRequired={saveRequired}
-            state={state}
-            unsetUnloadProtect={unsetUnloadProtect}
-            onSaved={(): void => dispatch({ type: 'SavedQueryAction' })}
-            onTriedToSave={handleTriedToSave}
-          />
-        )}
+        <QueryHeader
+          form={form}
+          getQueryFieldRecords={getQueryFieldRecords}
+          isEmbedded={isEmbedded}
+          isReadOnly={isReadOnly}
+          isScrolledTop={isScrolledTop}
+          query={query}
+          queryResource={queryResource}
+          recordSet={recordSet}
+          saveRequired={saveRequired}
+          state={state}
+          unsetUnloadProtect={unsetUnloadProtect}
+          onSaved={(): void => dispatch({ type: 'SavedQueryAction' })}
+          onTriedToSave={handleTriedToSave}
+        />
         <CheckReadAccess query={query} />
         <Form
           className={`
@@ -365,7 +365,7 @@ export function QueryBuilder({
           }}
         >
           <div className="flex snap-start flex-col gap-4 overflow-y-auto">
-            {showMappingView ? (
+            {showMappingView && (
               <MappingView
                 mappingElementProps={getMappingLineProps({
                   mappingLineData: mutateLineData(
@@ -422,7 +422,7 @@ export function QueryBuilder({
                   </Button.Small>
                 )}
               </MappingView>
-            ) : null}
+            )}
             <QueryFields
               baseTableName={state.baseTableName}
               enforceLengthLimit={triedToSave}

diff --git a/specifyweb/frontend/js_src/lib/components/QueryBuilder/reducer.ts b/specifyweb/frontend/js_src/lib/components/QueryBuilder/reducer.ts
@@ -5,7 +5,6 @@
 import type { Action, State } from 'typesafe-reducer';
 import { generateReducer } from 'typesafe-reducer';
 
-import { setCache } from '../../utils/cache';
 import type { RA } from '../../utils/types';
 import { moveItem, replaceItem } from '../../utils/utils';
 import type { SerializedResource } from '../DataModel/helperTypes';
@@ -93,8 +92,7 @@ type Actions =
   | Action<'FocusLineAction', { readonly line: number }>
   | Action<'ResetStateAction', { readonly state: MainState }>
   | Action<'RunQueryAction'>
-  | Action<'SavedQueryAction'>
-  | Action<'ToggleMappingViewAction', { readonly isVisible: boolean }>;
+  | Action<'SavedQueryAction'>;
 
 export const reducer = generateReducer<MainState, Actions>({
   ResetStateAction: ({ action: { state } }) => state,
@@ -132,14 +130,6 @@ export const reducer = generateReducer<MainState, Actions>({
     },
     fields: moveItem(state.fields, action.line, action.direction),
   }),
-  ToggleMappingViewAction: ({ action, state }) => ({
-    ...state,
-    showMappingView: setCache(
-      'queryBuilder',
-      'showMappingView',
-      action.isVisible
-    ),
-  }),
   ChangeFieldsAction: ({ action, state }) => ({
     ...state,
     fields: action.fields,

diff --git a/specifyweb/frontend/js_src/lib/components/Statistics/ResultsDialog.tsx b/specifyweb/frontend/js_src/lib/components/Statistics/ResultsDialog.tsx
@@ -1,10 +1,8 @@
 import React from 'react';
 
-import { useCachedState } from '../../hooks/useCachedState';
 import { useLiveState } from '../../hooks/useLiveState';
 import { commonText } from '../../localization/common';
 import { formsText } from '../../localization/forms';
-import { wbPlanText } from '../../localization/wbPlan';
 import type { RA } from '../../utils/types';
 import { Button } from '../Atoms/Button';
 import { serializeResource } from '../DataModel/helpers';
@@ -55,8 +53,6 @@ export function FrontEndStatsResultDialog({
   );
   const isDisabled = query.fields.length === 0 || handleEdit === undefined;
 
-  const [showEmbeddedMappingView = true, setShowEmbeddedMappingView] =
-    useCachedState('queryBuilder', 'showMappingView');
   return (
     <Dialog
       buttons={
@@ -95,18 +91,6 @@ export function FrontEndStatsResultDialog({
       }}
       dimensionsKey="QueryBuilder"
       header={label}
-      headerButtons={
-        <>
-          <span className="-ml-2 flex-1" />
-          <Button.Small
-            onClick={() => setShowEmbeddedMappingView(!showEmbeddedMappingView)}
-          >
-            {showEmbeddedMappingView
-              ? wbPlanText.hideFieldMapper()
-              : wbPlanText.showFieldMapper()}
-          </Button.Small>
-        </>
-      }
       onClose={handleClose}
     >
       <QueryBuilder