-
Notifications
You must be signed in to change notification settings - Fork 3.8k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
chore: Adding new name editor for JS object in toolbar (#37056)
## Description Adding new name editor for JS object in toolbar under modularised flow. Fixes [#36964](#36964) ## Automation /ok-to-test tags="@tag.Sanity, @tag.JS" ### 🔍 Cypress test results <!-- This is an auto-generated comment: Cypress test results --> > [!TIP] > 🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉 > Workflow run: <https://github.com/appsmithorg/appsmith/actions/runs/11496788011> > Commit: 7ae7ec7 > <a href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=11496788011&attempt=1" target="_blank">Cypress dashboard</a>. > Tags: `@tag.Sanity, @tag.JS` > Spec: > <hr>Thu, 24 Oct 2024 10:42:17 UTC <!-- end of auto-generated comment: Cypress test results --> ## Communication Should the DevRel and Marketing teams inform users about this change? - [ ] Yes - [ ] No <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit - **New Features** - Introduced a new optional name editor in the JSEditor, allowing users to edit JavaScript object names dynamically. - Enhanced the JSEditorToolbar to conditionally render the name editor based on user permissions. - **Bug Fixes** - Simplified the props for the JSObjectNameEditor component by removing unnecessary properties. - **Documentation** - Updated export statements to ensure accessibility of the new JSObjectNameEditor component across modules. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
- Loading branch information
1 parent
1702304
commit 3d9d08a
Showing
6 changed files
with
251 additions
and
10 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
232 changes: 232 additions & 0 deletions
232
...lient/src/pages/Editor/JSEditor/JSEditorToolbar/JSObjectNameEditor/JSObjectNameEditor.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,232 @@ | ||
| import React, { useEffect, useMemo, useRef, useState } from "react"; | ||
| import { useSelector } from "react-redux"; | ||
| import { useFeatureFlag } from "utils/hooks/useFeatureFlag"; | ||
| import { FEATURE_FLAG } from "ee/entities/FeatureFlag"; | ||
| import type { ReduxAction } from "ee/constants/ReduxActionConstants"; | ||
| import { getSavingStatusForJSObjectName } from "selectors/actionSelectors"; | ||
| import { getAssetUrl } from "ee/utils/airgapHelpers"; | ||
| import { Spinner, Text as ADSText, Tooltip, Flex } from "@appsmith/ads"; | ||
| import { usePrevious } from "@mantine/hooks"; | ||
| import styled from "styled-components"; | ||
| import { useNameEditor } from "utils/hooks/useNameEditor"; | ||
| import { useBoolean, useEventCallback, useEventListener } from "usehooks-ts"; | ||
| import { noop } from "lodash"; | ||
| import { useParams } from "react-router"; | ||
| import type { AppState } from "ee/reducers"; | ||
| import { | ||
| getJsCollectionByBaseId, | ||
| getPlugin, | ||
| } from "ee/selectors/entitiesSelector"; | ||
| import { JSObjectNameEditor as OldJSObjectNameEditor } from "./old/JSObjectNameEditor"; | ||
|
|
||
| export interface SaveActionNameParams { | ||
| id: string; | ||
| name: string; | ||
| } | ||
|
|
||
| export interface JSObjectNameEditorProps { | ||
| disabled?: boolean; | ||
| saveJSObjectName: ( | ||
| params: SaveActionNameParams, | ||
| ) => ReduxAction<SaveActionNameParams>; | ||
| } | ||
|
|
||
| export const NameWrapper = styled(Flex)` | ||
| height: 100%; | ||
| position: relative; | ||
| font-size: 12px; | ||
| color: var(--ads-v2-colors-text-default); | ||
| cursor: pointer; | ||
| gap: var(--ads-v2-spaces-2); | ||
| align-items: center; | ||
| justify-content: center; | ||
| padding: var(--ads-v2-spaces-3); | ||
| `; | ||
|
|
||
| export const IconContainer = styled.div` | ||
| height: 12px; | ||
| width: 12px; | ||
| display: flex; | ||
| align-items: center; | ||
| justify-content: center; | ||
| flex-shrink: 0; | ||
| img { | ||
| width: 12px; | ||
| } | ||
| `; | ||
|
|
||
| export const Text = styled(ADSText)` | ||
| min-width: 3ch; | ||
| padding: 0 var(--ads-v2-spaces-1); | ||
| font-weight: 500; | ||
| `; | ||
|
|
||
| export const JSObjectNameEditor = (props: JSObjectNameEditorProps) => { | ||
| const params = useParams<{ | ||
| baseCollectionId?: string; | ||
| baseQueryId?: string; | ||
| }>(); | ||
|
|
||
| const currentJSObjectConfig = useSelector((state: AppState) => | ||
| getJsCollectionByBaseId(state, params.baseCollectionId || ""), | ||
| ); | ||
|
|
||
| const currentPlugin = useSelector((state: AppState) => | ||
| getPlugin(state, currentJSObjectConfig?.pluginId || ""), | ||
| ); | ||
|
|
||
| const isLoading = useSelector( | ||
| (state) => | ||
| getSavingStatusForJSObjectName(state, currentJSObjectConfig?.id || "") | ||
| .isSaving, | ||
| ); | ||
|
|
||
| const title = currentJSObjectConfig?.name || ""; | ||
| const previousTitle = usePrevious(title); | ||
| const [editableTitle, setEditableTitle] = useState(title); | ||
| const [validationError, setValidationError] = useState<string | null>(null); | ||
| const inputRef = useRef<HTMLInputElement>(null); | ||
|
|
||
| const { handleNameSave, normalizeName, validateName } = useNameEditor({ | ||
| entityId: params?.baseCollectionId || "", | ||
| entityName: title, | ||
| nameSaveAction: props.saveJSObjectName, | ||
| }); | ||
|
|
||
| const { | ||
| setFalse: exitEditMode, | ||
| setTrue: enterEditMode, | ||
| value: isEditing, | ||
| } = useBoolean(false); | ||
|
|
||
| const currentTitle = | ||
| isEditing || isLoading || title !== editableTitle ? editableTitle : title; | ||
|
|
||
| const handleKeyUp = useEventCallback( | ||
| (e: React.KeyboardEvent<HTMLInputElement>) => { | ||
| if (e.key === "Enter") { | ||
| const nameError = validateName(editableTitle); | ||
|
|
||
| if (nameError === null) { | ||
| exitEditMode(); | ||
| handleNameSave(editableTitle); | ||
| } else { | ||
| setValidationError(nameError); | ||
| } | ||
| } else if (e.key === "Escape") { | ||
| exitEditMode(); | ||
| setEditableTitle(title); | ||
| setValidationError(null); | ||
| } else { | ||
| setValidationError(null); | ||
| } | ||
| }, | ||
| ); | ||
|
|
||
| const handleTitleChange = useEventCallback( | ||
| (e: React.ChangeEvent<HTMLInputElement>) => { | ||
| setEditableTitle(normalizeName(e.target.value)); | ||
| }, | ||
| ); | ||
|
|
||
| const handleEnterEditMode = useEventCallback(() => { | ||
| setEditableTitle(title); | ||
| enterEditMode(); | ||
| }); | ||
|
|
||
| const handleDoubleClick = props.disabled ? noop : handleEnterEditMode; | ||
|
|
||
| const inputProps = useMemo( | ||
| () => ({ | ||
| onKeyUp: handleKeyUp, | ||
| onChange: handleTitleChange, | ||
| autoFocus: true, | ||
| style: { | ||
| paddingTop: 0, | ||
| paddingBottom: 0, | ||
| left: -1, | ||
| top: -1, | ||
| }, | ||
| }), | ||
| [handleKeyUp, handleTitleChange], | ||
| ); | ||
|
|
||
| useEventListener( | ||
| "focusout", | ||
| function handleFocusOut() { | ||
| if (isEditing) { | ||
| const nameError = validateName(editableTitle); | ||
|
|
||
| exitEditMode(); | ||
|
|
||
| if (nameError === null) { | ||
| handleNameSave(editableTitle); | ||
| } else { | ||
| setEditableTitle(title); | ||
| setValidationError(null); | ||
| } | ||
| } | ||
| }, | ||
| inputRef, | ||
| ); | ||
|
|
||
| useEffect( | ||
| function syncEditableTitle() { | ||
| if (!isEditing && previousTitle !== title) { | ||
| setEditableTitle(title); | ||
| } | ||
| }, | ||
| [title, previousTitle, isEditing], | ||
| ); | ||
|
|
||
| useEffect( | ||
| function recaptureFocusInEventOfFocusRetention() { | ||
| const input = inputRef.current; | ||
|
|
||
| if (isEditing && input) { | ||
| setTimeout(() => { | ||
| input.focus(); | ||
| }, 200); | ||
| } | ||
| }, | ||
| [isEditing], | ||
| ); | ||
|
|
||
| const isActionRedesignEnabled = useFeatureFlag( | ||
| FEATURE_FLAG.release_actions_redesign_enabled, | ||
| ); | ||
|
|
||
| if (!isActionRedesignEnabled) { | ||
| return ( | ||
| <OldJSObjectNameEditor | ||
| disabled={props.disabled} | ||
| saveJSObjectName={props.saveJSObjectName} | ||
| /> | ||
| ); | ||
| } | ||
|
|
||
| return ( | ||
| <NameWrapper onDoubleClick={handleDoubleClick}> | ||
| {currentPlugin && !isLoading ? ( | ||
| <IconContainer> | ||
| <img | ||
| alt={currentPlugin.name} | ||
| src={getAssetUrl(currentPlugin.iconLocation)} | ||
| /> | ||
| </IconContainer> | ||
| ) : null} | ||
| {isLoading && <Spinner size="sm" />} | ||
|
|
||
| <Tooltip content={validationError} visible={Boolean(validationError)}> | ||
| <Text | ||
| inputProps={inputProps} | ||
| inputRef={inputRef} | ||
| isEditable={isEditing} | ||
| kind="body-s" | ||
| > | ||
| {currentTitle} | ||
| </Text> | ||
| </Tooltip> | ||
| </NameWrapper> | ||
| ); | ||
| }; |
4 changes: 4 additions & 0 deletions
4
app/client/src/pages/Editor/JSEditor/JSEditorToolbar/JSObjectNameEditor/index.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,4 @@ | ||
| export { | ||
| JSObjectNameEditor, | ||
| type JSObjectNameEditorProps, | ||
| } from "./JSObjectNameEditor"; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters