feat: datasource homepage ui redesign and search functionality for the datasources

app/client/src/ce/constants/messages.ts

@@ -395,6 +395,19 @@ export const CREATE_NEW_DATASOURCE_REST_API = () => "REST API";
 export const SAMPLE_DATASOURCES = () => "Sample datasources";
 export const EDIT_DS_CONFIG = () => "Edit datasource configuration";
 export const NOT_FOUND = () => "Not found";
+export const CREATE_NEW_DATASOURCE_AUTHENTICATED_REST_API = () =>
+  "Authenticated API";
+export const CREATE_NEW_DATASOURCE_GRAPHQL_API = () => "GraphQL API";
+export const CREATE_NEW_API_SECTION_HEADER = () => "APIs";
+export const CREATE_NEW_SAAS_SECTION_HEADER = () => "SaaS integrations";
+export const CREATE_NEW_AI_SECTION_HEADER = () => "AI integrations";
+export const CONNECT_A_DATASOURCE_HEADING = () => "Connect a datasource";
+export const CONNECT_A_DATASOURCE_SUBHEADING = () =>
+  "Select a sample datasource or connect your own";
+export const SEARCH_FOR_DATASOURCES = () => "Search for datasources";
+export const EMPTY_SEARCH_DATASOURCES_TITLE = () => "No results found";
+export const EMPTY_SEARCH_DATASOURCES_DESCRIPTION = () =>
+  "Please try again with a different search";
 
 export const ERROR_EVAL_ERROR_GENERIC = () =>
   `Unexpected error occurred while evaluating the application`;
@@ -2379,8 +2392,6 @@ export const PARTIAL_IMPORT_EXPORT = {
   },
 };
 
-export const DATASOURCE_SECURELY_TITLE = () => "Secure & fast connection";
-
 export const CUSTOM_WIDGET_FEATURE = {
   addEvent: {
     addCTA: () => "Add",

app/client/src/constants/PremiumDatasourcesConstants.ts

@@ -1,7 +1,7 @@
 import { getAssetUrl } from "ee/utils/airgapHelpers";
 import { ASSETS_CDN_URL } from "./ThirdPartyConstants";
 
-interface PremiumIntegration {
+export interface PremiumIntegration {
   name: string;
   icon: string;
 }

app/client/src/pages/Editor/IntegrationEditor/AIPlugins.tsx

@@ -0,0 +1,112 @@
+import React from "react";
+import { connect } from "react-redux";
+import { createTempDatasourceFromForm } from "actions/datasourceActions";
+import type { AppState } from "ee/reducers";
+import type { Plugin } from "api/PluginApi";
+import AnalyticsUtil from "ee/utils/AnalyticsUtil";
+import { PluginType } from "entities/Action";
+import { getAssetUrl, isAirgapped } from "ee/utils/airgapHelpers";
+import {
+  DatasourceContainer,
+  DatasourceSection,
+  DatasourceSectionHeading,
+  StyledDivider,
+} from "./IntegrationStyledComponents";
+import DatasourceItem from "./DatasourceItem";
+import {
+  CREATE_NEW_AI_SECTION_HEADER,
+  createMessage,
+} from "ee/constants/messages";
+import { pluginSearchSelector } from "./CreateNewDatasourceHeader";
+import { getPlugins } from "ee/selectors/entitiesSelector";
+
+interface CreateAIPluginsProps {
+  pageId: string;
+  isCreating?: boolean;
+  // TODO: Fix this the next time the file is edited
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  showUnsupportedPluginDialog: (callback: any) => void;
+
+  plugins: Plugin[];
+  // TODO: Fix this the next time the file is edited
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  createTempDatasourceFromForm: (data: any) => void;
+}
+
+function AIDataSources(props: CreateAIPluginsProps) {
+  const { plugins } = props;
+
+  const handleOnClick = (plugin: Plugin) => {
+    AnalyticsUtil.logEvent("CREATE_DATA_SOURCE_CLICK", {
+      pluginName: plugin.name,
+      pluginPackageName: plugin.packageName,
+    });
+
+    props.createTempDatasourceFromForm({
+      pluginId: plugin.id,
+      type: plugin.type,
+    });
+  };
+
+  return (
+    <DatasourceContainer data-testid="newai-datasource-card-container">
+      {plugins.map((plugin) => (
+        <DatasourceItem
+          className={`t--createBlankApi-${plugin.packageName}`}
+          handleOnClick={() => {
+            handleOnClick(plugin);
+          }}
+          icon={getAssetUrl(plugin.iconLocation)}
+          key={plugin.id}
+          name={plugin.name}
+        />
+      ))}
+    </DatasourceContainer>
+  );
+}
+
+function CreateAIPlugins(props: CreateAIPluginsProps) {
+  const isAirgappedInstance = isAirgapped();
+
+  if (isAirgappedInstance || props.plugins.length === 0) return null;
+
+  return (
+    <>
+      <StyledDivider />
+      <DatasourceSection id="new-ai-query">
+        <DatasourceSectionHeading kind="heading-m">
+          {createMessage(CREATE_NEW_AI_SECTION_HEADER)}
+        </DatasourceSectionHeading>
+        <AIDataSources {...props} />
+      </DatasourceSection>
+    </>
+  );
+}
+
+const mapStateToProps = (state: AppState) => {
+  const searchedPlugin = pluginSearchSelector(state, "search") || "";
+
+  let plugins = getPlugins(state);
+
+  // AI Plugins
+  plugins = plugins
+    .sort((a, b) => {
+      // Sort the AI plugins alphabetically
+      return a.name.localeCompare(b.name);
+    })
+    .filter(
+      (p) =>
+        p.type === PluginType.AI &&
+        p.name.toLocaleLowerCase().includes(searchedPlugin),
+    );
+
+  return {
+    plugins,
+  };
+};
+
+const mapDispatchToProps = {
+  createTempDatasourceFromForm,
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(CreateAIPlugins);