From b24428be59a453fc4d79e6c8765a0e7802cf2d4f Mon Sep 17 00:00:00 2001 From: Chandan Balaji Date: Wed, 25 May 2022 16:58:30 +0530 Subject: [PATCH 1/6] fix: UI Inconsistencies in Datasource Card and Page --- app/client/src/components/ads/Tabs.tsx | 21 +++-- .../components/utils/CollapseComponent.tsx | 13 +-- .../DataSourceEditor/NewActionButton.tsx | 3 +- .../IntegrationEditor/ActiveDataSources.tsx | 1 - .../IntegrationEditor/DatasourceCard.tsx | 42 ++++++---- .../IntegrationEditor/DatasourceHome.tsx | 23 +++--- .../IntegrationsHomeScreen.tsx | 2 +- .../IntegrationEditor/MockDataSources.tsx | 79 +++++++++++-------- .../pages/Editor/IntegrationEditor/NewApi.tsx | 18 ++--- 9 files changed, 111 insertions(+), 91 deletions(-) diff --git a/app/client/src/components/ads/Tabs.tsx b/app/client/src/components/ads/Tabs.tsx index f6ab87175c..67a5ed2c91 100644 --- a/app/client/src/components/ads/Tabs.tsx +++ b/app/client/src/components/ads/Tabs.tsx @@ -8,6 +8,7 @@ import { useEffect } from "react"; import { Indices } from "constants/Layers"; import { theme } from "constants/DefaultTheme"; import useResizeObserver from "utils/hooks/useResizeObserver"; +import { Colors } from "constants/Colors"; export const TAB_MIN_HEIGHT = `36px`; @@ -41,6 +42,8 @@ const TabsWrapper = styled.div<{ flex-direction: ${(props) => (!!props.vertical ? "column" : "row")}; align-items: ${(props) => (!!props.vertical ? "stretch" : "center")}; border-bottom: none; + gap: ${(props) => + !props.vertical ? `${props.theme.spaces[12] + 2}px` : 0}; color: ${(props) => props.theme.colors.tabs.normal}; path { fill: ${(props) => props.theme.colors.tabs.icon}; @@ -74,9 +77,7 @@ const TabsWrapper = styled.div<{ justify-content: center; border-color: transparent; position: relative; - padding: 0px 3px; - margin-right: ${(props) => - !props.vertical ? `${props.theme.spaces[12] - 3}px` : 0}; + padding: 0; ${(props) => props.responseViewer && @@ -134,10 +135,10 @@ const TabsWrapper = styled.div<{ `; export const TabTitle = styled.span<{ responseViewer?: boolean }>` - font-size: ${(props) => props.theme.typography.h5.fontSize}px; - font-weight: ${(props) => props.theme.typography.h5.fontWeight}; - line-height: ${(props) => props.theme.typography.h5.lineHeight - 3}px; - letter-spacing: ${(props) => props.theme.typography.h5.letterSpacing}px; + font-size: ${(props) => props.theme.typography.h4.fontSize}px; + font-weight: ${(props) => props.theme.typography.h4.fontWeight - 100}; + line-height: ${(props) => props.theme.typography.h4.lineHeight - 3}px; + letter-spacing: ${(props) => props.theme.typography.h4.letterSpacing}px; margin: 0; display: flex; align-items: center; @@ -215,18 +216,16 @@ const TabTitleWrapper = styled.div<{ props.selected ? ` background-color: transparent; - color: ${props.theme.colors.tabs.hover}; + color: ${Colors.GREY_900}; .${Classes.ICON} { svg { - fill: ${props.theme.colors.tabs.icon}; path { - fill: ${props.theme.colors.tabs.icon}; + fill: ${Colors.GREY_900}; } } } .tab-title { - font-weight: 700; ${props.responseViewer && ` font-weight: normal; diff --git a/app/client/src/components/utils/CollapseComponent.tsx b/app/client/src/components/utils/CollapseComponent.tsx index faecca39bb..1e830416de 100644 --- a/app/client/src/components/utils/CollapseComponent.tsx +++ b/app/client/src/components/utils/CollapseComponent.tsx @@ -5,16 +5,16 @@ import { Collapse, Icon } from "@blueprintjs/core"; const CollapseWrapper = styled.div` position: relative; - margin-top: ${(props) => props.theme.spaces[3]}px; .collapse-title { - color: ${Colors.TROUT_DARK}; + color: ${Colors.GRAY_700}; letter-spacing: 0.04em; text-transform: uppercase; font-weight: 500; font-size: 12px; line-height: 16px; display: flex; - gap: 4px; + align-items: center; + gap: 8px; cursor: pointer; /* justify-content: space-between; */ .icon { @@ -55,9 +55,10 @@ function CollapseComponent(props: { > {props.title} diff --git a/app/client/src/pages/Editor/DataSourceEditor/NewActionButton.tsx b/app/client/src/pages/Editor/DataSourceEditor/NewActionButton.tsx index ca590e711e..4684459d7e 100644 --- a/app/client/src/pages/Editor/DataSourceEditor/NewActionButton.tsx +++ b/app/client/src/pages/Editor/DataSourceEditor/NewActionButton.tsx @@ -1,7 +1,7 @@ import React, { useCallback, useState } from "react"; import { Action, ApiActionConfig, PluginType } from "entities/Action"; import styled from "styled-components"; -import Button from "components/ads/Button"; +import Button, { IconPositions } from "components/ads/Button"; import { createNewApiName, createNewQueryName } from "utils/AppsmithUtils"; import { Toaster } from "components/ads/Toast"; import { ERROR_ADD_API_INVALID_URL } from "@appsmith/constants/messages"; @@ -100,6 +100,7 @@ function NewActionButton(props: NewActionButtonProps) {
- + + + {datasource.name} @@ -293,7 +307,7 @@ function DatasourceCard(props: DatasourceCardProps) { target={ diff --git a/app/client/src/pages/Editor/IntegrationEditor/DatasourceHome.tsx b/app/client/src/pages/Editor/IntegrationEditor/DatasourceHome.tsx index 3f7f5d70f5..f11fe91f21 100644 --- a/app/client/src/pages/Editor/IntegrationEditor/DatasourceHome.tsx +++ b/app/client/src/pages/Editor/IntegrationEditor/DatasourceHome.tsx @@ -37,17 +37,15 @@ const DatasourceHomePage = styled.div` .textBtn { justify-content: center; text-align: center; - color: #2e3d49; - font-weight: 500; + color: ${Colors.BLACK}; + font-weight: 400; text-decoration: none !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; - - font-weight: 500; font-size: 16px; line-height: 24px; - letter-spacing: -0.17px; + letter-spacing: -0.24px; margin: 0; } `; @@ -68,20 +66,17 @@ const DatasourceCard = styled.div` justify-content: space-between; height: 64px; &:hover { - background: ${Colors.Gallery}; + background: ${Colors.GREY_1}; cursor: pointer; } .dataSourceImageWrapper { - width: 40px; - height: 40px; - padding: 6px 0; - border-radius: 20px; - margin: 0 8px; - background: #f0f0f0; + width: 48px; + height: 48px; + border-radius: 50%; + background: ${Colors.GREY_2}; display: flex; align-items: center; - .dataSourceImage { height: 28px; width: auto; @@ -105,6 +100,8 @@ const DatasourceCard = styled.div` const DatasourceContentWrapper = styled.div` display: flex; align-items: center; + gap: 13px; + padding-left: 13.5px; `; interface DatasourceHomeScreenProps { diff --git a/app/client/src/pages/Editor/IntegrationEditor/IntegrationsHomeScreen.tsx b/app/client/src/pages/Editor/IntegrationEditor/IntegrationsHomeScreen.tsx index f28c0f6ba9..0d528c4f2b 100644 --- a/app/client/src/pages/Editor/IntegrationEditor/IntegrationsHomeScreen.tsx +++ b/app/client/src/pages/Editor/IntegrationEditor/IntegrationsHomeScreen.tsx @@ -37,7 +37,7 @@ const ApiHomePage = styled.div` display: flex; flex-direction: column; - font-size: 20px; + font-size: 24px; padding: 20px 20px 0 20px; /* margin-left: 10px; */ flex: 1; diff --git a/app/client/src/pages/Editor/IntegrationEditor/MockDataSources.tsx b/app/client/src/pages/Editor/IntegrationEditor/MockDataSources.tsx index 5da57aa628..97c7ad6f1f 100644 --- a/app/client/src/pages/Editor/IntegrationEditor/MockDataSources.tsx +++ b/app/client/src/pages/Editor/IntegrationEditor/MockDataSources.tsx @@ -11,25 +11,22 @@ import { AppState } from "reducers"; import AnalyticsUtil from "utils/AnalyticsUtil"; const MockDataSourceWrapper = styled.div` - overflow: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; - flex: 1; - - .sectionHeader { - font-weight: ${(props) => props.theme.fontWeights[2]}; - font-size: ${(props) => props.theme.fontSizes[4]}px; - margin-top: 10px; - } + min-width: 150px; + border-radius: 4px; + align-items: center; + margin-top: 8px; `; const Description = styled.div` - color: ${Colors.DOVE_GRAY}; - font-size: 14px; - display: inline-block; - margin-top: 11px; + color: ${Colors.GREY_8}; + font-size: 13px; + line-height: 17px; + letter-spacing: -0.24px; `; + function MockDataSources(props: { mockDatasources: MockDatasource[] }) { const orgId = useSelector(getCurrentOrgId); return ( @@ -50,38 +47,51 @@ function MockDataSources(props: { mockDatasources: MockDatasource[] }) { export default MockDataSources; const CardWrapper = styled.div` - padding: 18px; - /* margin-top: 18px; */ - + display: flex; + align-items: center; + justify-content: space-between; + height: 64px; &:hover { - background: ${Colors.Gallery}; + background: ${Colors.GREY_1}; cursor: pointer; - .bp3-collapse-body { - background: ${Colors.Gallery}; - } + } } `; const DatasourceImage = styled.img` - height: 24px; + height: 28px; width: auto; + margin: 0 auto; + max-width: 100%; `; const DatasourceName = styled.span` - margin-left: 10px; font-size: 16px; - font-weight: 500; + font-weight: 400; + line-height: 24px; + letter-spacing: -0.24px; + color: ${Colors.BLACK}; `; const DatasourceCardHeader = styled.div` - justify-content: space-between; display: flex; + align-items: center; + gap: 13px; + padding-left: 13.5px; +`; + +const DatasourceIconWrapper = styled.div` + width: 48px; + height: 48px; + border-radius: 50%; + background: ${Colors.GREY_2}; + display: flex; + align-items: center; `; const DatasourceNameWrapper = styled.div` - flex-direction: row; - align-items: center; display: flex; + flex-direction: column; `; type MockDatasourceCardProps = { @@ -130,17 +140,16 @@ function MockDatasourceCard(props: MockDatasourceCardProps) { return ( -
- - - {datasource.name} - + + + + + {datasource.name} {datasource.description} -
+ ); diff --git a/app/client/src/pages/Editor/IntegrationEditor/NewApi.tsx b/app/client/src/pages/Editor/IntegrationEditor/NewApi.tsx index c62c76a9c7..c061299fad 100644 --- a/app/client/src/pages/Editor/IntegrationEditor/NewApi.tsx +++ b/app/client/src/pages/Editor/IntegrationEditor/NewApi.tsx @@ -29,9 +29,9 @@ const StyledContainer = styled.div` margin: 0; justify-content: center; text-align: center; - letter-spacing: -0.17px; + letter-spacing: -0.24px; color: ${Colors.OXFORD_BLUE}; - font-weight: 500; + font-weight: 400; text-decoration: none !important; flex-wrap: wrap; white-space: nowrap; @@ -84,17 +84,15 @@ const ApiCard = styled.div` justify-content: space-between; height: 64px; &:hover { - background: ${Colors.Gallery}; + background: ${Colors.GREY_1}; cursor: pointer; } .content-icon-wrapper { - width: 40px; - height: 40px; - border-radius: 20px; - padding: 6px 0; - margin: 0 8px; - background: #f0f0f0; + width: 48px; + height: 48px; + border-radius: 50%; + background: ${Colors.GREY_2}; display: flex; align-items: center; @@ -121,6 +119,8 @@ const ApiCard = styled.div` const CardContentWrapper = styled.div` display: flex; align-items: center; + gap: 13px; + padding-left: 13.5px; `; type ApiHomeScreenProps = { From 4d76db5fe77d6929403fb1bddbb275b01c8b04aa Mon Sep 17 00:00:00 2001 From: Chandan Balaji Date: Thu, 26 May 2022 12:45:48 +0530 Subject: [PATCH 2/6] updated harcoded values --- app/client/src/components/ads/Tabs.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/app/client/src/components/ads/Tabs.tsx b/app/client/src/components/ads/Tabs.tsx index 67a5ed2c91..4b3b3de8d4 100644 --- a/app/client/src/components/ads/Tabs.tsx +++ b/app/client/src/components/ads/Tabs.tsx @@ -136,8 +136,8 @@ const TabsWrapper = styled.div<{ export const TabTitle = styled.span<{ responseViewer?: boolean }>` font-size: ${(props) => props.theme.typography.h4.fontSize}px; - font-weight: ${(props) => props.theme.typography.h4.fontWeight - 100}; - line-height: ${(props) => props.theme.typography.h4.lineHeight - 3}px; + font-weight: ${(props) => props.theme.fontWeights[1]}; + line-height: ${(props) => props.theme.spaces[11]}px; letter-spacing: ${(props) => props.theme.typography.h4.letterSpacing}px; margin: 0; display: flex; From 24d1ac10186927096bfbff34a3f1ae4ae34207e5 Mon Sep 17 00:00:00 2001 From: ChandanBalajiBP Date: Thu, 16 Jun 2022 11:48:44 +0530 Subject: [PATCH 3/6] added test cases with requireed changes --- .../Datasources/Datasources_styles_spec.js | 193 ++++++++++++++++++ .../cypress/support/dataSourceCommands.js | 71 +++++++ app/client/src/components/ads/Tabs.tsx | 5 +- .../components/utils/CollapseComponent.tsx | 2 + .../IntegrationEditor/DatasourceCard.tsx | 20 +- .../IntegrationEditor/DatasourceHome.tsx | 7 +- .../IntegrationsHomeScreen.tsx | 3 +- .../IntegrationEditor/MockDataSources.tsx | 17 +- .../pages/Editor/IntegrationEditor/NewApi.tsx | 8 +- 9 files changed, 304 insertions(+), 22 deletions(-) create mode 100644 app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Datasources/Datasources_styles_spec.js diff --git a/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Datasources/Datasources_styles_spec.js b/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Datasources/Datasources_styles_spec.js new file mode 100644 index 0000000000..82ad5b4756 --- /dev/null +++ b/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Datasources/Datasources_styles_spec.js @@ -0,0 +1,193 @@ +import HomePage from "../../../../locators/HomePage"; +const pages = require("../../../../locators/Pages.json"); + +describe("Validate Datasource Panel Styles", function() { + const backgroundColorGray900 = "rgb(25, 25, 25)"; + const backgroundColorGray700 = "rgb(87, 87, 87)"; + const backgroundColorGray1 = "rgb(250, 250, 250)"; + const backgroundColorGray2 = "rgb(240, 240, 240)"; + + before(() => { + //Navigate to datasource pane + cy.get(pages.addEntityAPI) + .last() + .should("be.visible") + .click({ force: true }); + cy.createMockDatasource(); + cy.get(pages.integrationCreateNew).click(); + }); + + it("Tabs style", function() { + //Check gap between tab items + cy.get("[data-cy=t--datasource-tab] .react-tabs__tab-list").should( + "have.css", + "gap", + "32px", + ); + //Check styles of tab titles. + cy.get(".tab-title") + .should("have.css", "font-size", "16px") + .and("have.css", "font-weight", "400") + .and("have.css", "line-height", "24px") + .and("have.css", "letter-spacing", "-0.24px"); + //Check selected tab item style + cy.get(".react-tabs__tab--selected .tab-title").should( + "have.css", + "color", + backgroundColorGray900, + ); + //Check selected tab item icon style + cy.get(".react-tabs__tab--selected path").should( + "have.css", + "fill", + backgroundColorGray900, + ); + }); + + it("Mock datasource card design", () => { + //Card container style + cy.datasourceCardContainerStyle(".t--mock-datasource-list"); + //Datasource card + cy.datasourceCardStyle(".t--mock-datasource"); + //Description + cy.mockDatasourceDescriptionStyle( + "[data-testid=mockdatasource-description]", + ); + //mock datasource image + cy.datasourceImageStyle("[data-testid=mock-datasource-image]"); + //header text + cy.datasourceContentWrapperStyle(".t--datasource-name"); + //Icon wrapper + cy.datasourceIconWrapperStyle("[data-testid=mock-datasource-icon-wrapper]"); + //Name wrapper + cy.get("[data-testid=mock-datasource-name-wrapper]") + .should("have.css", "display", "flex") + .and("have.css", "flex-direction", "column"); + //Name + cy.datasourceNameStyle("[data-testid=mockdatasource-name]"); + }); + + it("Database datasource card design", () => { + //Card container style + cy.datasourceCardContainerStyle( + "[data-testid=database-datasource-card-container]", + ); + //Datasource card + cy.datasourceCardStyle("[data-testid=database-datasource-card]"); + //mock datasource image + cy.datasourceImageStyle("[data-testid=database-datasource-image]"); + //header text + cy.datasourceContentWrapperStyle( + "[data-testid=database-datasource-content-wrapper]", + ); + //Icon wrapper + cy.datasourceIconWrapperStyle( + "[data-testid=database-datasource-content-wrapper] .dataSourceImageWrapper", + ); + //Name + cy.datasourceNameStyle( + "[data-testid=database-datasource-content-wrapper] .textBtn", + ); + }); + + it("New API datasource card design", () => { + //Card container style + cy.datasourceCardContainerStyle( + "[data-testid=newapi-datasource-card-container]", + ); + //Datasource card + cy.datasourceCardStyle(".t--createBlankApiCard"); + //Datasource image + cy.datasourceImageStyle(".content-icon"); + //Header text + cy.datasourceContentWrapperStyle( + "[data-testid=newapi-datasource-content-wrapper]", + ); + //Icon wrapper + cy.datasourceIconWrapperStyle(".content-icon-wrapper"); + //Name + cy.datasourceNameStyle(".t--createBlankApiCard .textBtn"); + }); + + it("Datasource title font size", () => { + cy.get(".t--integrationsHomePage").should("have.css", "font-size", "20px"); + }); + + it("Action button icon placement", () => { + //Navigate to Active tab + cy.get(pages.integrationActiveTab).click({ force: true }); + //Icon should be placed left to the text. + cy.get(".t--create-query .t--left-icon"); + }); + + it("Datasource Active card styles", () => { + //Active card wrapper + cy.get(".t--datasource") + .should("have.css", "padding", "15px") + .and("have.css", "cursor", "pointer") + .realHover() + .should("have.css", "background-color", backgroundColorGray1); + + cy.get("[data-testid=active-datasource-image]") + .should("have.css", "height", "18px") + .and("have.css", "max-width", "100%"); + + cy.get("[data-testid=active-datasource-icon-wrapper]") + .should("have.css", "background-color", backgroundColorGray2) + .and("have.css", "width", "34px") + .and("have.css", "height", "34px") + .and("have.css", "border-radius", "50%") + .and("have.css", "display", "flex") + .and("have.css", "align-items", "center"); + + //Name + cy.datasourceNameStyle("[data-testid=active-datasource-name]"); + + //Queries + cy.get("[data-testid=active-datasource-queries]") + .should("have.css", "display", "flex") + .and("have.css", "margin", "4px 0px"); + + //Buttons wrapper + cy.get(".t--datasource-name .action-wrapper") + .should("have.css", "gap", "10px") + .and("have.css", "display", "flex") + .and("have.css", "align-items", "center"); + }); + + it("Collapse component styles", () => { + //Collapse wrapper + cy.get("[data-testid=datasource-collapse-wrapper]") + .should("have.css", "color", backgroundColorGray700) + .and("have.css", "display", "flex") + .and("have.css", "gap", "8px") + .and("have.css", "align-items", "center"); + //Collapse icon + cy.get("[data-testid=datasource-collapse-icon] svg") + .invoke("attr", "data-icon") + .should("eq", "arrow-right"); + cy.get("[data-testid=datasource-collapse-icon] svg") + .invoke("attr", "fill") + .should("eq", "#4B4848"); + cy.get("[data-testid=datasource-collapse-icon] svg") + .invoke("attr", "width") + .should("eq", "12"); + }); + + after(() => { + //Delete Datasource + cy.get(".t--datasource-menu-option") + .eq(0) + .click(); + cy.get(".t--datasource-option-delete").click(); + cy.get(".t--datasource-option-delete").click(); + //Delete Application + cy.get(HomePage.applicationName).click(); + cy.get(".t--application-edit-menu li") + .contains("Delete Application") + .click(); + cy.get(".t--application-edit-menu li") + .contains("Are you sure?") + .click(); + }); +}); diff --git a/app/client/cypress/support/dataSourceCommands.js b/app/client/cypress/support/dataSourceCommands.js index 5970253ebf..a17b576312 100644 --- a/app/client/cypress/support/dataSourceCommands.js +++ b/app/client/cypress/support/dataSourceCommands.js @@ -8,6 +8,11 @@ const datasourceEditor = require("../locators/DatasourcesEditor.json"); const datasourceFormData = require("../fixtures/datasources.json"); const explorer = require("../locators/explorerlocators.json"); +const backgroundColorBlack = "rgb(0, 0, 0)"; +const backgroundColorGray1 = "rgb(250, 250, 250)"; +const backgroundColorGray2 = "rgb(240, 240, 240)"; +const backgroundColorGray8 = "rgb(113, 110, 110)"; + export const initLocalstorage = () => { cy.window().then((window) => { window.localStorage.setItem("ShowCommentsButtonToolTip", ""); @@ -399,3 +404,69 @@ Cypress.Commands.add("fillMongoDatasourceFormWithURI", () => { Cypress.Commands.add("ReconnectDatasource", (datasource) => { cy.xpath(`//span[text()='${datasource}']`).click(); }); + +Cypress.Commands.add("createMockDatasource", () => { + cy.get(".t--mock-datasource") + .contains("Users") + .click(); +}); + +Cypress.Commands.add("datasourceCardContainerStyle", (tag) => { + cy.get(tag) + .should("have.css", "min-width", "150px") + .and("have.css", "border-radius", "4px") + .and("have.css", "align-items", "center"); +}); + +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") + .realHover() + .should("have.css", "background-color", backgroundColorGray1) + .and("have.css", "cursor", "pointer"); +}); + +Cypress.Commands.add("datasourceImageStyle", (tag) => { + cy.get(tag) + .should("have.css", "height", "28px") + .and("have.css", "max-width", "100%"); +}); + +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"); +}); + +Cypress.Commands.add("datasourceIconWrapperStyle", (tag) => { + cy.get(tag) + .should("have.css", "background-color", backgroundColorGray2) + .and("have.css", "width", "48px") + .and("have.css", "height", "48px") + .and("have.css", "border-radius", "50%") + .and("have.css", "display", "flex") + .and("have.css", "align-items", "center"); +}); + +Cypress.Commands.add("datasourceNameStyle", (tag) => { + cy.get(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"); +}); + +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"); +}); diff --git a/app/client/src/components/ads/Tabs.tsx b/app/client/src/components/ads/Tabs.tsx index 4b3b3de8d4..38e3df00ff 100644 --- a/app/client/src/components/ads/Tabs.tsx +++ b/app/client/src/components/ads/Tabs.tsx @@ -8,7 +8,6 @@ import { useEffect } from "react"; import { Indices } from "constants/Layers"; import { theme } from "constants/DefaultTheme"; import useResizeObserver from "utils/hooks/useResizeObserver"; -import { Colors } from "constants/Colors"; export const TAB_MIN_HEIGHT = `36px`; @@ -216,11 +215,11 @@ const TabTitleWrapper = styled.div<{ props.selected ? ` background-color: transparent; - color: ${Colors.GREY_900}; + color: var(--appsmith-color-black-900); .${Classes.ICON} { svg { path { - fill: ${Colors.GREY_900}; + fill: var(--appsmith-color-black-900) } } } diff --git a/app/client/src/components/utils/CollapseComponent.tsx b/app/client/src/components/utils/CollapseComponent.tsx index 1e830416de..6d73893931 100644 --- a/app/client/src/components/utils/CollapseComponent.tsx +++ b/app/client/src/components/utils/CollapseComponent.tsx @@ -50,6 +50,7 @@ function CollapseComponent(props: {
@@ -57,6 +58,7 @@ function CollapseComponent(props: { diff --git a/app/client/src/pages/Editor/IntegrationEditor/DatasourceCard.tsx b/app/client/src/pages/Editor/IntegrationEditor/DatasourceCard.tsx index a7c050e5f6..c3b539de2d 100644 --- a/app/client/src/pages/Editor/IntegrationEditor/DatasourceCard.tsx +++ b/app/client/src/pages/Editor/IntegrationEditor/DatasourceCard.tsx @@ -47,10 +47,10 @@ const Wrapper = styled.div` cursor: pointer; &:hover { - background: ${Colors.GREY_1}; + background-color: ${Colors.GREY_1}; .bp3-collapse-body { - background: ${Colors.GREY_1}; + background-color: ${Colors.GREY_1}; } } `; @@ -100,8 +100,11 @@ const GenerateTemplateButton = styled(Button)` `; const DatasourceName = styled.span` + color: ${Colors.BLACK}; font-size: 16px; font-weight: 400; + line-height: 24px; + letter-spacing: -0.24px; `; const DatasourceCardHeader = styled.div` @@ -263,16 +266,21 @@ function DatasourceCard(props: DatasourceCardProps) {
- + - {datasource.name} + + {datasource.name} + - + {queriesWithThisDatasource ? `${queriesWithThisDatasource} ${QUERY} on this page` : "No query in this application is using this datasource"} diff --git a/app/client/src/pages/Editor/IntegrationEditor/DatasourceHome.tsx b/app/client/src/pages/Editor/IntegrationEditor/DatasourceHome.tsx index f11fe91f21..656427e359 100644 --- a/app/client/src/pages/Editor/IntegrationEditor/DatasourceHome.tsx +++ b/app/client/src/pages/Editor/IntegrationEditor/DatasourceHome.tsx @@ -186,11 +186,11 @@ class DatasourceHomeScreen extends React.Component { return ( - + {plugins.map((plugin, idx) => { return ( { AnalyticsUtil.logEvent("CREATE_DATA_SOURCE_CLICK", { @@ -203,11 +203,12 @@ class DatasourceHomeScreen extends React.Component { }); }} > - +
Datasource
diff --git a/app/client/src/pages/Editor/IntegrationEditor/IntegrationsHomeScreen.tsx b/app/client/src/pages/Editor/IntegrationEditor/IntegrationsHomeScreen.tsx index 0d528c4f2b..7fdeb41443 100644 --- a/app/client/src/pages/Editor/IntegrationEditor/IntegrationsHomeScreen.tsx +++ b/app/client/src/pages/Editor/IntegrationEditor/IntegrationsHomeScreen.tsx @@ -37,7 +37,7 @@ const ApiHomePage = styled.div` display: flex; flex-direction: column; - font-size: 24px; + font-size: 20px; padding: 20px 20px 0 20px; /* margin-left: 10px; */ flex: 1; @@ -532,6 +532,7 @@ class IntegrationsHomeScreen extends React.Component< {showTabs && ( - + - - {datasource.name} - {datasource.description} + + + {datasource.name} + + + {datasource.description} + diff --git a/app/client/src/pages/Editor/IntegrationEditor/NewApi.tsx b/app/client/src/pages/Editor/IntegrationEditor/NewApi.tsx index c061299fad..c525dfbaa2 100644 --- a/app/client/src/pages/Editor/IntegrationEditor/NewApi.tsx +++ b/app/client/src/pages/Editor/IntegrationEditor/NewApi.tsx @@ -30,7 +30,7 @@ const StyledContainer = styled.div` justify-content: center; text-align: center; letter-spacing: -0.24px; - color: ${Colors.OXFORD_BLUE}; + color: ${Colors.BLACK}; font-weight: 400; text-decoration: none !important; flex-wrap: wrap; @@ -84,7 +84,7 @@ const ApiCard = styled.div` justify-content: space-between; height: 64px; &:hover { - background: ${Colors.GREY_1}; + background-color: ${Colors.GREY_1}; cursor: pointer; } @@ -245,12 +245,12 @@ function NewApiScreen(props: Props) { return ( - + handleOnClick(API_ACTION.CREATE_NEW_API)} > - +
New Date: Mon, 20 Jun 2022 14:08:57 +0530 Subject: [PATCH 4/6] updated test case to not check active svg --- .../ClientSideTests/Datasources/Datasources_styles_spec.js | 6 ------ 1 file changed, 6 deletions(-) diff --git a/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Datasources/Datasources_styles_spec.js b/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Datasources/Datasources_styles_spec.js index 82ad5b4756..99e6c93f78 100644 --- a/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Datasources/Datasources_styles_spec.js +++ b/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Datasources/Datasources_styles_spec.js @@ -36,12 +36,6 @@ describe("Validate Datasource Panel Styles", function() { "color", backgroundColorGray900, ); - //Check selected tab item icon style - cy.get(".react-tabs__tab--selected path").should( - "have.css", - "fill", - backgroundColorGray900, - ); }); it("Mock datasource card design", () => { From cbf5f88d3fcb299cba99fba5abb0905497979351 Mon Sep 17 00:00:00 2001 From: ChandanBalajiBP Date: Wed, 22 Jun 2022 17:41:44 +0530 Subject: [PATCH 5/6] upadted failing testcase to change tabs --- .../ClientSideTests/Datasources/Datasources_styles_spec.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Datasources/Datasources_styles_spec.js b/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Datasources/Datasources_styles_spec.js index 99e6c93f78..e7b8770292 100644 --- a/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Datasources/Datasources_styles_spec.js +++ b/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Datasources/Datasources_styles_spec.js @@ -39,6 +39,7 @@ describe("Validate Datasource Panel Styles", function() { }); it("Mock datasource card design", () => { + cy.get(pages.integrationCreateNew).click(); //Card container style cy.datasourceCardContainerStyle(".t--mock-datasource-list"); //Datasource card @@ -62,6 +63,7 @@ describe("Validate Datasource Panel Styles", function() { }); it("Database datasource card design", () => { + cy.get(pages.integrationCreateNew).click(); //Card container style cy.datasourceCardContainerStyle( "[data-testid=database-datasource-card-container]", @@ -85,6 +87,7 @@ describe("Validate Datasource Panel Styles", function() { }); it("New API datasource card design", () => { + cy.get(pages.integrationCreateNew).click(); //Card container style cy.datasourceCardContainerStyle( "[data-testid=newapi-datasource-card-container]", From 0af9d2ea3b4d4f33eb3505f1c70908d13de1b8b9 Mon Sep 17 00:00:00 2001 From: ChandanBalajiBP Date: Wed, 22 Jun 2022 18:02:40 +0530 Subject: [PATCH 6/6] add indexing for the testcases --- .../Datasources/Datasources_styles_spec.js | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Datasources/Datasources_styles_spec.js b/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Datasources/Datasources_styles_spec.js index e7b8770292..68063a1f32 100644 --- a/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Datasources/Datasources_styles_spec.js +++ b/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Datasources/Datasources_styles_spec.js @@ -17,7 +17,7 @@ describe("Validate Datasource Panel Styles", function() { cy.get(pages.integrationCreateNew).click(); }); - it("Tabs style", function() { + it("1. Tabs style", function() { //Check gap between tab items cy.get("[data-cy=t--datasource-tab] .react-tabs__tab-list").should( "have.css", @@ -38,7 +38,7 @@ describe("Validate Datasource Panel Styles", function() { ); }); - it("Mock datasource card design", () => { + it("2. Mock datasource card design", () => { cy.get(pages.integrationCreateNew).click(); //Card container style cy.datasourceCardContainerStyle(".t--mock-datasource-list"); @@ -62,7 +62,7 @@ describe("Validate Datasource Panel Styles", function() { cy.datasourceNameStyle("[data-testid=mockdatasource-name]"); }); - it("Database datasource card design", () => { + it("3. Database datasource card design", () => { cy.get(pages.integrationCreateNew).click(); //Card container style cy.datasourceCardContainerStyle( @@ -86,7 +86,7 @@ describe("Validate Datasource Panel Styles", function() { ); }); - it("New API datasource card design", () => { + it("4. New API datasource card design", () => { cy.get(pages.integrationCreateNew).click(); //Card container style cy.datasourceCardContainerStyle( @@ -110,14 +110,14 @@ describe("Validate Datasource Panel Styles", function() { cy.get(".t--integrationsHomePage").should("have.css", "font-size", "20px"); }); - it("Action button icon placement", () => { + it("5. Action button icon placement", () => { //Navigate to Active tab cy.get(pages.integrationActiveTab).click({ force: true }); //Icon should be placed left to the text. cy.get(".t--create-query .t--left-icon"); }); - it("Datasource Active card styles", () => { + it("6. Datasource Active card styles", () => { //Active card wrapper cy.get(".t--datasource") .should("have.css", "padding", "15px") @@ -152,7 +152,7 @@ describe("Validate Datasource Panel Styles", function() { .and("have.css", "align-items", "center"); }); - it("Collapse component styles", () => { + it("7. Collapse component styles", () => { //Collapse wrapper cy.get("[data-testid=datasource-collapse-wrapper]") .should("have.css", "color", backgroundColorGray700)