minor improvements (finos#3695)

akphi · Dec 2, 2024 · 1e2a720 · 1e2a720
1 parent 1d3a8c4
commit 1e2a720
Show file tree

Hide file tree

Showing 9 changed files with 126 additions and 40 deletions.
diff --git a/.changeset/beige-hairs-destroy.md b/.changeset/beige-hairs-destroy.md
@@ -0,0 +1,4 @@
+---
+'@finos/legend-application-query': patch
+'@finos/legend-lego': patch
+---
diff --git a/.changeset/healthy-bottles-wait.md b/.changeset/healthy-bottles-wait.md
@@ -0,0 +1,5 @@
+---
+'@finos/legend-query-builder': patch
+---
+
+minor improvements
diff --git a/packages/legend-application-query/src/components/QueryEditor.tsx b/packages/legend-application-query/src/components/QueryEditor.tsx
@@ -345,7 +345,10 @@ export const QueryEditorExistingQueryHeader = observer(
                   )}
                   onChange={changeQueryName}
                   onKeyDown={(event) => {
-                    if (event.code === 'Enter') {
+                    if (
+                      event.code === 'Enter' ||
+                      event.code === 'NumpadEnter'
+                    ) {
                       event.stopPropagation();
                       updateState.setQueryRenamer(false);
                       existingEditorStore.setExistingQueryName(undefined);
@@ -367,6 +370,29 @@ export const QueryEditorExistingQueryHeader = observer(
                   </div>
                 )}
               </div>
+              <div className="query-editor__header__content__title__actions">
+                <button
+                  className="query-editor__header__content__title__actions__action"
+                  tabIndex={-1}
+                  onClick={() => {
+                    updateState.setQueryRenamer(false);
+                    existingEditorStore.setExistingQueryName(undefined);
+                    renameQuery(queryRenameName);
+                  }}
+                >
+                  <CheckIcon />
+                </button>
+                <button
+                  className="query-editor__header__content__title__actions__action"
+                  tabIndex={-1}
+                  onClick={() => {
+                    updateState.setQueryRenamer(false);
+                    existingEditorStore.setExistingQueryName(undefined);
+                  }}
+                >
+                  <TimesIcon />
+                </button>
+              </div>
             </PanelListItem>
           </div>
         ) : (

diff --git a/packages/legend-application-query/style/_query-editor.scss b/packages/legend-application-query/style/_query-editor.scss
@@ -109,6 +109,29 @@
       &__title__text--unsaved {
         margin: 0;
       }
+
+      &__title__actions {
+        @include flexVCenter;
+
+        height: 100%;
+        width: 3.4rem;
+        margin-left: 0.5rem;
+
+        &__action {
+          @include flexCenter;
+
+          height: 3.4rem;
+          width: 3.4rem;
+
+          svg {
+            color: var(--color-light-grey-400);
+          }
+
+          &:hover svg {
+            color: var(--color-light-grey-100);
+          }
+        }
+      }
     }
 
     &__actions {

diff --git a/packages/legend-lego/style/application/_undo-redo-button.scss b/packages/legend-lego/style/application/_undo-redo-button.scss
@@ -31,6 +31,8 @@
     &__label {
       font-size: 1.2rem;
       font-weight: 700;
+      display: inline-block;
+      line-height: 1;
     }
   }
 

diff --git a/packages/legend-query-builder/src/components/QueryBuilderTextEditor.tsx b/packages/legend-query-builder/src/components/QueryBuilderTextEditor.tsx
@@ -158,38 +158,64 @@ export const QueryBuilderTextEditor = observer(
               </ModalFooterStatus>
             )}
             {isEditingPure ? (
-              <ModalFooterButton
-                className="btn--caution"
-                onClick={discardChanges}
-                text="Discard Changes"
-              />
+              <>
+                <ModalFooterButton
+                  onClick={close}
+                  disabled={
+                    Boolean(queryTextEditorState.parserError) ||
+                    queryBuilderState.textEditorState.closingQueryState
+                      .isInProgress
+                  }
+                >
+                  {queryBuilderState.textEditorState.closingQueryState
+                    .isInProgress ? (
+                    <>
+                      <div className="loading-icon__container--spinning">
+                        <RefreshIcon />
+                        Proceeding
+                      </div>
+                    </>
+                  ) : (
+                    <> Proceed </>
+                  )}
+                </ModalFooterButton>
+                <ModalFooterButton
+                  className="btn--caution"
+                  onClick={discardChanges}
+                  type="secondary"
+                  text="Cancel"
+                />
+              </>
             ) : (
-              <ModalFooterButton
-                formatText={false}
-                onClick={copyExpression}
-                text="Copy to Clipboard"
-              />
+              <>
+                <ModalFooterButton
+                  formatText={false}
+                  onClick={copyExpression}
+                  text="Copy to Clipboard"
+                />
+                <ModalFooterButton
+                  onClick={close}
+                  disabled={
+                    Boolean(queryTextEditorState.parserError) ||
+                    queryBuilderState.textEditorState.closingQueryState
+                      .isInProgress
+                  }
+                  type="secondary"
+                >
+                  {queryBuilderState.textEditorState.closingQueryState
+                    .isInProgress ? (
+                    <>
+                      <div className="loading-icon__container--spinning">
+                        <RefreshIcon />
+                        Closing
+                      </div>
+                    </>
+                  ) : (
+                    <> Close </>
+                  )}
+                </ModalFooterButton>
+              </>
             )}
-            <ModalFooterButton
-              onClick={close}
-              disabled={
-                Boolean(queryTextEditorState.parserError) ||
-                queryBuilderState.textEditorState.closingQueryState.isInProgress
-              }
-              type="secondary"
-            >
-              {queryBuilderState.textEditorState.closingQueryState
-                .isInProgress ? (
-                <>
-                  <div className="loading-icon__container--spinning">
-                    <RefreshIcon />
-                    Closing
-                  </div>
-                </>
-              ) : (
-                <> Close </>
-              )}
-            </ModalFooterButton>
           </ModalFooter>
         </Modal>
       </Dialog>

diff --git a/packages/legend-query-builder/src/components/__tests__/QueryBuilderParametersPanel.test.tsx b/packages/legend-query-builder/src/components/__tests__/QueryBuilderParametersPanel.test.tsx
@@ -707,7 +707,7 @@ test(
       fireEvent.click(renderResult.getByText('Edit Pure'));
     });
     const lambdaEditor = await waitFor(() => renderResult.getByRole('dialog'));
-    fireEvent.click(getByText(lambdaEditor, 'Close'));
+    fireEvent.click(getByText(lambdaEditor, 'Proceed'));
     await waitFor(() =>
       renderResult.getByTestId(QUERY_BUILDER_TEST_ID.QUERY_BUILDER_PARAMETERS),
     );
@@ -851,7 +851,7 @@ test(
       fireEvent.click(renderResult.getByText('Edit Pure'));
     });
     const lambdaEditor = await waitFor(() => renderResult.getByRole('dialog'));
-    fireEvent.click(getByText(lambdaEditor, 'Close'));
+    fireEvent.click(getByText(lambdaEditor, 'Proceed'));
     await waitFor(() =>
       renderResult.getByTestId(QUERY_BUILDER_TEST_ID.QUERY_BUILDER_PARAMETERS),
     );

diff --git a/packages/legend-query-builder/src/components/__tests__/QueryBuilderResultPanel.test.ts b/packages/legend-query-builder/src/components/__tests__/QueryBuilderResultPanel.test.ts
@@ -231,7 +231,7 @@ describe(integrationTest('Query builder result state'), () => {
       );
 
       await act(async () => {
-        fireEvent.click(getByText(lambdaEditor, 'Close'));
+        fireEvent.click(getByText(lambdaEditor, 'Proceed'));
       });
       expect(queryBuilderState.resultState.executionResult).toEqual(
         executionResult,

diff --git a/packages/legend-query-builder/src/components/shared/LambdaEditor.tsx b/packages/legend-query-builder/src/components/shared/LambdaEditor.tsx
@@ -658,14 +658,14 @@ const LambdaEditor_PopUp = observer(
           </ModalBody>
           <ModalFooter>
             <ModalFooterButton
-              className="btn--caution"
-              text="Discard changes"
-              onClick={discardChanges}
-            />
-            <ModalFooterButton
-              text="Close"
+              text="Proceed"
               onClick={onClose}
               disabled={Boolean(lambdaEditorState.parserError)}
+            />
+            <ModalFooterButton
+              className="btn--caution"
+              text="Cancel"
+              onClick={discardChanges}
               type="secondary"
             />
           </ModalFooter>