feat: datasource homepage ui redesign and search functionality for th…

…e datasources (#38360)

app/client/cypress/e2e/Sanity/Datasources/Styles_spec.js

@@ -36,8 +36,6 @@ describe(
       );
       //mock datasource image
       cy.datasourceImageStyle("[data-testid=mock-datasource-image]");
-      //header text
-      cy.datasourceContentWrapperStyle(".t--datasource-name");
       //Name wrapper
       cy.get("[data-testid=mock-datasource-name-wrapper]")
         .should("have.css", "display", "flex")
@@ -61,13 +59,9 @@ describe(
         "[data-testid=database-datasource-content-wrapper]",
       );
       //Icon wrapper
-      cy.datasourceIconWrapperStyle(
-        "[data-testid=database-datasource-content-wrapper] .dataSourceImage",
-      );
+      cy.datasourceIconWrapperStyle("[data-testid=database-datasource-image]");
       //Name
-      cy.datasourceNameStyle(
-        "[data-testid=database-datasource-content-wrapper] .textBtn",
-      );
+      cy.datasourceNameStyle(".t--plugin-name");
     });
 
     it("3. New API datasource card design", () => {
@@ -87,7 +81,7 @@ describe(
       //Icon wrapper
       cy.datasourceIconWrapperStyle(".content-icon");
       //Name
-      cy.datasourceNameStyle(".t--createBlankApiCard .textBtn");
+      cy.datasourceNameStyle(".t--createBlankApiCard .t--plugin-name");
     });
 
     after(() => {

app/client/cypress/locators/DatasourcesEditor.json

@@ -62,7 +62,7 @@
   "basicUsername": "input[name='authentication.username']",
   "basicPassword": "input[name='authentication.password']",
   "mockUserDatabase": "div[id='mock-database'] span:contains('Users')",
-  "mockUserDatasources": ".t--datasource-name:contains('Users')",
+  "mockUserDatasources": ".t--plugin-name:contains('Users')",
   "mongoUriDropdown": "//p[text()='Use mongo connection string URI']/following-sibling::div",
   "mongoUriYes": "//div[text()='Yes']",
   "mongoUriInput": "//p[text()='Connection string URI']/following-sibling::div//input",

app/client/cypress/support/Pages/DataSources.ts

@@ -170,7 +170,7 @@ export class DataSources {
   _usePreparedStatement =
     "input[name='actionConfiguration.pluginSpecifiedTemplates[0].value'][type='checkbox'], input[name='actionConfiguration.formData.preparedStatement.data'][type='checkbox']";
   _mockDB = (dbName: string) =>
-    "//span[text()='" +
+    "//p[text()='" +
     dbName +
     "']/ancestor::div[contains(@class, 't--mock-datasource')][1]";
   private _createBlankGraphQL = ".t--createBlankApiGraphqlCard";
@@ -203,7 +203,7 @@ export class DataSources {
   _queryTimeout = "//input[@name='actionConfiguration.timeoutInMillisecond']";
   _getStructureReq = "/api/v1/datasources/*/structure?ignoreCache=true";
   _editDatasourceFromActiveTab = (dsName: string) =>
-    ".t--datasource-name:contains('" + dsName + "')";
+    ".t--plugin-name:contains('" + dsName + "')";
   _mandatoryMark = "//span[text()='*']";
   _deleteDSHostPort = ".t--delete-field";
   _dsTabSchema = "[data-testid='t--tab-DATASOURCE_TAB']";

app/client/cypress/support/dataSourceCommands.js

@@ -307,9 +307,8 @@ Cypress.Commands.add("datasourceCardContainerStyle", (tag) => {
 Cypress.Commands.add("datasourceCardStyle", (tag) => {
   cy.get(tag)
     .should("have.css", "display", "flex")
-    .and("have.css", "justify-content", "space-between")
     .and("have.css", "align-items", "center")
-    .and("have.css", "height", "64px")
+    .and("have.css", "gap", "12px")
     .realHover()
     .should("have.css", "background-color", backgroundColorGray1)
     .and("have.css", "cursor", "pointer");
@@ -324,9 +323,8 @@ Cypress.Commands.add("datasourceImageStyle", (tag) => {
 Cypress.Commands.add("datasourceContentWrapperStyle", (tag) => {
   cy.get(tag)
     .should("have.css", "display", "flex")
-    .and("have.css", "align-items", "center")
-    .and("have.css", "gap", "13px")
-    .and("have.css", "padding-left", "13.5px");
+    .and("have.css", "align-items", "flex-start")
+    .and("have.css", "gap", "normal");
 });
 
 Cypress.Commands.add("datasourceIconWrapperStyle", (tag) => {
@@ -343,15 +341,13 @@ Cypress.Commands.add("datasourceNameStyle", (tag) => {
     .should("have.css", "color", backgroundColorBlack)
     .and("have.css", "font-size", "16px")
     .and("have.css", "font-weight", "400")
-    .and("have.css", "line-height", "24px")
-    .and("have.css", "letter-spacing", "-0.24px");
+    .and("have.css", "line-height", "20px");
 });
 
 Cypress.Commands.add("mockDatasourceDescriptionStyle", (tag) => {
   cy.get(tag)
     .should("have.css", "color", backgroundColorGray8)
     .and("have.css", "font-size", "13px")
     .and("have.css", "font-weight", "400")
-    .and("have.css", "line-height", "17px")
-    .and("have.css", "letter-spacing", "-0.24px");
+    .and("have.css", "line-height", "17px");
 });

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

@@ -393,8 +393,23 @@ export const CREATE_NEW_DATASOURCE_DATABASE_HEADER = () => "Databases";
 export const CREATE_NEW_DATASOURCE_MOST_POPULAR_HEADER = () => "Most popular";
 export const CREATE_NEW_DATASOURCE_REST_API = () => "REST API";
 export const SAMPLE_DATASOURCES = () => "Sample datasources";
+export const SAMPLE_DATASOURCE_SUBHEADING = () =>
+  "Use sample datasources if you don’t have a datasource for testing";
 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`;
@@ -2323,9 +2338,6 @@ export const START_FROM_SCRATCH_SUBTITLE = () =>
 export const START_WITH_DATA_TITLE = () => "Start with data";
 export const START_WITH_DATA_SUBTITLE = () =>
   "Get started with connecting your data, and easily craft a functional application.";
-export const START_WITH_DATA_CONNECT_HEADING = () => "Connect your datasource";
-export const START_WITH_DATA_CONNECT_SUBHEADING = () =>
-  "Select an option to establish a connection. Your data's security is our priority.";
 export const START_WITH_TEMPLATE_CONNECT_HEADING = () => "Select a template";
 export const START_WITH_TEMPLATE_CONNECT_SUBHEADING = () =>
   "Choose an option below to embark on your app-building adventure!";
@@ -2381,8 +2393,6 @@ export const PARTIAL_IMPORT_EXPORT = {
   },
 };
 
-export const DATASOURCE_SECURELY_TITLE = () => "Secure & fast connection";
-
 export const CUSTOM_WIDGET_FEATURE = {
   addEvent: {
     addCTA: () => "Add",
@@ -2612,3 +2622,6 @@ export const PREMIUM_DATASOURCES = {
     "The Appsmith Team is actively working on it. We’ll let you know when this integration is live. ",
   NOTIFY_ME: () => "Notify me",
 };
+
+export const DATASOURCE_SECURE_TEXT = () =>
+  `When connecting datasources, your passwords are AES-256 encrypted and we never store any of your data.`;

app/client/src/ce/pages/Applications/CreateNewAppsOption.tsx

@@ -1,8 +1,6 @@
 import {
   GO_BACK,
   SKIP_START_WITH_USE_CASE_TEMPLATES,
-  START_WITH_DATA_CONNECT_HEADING,
-  START_WITH_DATA_CONNECT_SUBHEADING,
   createMessage,
 } from "ee/constants/messages";
 import urlBuilder from "ee/entities/URLRedirect/URLAssembly";
@@ -12,7 +10,7 @@ import {
   resetCurrentPluginIdForCreateNewApp,
 } from "actions/onboardingActions";
 import { fetchPlugins } from "actions/pluginActions";
-import { Flex, Link, Text } from "@appsmith/ads";
+import { Flex, Link } from "@appsmith/ads";
 import CreateNewDatasourceTab from "pages/Editor/IntegrationEditor/CreateNewDatasourceTab";
 import { getApplicationsOfWorkspace } from "ee/selectors/selectedWorkspaceSelectors";
 import { default as React, useEffect } from "react";
@@ -36,7 +34,6 @@ import { isAirgapped } from "ee/utils/airgapHelpers";
 const SectionWrapper = styled.div<{ isBannerVisible: boolean }>`
   display: flex;
   flex-direction: column;
-  padding: 0 var(--ads-v2-spaces-7) var(--ads-v2-spaces-7);
   ${(props) => `
     margin-top: ${
       props.theme.homePage.header + (props.isBannerVisible ? 40 : 0)
@@ -56,8 +53,9 @@ const BackWrapper = styled.div<{ hidden?: boolean; isBannerVisible: boolean }>`
     top: ${props.theme.homePage.header + (props.isBannerVisible ? 40 : 0)}px;
     `}
   background: inherit;
-  padding: var(--ads-v2-spaces-3);
+  padding: var(--ads-v2-spaces-4) var(--ads-v2-spaces-8);
   z-index: 1;
+  border-bottom: 1px solid var(--ads-v2-color-gray-300);
   margin-left: -4px;
   ${(props) => `${props.hidden && "visibility: hidden; opacity: 0;"}`}
 `;
@@ -66,22 +64,10 @@ const LinkWrapper = styled(Link)<{ hidden?: boolean }>`
   ${(props) => `${props.hidden && "visibility: hidden; opacity: 0;"}`}
 `;
 
-const WithDataWrapper = styled.div`
+const WithDataWrapper = styled(Flex)`
   background: var(--ads-v2-color-bg);
-  padding: var(--ads-v2-spaces-13);
-  border: 1px solid var(--ads-v2-color-gray-300);
-  border-radius: 5px;
 `;
 
-const Header = ({ subtitle, title }: { subtitle: string; title: string }) => {
-  return (
-    <Flex flexDirection="column" mb="spaces-14" mt="spaces-7">
-      <Text kind="heading-xl">{title}</Text>
-      <Text>{subtitle}</Text>
-    </Flex>
-  );
-};
-
 const CreateNewAppsOption = ({
   currentApplicationIdForCreateNewApp,
 }: {
@@ -227,12 +213,8 @@ const CreateNewAppsOption = ({
           </LinkWrapper>
         )}
       </BackWrapper>
-      <Flex flexDirection="column" pl="spaces-3" pr="spaces-3">
-        <Header
-          subtitle={createMessage(START_WITH_DATA_CONNECT_SUBHEADING)}
-          title={createMessage(START_WITH_DATA_CONNECT_HEADING)}
-        />
-        <WithDataWrapper>
+      <Flex flex={"1"} flexDirection="column">
+        <WithDataWrapper flex={"1"} flexDirection="column">
           {createNewAppPluginId && !!selectedDatasource ? (
             selectedPlugin?.type === PluginType.SAAS ? (
               <DatasourceForm