hunk.code_window:             <ApiCard
                 className={`t--createBlankApi-${p.packageName}`}
                 key={p.id}
                 onClick={() =>
                   handleOnClick(API_ACTION.CREATE_DATASOURCE_FORM, {
                     pluginId: p.id,
  
hunk.labels: keep keep keep replace keep keep
hunk.after_edit:               onClick={() => {
                   AnalyticsUtil.logEvent("CREATE_DATA_SOURCE_CLICK", {
                     plugin: p,
                   });
  
hunk.file_path: app/client/src/pages/Editor/IntegrationEditor/NewApi.tsx
hunk.type: replace
file: import React from "react";
  import styled from "styled-components";
  import { Overlay, Classes } from "@blueprintjs/core";
  import AnalyticsUtil from "utils/AnalyticsUtil";
  
  const StyledDocsSearchModal = styled.div`
    & {
      .${Classes.OVERLAY} {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        display: flex;
        justify-content: center;
        .${Classes.OVERLAY_CONTENT} {
          overflow: hidden;
          top: 10vh;
        }
      }
    }
  `;
  
  type Props = {
    modalOpen: boolean;
    toggleShow: () => void;
    children: React.ReactNode;
  };
  
  function DocsSearchModal({ children, modalOpen, toggleShow }: Props) {
    return (
      <StyledDocsSearchModal>
        <Overlay
          hasBackdrop
          isOpen={modalOpen}
          onClose={toggleShow}
          onClosing={() => {
            AnalyticsUtil.logEvent("CLOSE_OMNIBAR");
          }}
          transitionDuration={25}
          usePortal={false}
        >
          <div className={`${Classes.OVERLAY_CONTENT} t--global-search-modal`}>
            {children}
          </div>
        </Overlay>
      </StyledDocsSearchModal>
    );
  }
  
  export default DocsSearchModal;
  