hunk.code_window: import AnalyticsUtil from "utils/AnalyticsUtil";
   import { INVITE_USERS_TO_ORG_FORM } from "constants/forms";
   import PerformanceTracker, {
     PerformanceTransactionName,
   } from "utils/PerformanceTracker";
   import { ANONYMOUS_USERNAME } from "constants/userConstants";
   export function* createUserSaga(
     action: ReduxActionWithPromise<CreateUserRequest>,
   ) {
     const { email, password, resolve, reject } = action.payload;
  
hunk.labels: keep keep keep keep keep replace keep keep keep keep keep
hunk.file_path: app/client/src/sagas/userSagas.tsx
hunk.type: replace
file: import React, { useState, memo, useEffect, useCallback } from "react";
  import styled from "styled-components";
  import { useDispatch, useSelector } from "react-redux";
  import EditableText, {
    EditInteractionKind,
  } from "components/editorComponents/EditableText";
  import { updateWidgetName } from "actions/propertyPaneActions";
  import { AppState } from "reducers";
  import Spinner from "components/editorComponents/Spinner";
  import { getExistingWidgetNames } from "sagas/selectors";
  import { removeSpecialChars } from "utils/helpers";
  import { useToggleEditWidgetName } from "utils/hooks/dragResizeHooks";
  import AnalyticsUtil from "utils/AnalyticsUtil";
  import { BindingText } from "pages/Editor/APIEditor/Form";
  
  import { Icon, Tooltip, Position, Classes } from "@blueprintjs/core";
  import { WidgetType } from "constants/WidgetConstants";
  import { theme } from "constants/DefaultTheme";
  import { ControlIcons } from "icons/ControlIcons";
  import { FormIcons } from "icons/FormIcons";
  import { deleteSelectedWidget, copyWidget } from "actions/widgetActions";
  const CopyIcon = ControlIcons.COPY_CONTROL;
  const DeleteIcon = FormIcons.DELETE_ICON;
  const Wrapper = styled.div`
    justify-content: center;
    align-items: center;
    display: grid;
    width: 100%;
    grid-template-columns: 146px 25px 25px 25px 25px;
    justify-items: center;
    align-items: center;
    justify-content: stretch;
    padding-bottom: 10px;
    position: sticky;
    top: 0;
    z-index: 3;
    background-color: ${props => props.theme.colors.paneBG};
    & span.${Classes.POPOVER_TARGET} {
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  `;
  
  const NameWrapper = styled.div`
    max-width: 100%;
    display: flex;
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: 126px 20px;
    &&&&&&& > * {
      overflow: hidden;
    }
  `;
  
  type PropertyPaneTitleProps = {
    title: string;
    widgetId?: string;
    widgetType?: WidgetType;
    onClose: () => void;
  };
  
  /* eslint-disable react/display-name */
  const PropertyPaneTitle = memo((props: PropertyPaneTitleProps) => {
    const dispatch = useDispatch();
    const { updating } = useSelector((state: AppState) => ({
      updating: state.ui.editor.loadingStates.updatingWidgetName,
    }));
    const isNew = useSelector((state: AppState) => state.ui.propertyPane.isNew);
    const widgets = useSelector(getExistingWidgetNames);
    const toggleEditWidgetName = useToggleEditWidgetName();
    const [name, setName] = useState(props.title);
    const updateTitle = useCallback(
      (value: string) => {
        if (
          value &&
          value.trim().length > 0 &&
          value.trim() !== props.title.trim() &&
          props.widgetId
        ) {
          if (widgets.indexOf(value.trim()) > -1) {
            setName(props.title);
          }
          dispatch(updateWidgetName(props.widgetId, value.trim()));
        }
      },
      [dispatch, widgets, setName, props.widgetId, props.title],
    );
    useEffect(() => {
      setName(props.title);
    }, [props.title]);
  
    const handleDelete = useCallback(
      () => dispatch(deleteSelectedWidget(false)),
      [dispatch],
    );
    const handleCopy = useCallback(() => dispatch(copyWidget(false)), [dispatch]);
  
    const exitEditMode = useCallback(() => {
      props.widgetId && toggleEditWidgetName(props.widgetId, false);
    }, [toggleEditWidgetName, props.widgetId]);
  
    return props.widgetId ? (
      <Wrapper>
        <NameWrapper>
          <EditableText
            type="text"
            valueTransform={removeSpecialChars}
            defaultValue={name}
            onTextChanged={updateTitle}
            placeholder={props.title}
            updating={updating}
            editInteractionKind={EditInteractionKind.SINGLE}
            isEditingDefault={isNew}
            onBlur={exitEditMode}
            hideEditIcon
            minimal
          />
          {updating && <Spinner size={16} />}
        </NameWrapper>
        <Tooltip
          content="Copy Widget"
          position={Position.TOP}
          hoverOpenDelay={200}
        >
          <CopyIcon
            className="t--copy-widget"
            width={14}
            height={14}
            color={theme.colors.paneSectionLabel}
            onClick={handleCopy}
          />
        </Tooltip>
        <Tooltip
          content="Delete Widget"
          position={Position.TOP}
          hoverOpenDelay={200}
        >
          <DeleteIcon
            className="t--delete-widget"
            width={16}
            height={16}
            color={theme.colors.paneSectionLabel}
            onClick={handleDelete}
          />
        </Tooltip>
        <Tooltip
          content={
            <div>
              <span>You can connect data from your API by adding </span>
              <BindingText>{`{{apiName.data}}`}</BindingText>
              <span> to a widget property</span>
            </div>
          }
          position={Position.TOP}
          hoverOpenDelay={200}
        >
          <Icon color={theme.colors.paneSectionLabel} icon="help" iconSize={16} />
        </Tooltip>
        <Tooltip content="Close" position={Position.TOP} hoverOpenDelay={200}>
          <Icon
            onClick={(e: any) => {
              AnalyticsUtil.logEvent("PROPERTY_PANE_CLOSE_CLICK", {
                widgetType: props.widgetType || "",
                widgetId: props.widgetId,
              });
              props.onClose();
              e.preventDefault();
              e.stopPropagation();
            }}
            iconSize={16}
            color={theme.colors.paneSectionLabel}
            icon="cross"
            className={"t--property-pane-close-btn"}
          />
        </Tooltip>
      </Wrapper>
    ) : null;
  });
  
  export default PropertyPaneTitle;
  