hunk.code_window:         widgetType={widgetProperties?.type}
         />
         <PropertyPaneBodyWrapper>
           {!doActionsExist && !hideConnectDataCTA && <ConnectDataCTA />}
           <PropertyControlsWrapper>
             <PropertyControlsGenerator
               id={widgetProperties.widgetId}
  
hunk.labels: keep keep keep replace keep keep keep
hunk.after_edit:         {!doActionsExist && !hideConnectDataCTA && (
             <ConnectDataCTA
               widgetId={widgetProperties.widgetId}
               widgetTitle={widgetProperties.widgetName}
               widgetType={widgetProperties?.type}
             />
           )}
  
hunk.file_path: app/client/src/pages/Editor/PropertyPane/index.tsx
hunk.type: replace
file: import React, { useCallback, useState, useEffect } from "react";
  import { connect } from "react-redux";
  import styled from "styled-components";
  import { getCurlImportPageURL, convertToQueryParams } from "constants/routes";
  import { createDatasourceFromForm } from "actions/datasourceActions";
  import { AppState } from "reducers";
  import { Colors } from "constants/Colors";
  import CurlLogo from "assets/images/Curl-logo.svg";
  import PlusLogo from "assets/images/Plus-logo.svg";
  import { Plugin } from "api/PluginApi";
  import { createNewApiAction } from "actions/apiPaneActions";
  import AnalyticsUtil, { EventLocation } from "utils/AnalyticsUtil";
  import { CURL } from "constants/AppsmithActionConstants/ActionConstants";
  import { PluginType } from "entities/Action";
  import { Spinner } from "@blueprintjs/core";
  import { getQueryParams } from "utils/AppsmithUtils";
  import { GenerateCRUDEnabledPluginMap } from "../../../api/PluginApi";
  import { getGenerateCRUDEnabledPluginMap } from "../../../selectors/entitiesSelector";
  import { useSelector } from "react-redux";
  import { getIsGeneratePageInitiator } from "utils/GenerateCrudUtil";
  
  const StyledContainer = styled.div`
    flex: 1;
    margin-top: 8px;
    .textBtn {
      font-size: 16px;
      line-height: 24px;
      margin: 0;
      justify-content: center;
      text-align: center;
      letter-spacing: -0.17px;
      color: ${Colors.OXFORD_BLUE};
      font-weight: 500;
      text-decoration: none !important;
      flex-wrap: wrap;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    @media (min-width: 2500px) {
      .textBtn {
        font-size: 18px;
      }
    }
    @media (min-width: 2500px) {
      .eachCard {
        width: 240px;
        height: 200px;
      }
      .apiImage {
        margin-top: 25px;
        margin-bottom: 20px;
        height: 80px;
      }
      .curlImage {
        width: 100px;
      }
      .createIcon {
        height: 70px;
      }
    }
  `;
  
  const ApiCardsContainer = styled.div`
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 16px;
    text-align: center;
    min-width: 150px;
    border-radius: 4px;
    align-items: center;
  
    .create-new-api {
      &:hover {
        cursor: pointer;
      }
    }
  `;
  
  const ApiCard = styled.div`
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 64px;
    &:hover {
      background: ${Colors.Gallery};
      cursor: pointer;
    }
  
    .content-icon-wrapper {
      width: 40px;
      height: 40px;
      border-radius: 20px;
      padding: 6px 0;
      margin: 0 8px;
      background: #f0f0f0;
      display: flex;
      align-items: center;
  
      .content-icon {
        height: 28px;
        width: auto;
        margin: 0 auto;
        max-width: 100%;
      }
    }
  
    .cta {
      display: none;
      margin-right: 32px;
    }
  
    &:hover {
      .cta {
        display: flex;
      }
    }
  `;
  
  const CardContentWrapper = styled.div`
    display: flex;
    align-items: center;
  `;
  
  type ApiHomeScreenProps = {
    applicationId: string;
    createNewApiAction: (pageId: string, from: EventLocation) => void;
    history: {
      replace: (data: string) => void;
      push: (data: string) => void;
    };
    location: {
      search: string;
    };
    pageId: string;
    plugins: Plugin[];
    createDatasourceFromForm: (data: any) => void;
    isCreating: boolean;
    showUnsupportedPluginDialog: (callback: any) => void;
  };
  
  type Props = ApiHomeScreenProps;
  
  const API_ACTION = {
    IMPORT_CURL: "IMPORT_CURL",
    CREATE_NEW_API: "CREATE_NEW_API",
    CREATE_DATASOURCE_FORM: "CREATE_DATASOURCE_FORM",
    AUTH_API: "AUTH_API",
  };
  
  function NewApiScreen(props: Props) {
    const {
      applicationId,
      createNewApiAction,
      history,
      isCreating,
      pageId,
      plugins,
    } = props;
  
    const generateCRUDSupportedPlugin: GenerateCRUDEnabledPluginMap = useSelector(
      getGenerateCRUDEnabledPluginMap,
    );
    const [authApiPlugin, setAuthAPiPlugin] = useState<Plugin | undefined>();
  
    useEffect(() => {
      const plugin = plugins.find((p) => p.name === "REST API");
      setAuthAPiPlugin(plugin);
    }, [plugins]);
  
    const handleCreateAuthApiDatasource = useCallback(() => {
      if (authApiPlugin) {
        AnalyticsUtil.logEvent("CREATE_DATA_SOURCE_AUTH_API_CLICK", {
          pluginId: authApiPlugin.id,
        });
        props.createDatasourceFromForm({
          pluginId: authApiPlugin.id,
        });
      }
    }, [authApiPlugin, props.createDatasourceFromForm]);
  
    const handleCreateNew = () => {
      if (pageId) {
        createNewApiAction(pageId, "API_PANE");
      }
    };
  
    // On click of any API card, handleOnClick action should be called to check if user came from generate-page flow.
    // if yes then show UnsupportedDialog for the API which are not supported to generate CRUD page.
    const handleOnClick = (actionType: string, params?: any) => {
      const queryParams = getQueryParams();
      const isGeneratePageInitiator = getIsGeneratePageInitiator(
        queryParams.isGeneratePageMode,
      );
      if (
        isGeneratePageInitiator &&
        !params?.skipValidPluginCheck &&
        !generateCRUDSupportedPlugin[params?.pluginId]
      ) {
        // show modal informing user that this will break the generate flow.
        props?.showUnsupportedPluginDialog(() =>
          handleOnClick(actionType, { skipValidPluginCheck: true, ...params }),
        );
        return;
      }
      switch (actionType) {
        case API_ACTION.CREATE_NEW_API:
          handleCreateNew();
          break;
        case API_ACTION.IMPORT_CURL: {
          AnalyticsUtil.logEvent("IMPORT_API_CLICK", {
            importSource: CURL,
          });
  
          delete queryParams.isGeneratePageMode;
          const curlImportURL =
            getCurlImportPageURL(applicationId, pageId) +
            convertToQueryParams({ from: "datasources", ...queryParams });
  
          history.push(curlImportURL);
          break;
        }
        case API_ACTION.CREATE_DATASOURCE_FORM: {
          props.createDatasourceFromForm({ pluginId: params.pluginId });
          break;
        }
        case API_ACTION.AUTH_API: {
          handleCreateAuthApiDatasource();
          break;
        }
        default:
      }
    };
  
    return (
      <StyledContainer>
        <ApiCardsContainer>
          <ApiCard
            className="t--createBlankApiCard create-new-api"
            onClick={() => handleOnClick(API_ACTION.CREATE_NEW_API)}
          >
            <CardContentWrapper>
              <div className="content-icon-wrapper">
                <img
                  alt="New"
                  className="curlImage t--plusImage content-icon"
                  src={PlusLogo}
                />
              </div>
              <p className="textBtn">Create new API</p>
            </CardContentWrapper>
            {isCreating && <Spinner className="cta" size={25} />}
          </ApiCard>
          <ApiCard
            className="t--createBlankCurlCard"
            onClick={() => handleOnClick(API_ACTION.IMPORT_CURL)}
          >
            <CardContentWrapper>
              <div className="content-icon-wrapper">
                <img
                  alt="CURL"
                  className="curlImage t--curlImage content-icon"
                  src={CurlLogo}
                />
              </div>
              <p className="textBtn">CURL import</p>
            </CardContentWrapper>
          </ApiCard>
          {authApiPlugin && (
            <ApiCard
              className="t--createAuthApiDatasource"
              onClick={() => handleOnClick(API_ACTION.AUTH_API)}
            >
              <CardContentWrapper>
                <div className="content-icon-wrapper">
                  <img
                    alt="OAuth2"
                    className="authApiImage t--authApiImage content-icon"
                    src={authApiPlugin.iconLocation}
                  />
                </div>
                <p className="textBtn">Authenticated API</p>
              </CardContentWrapper>
            </ApiCard>
          )}
          {plugins
            .filter((p) => p.type === PluginType.SAAS)
            .map((p) => (
              <ApiCard
                className={`t--createBlankApi-${p.packageName}`}
                key={p.id}
                onClick={() =>
                  handleOnClick(API_ACTION.CREATE_DATASOURCE_FORM, {
                    pluginId: p.id,
                  })
                }
              >
                <CardContentWrapper>
                  <div className="content-icon-wrapper">
                    <img
                      alt={p.name}
                      className={
                        "content-icon saasImage t--saas-" +
                        p.packageName +
                        "-image"
                      }
                      src={p.iconLocation}
                    />
                  </div>
                  <p className="textBtn">{p.name}</p>
                </CardContentWrapper>
              </ApiCard>
            ))}
        </ApiCardsContainer>
      </StyledContainer>
    );
  }
  
  const mapStateToProps = (state: AppState) => ({
    plugins: state.entities.plugins.list,
  });
  
  const mapDispatchToProps = {
    createNewApiAction,
    createDatasourceFromForm,
  };
  
  export default connect(mapStateToProps, mapDispatchToProps)(NewApiScreen);
  