chore: Update Logo/Favicon url + remove EE cypress code for Branding + Update screenshots tests (#18872)
* add new screenshot of apppagelayout + update logo url + remove ee code in spec * fix error message for logo * revert profile snap * remove brand colors in ce * fix auth page layout issue * revert some snap images * fix visual tests * fix cypress tests * fix cypress tests
This commit is contained in:
Pawan Kumar
GitHub
parent
2445a3c625
commit
86f86f0298
|
|
@ -286,8 +286,8 @@ describe("App Theming funtionality", function() {
|
|||
cy.get(widgetsPage.colorPickerV2Popover)
|
||||
.click({ force: true })
|
||||
.click();
|
||||
cy.get(widgetsPage.colorPickerV2Color)
|
||||
.eq(28)
|
||||
cy.get(widgetsPage.colorPickerV2TailwindColor)
|
||||
.eq(23)
|
||||
.then(($elem) => {
|
||||
cy.get($elem).click({ force: true });
|
||||
cy.get(commonlocators.canvas).should(
|
||||
|
|
@ -797,8 +797,8 @@ describe("App Theming funtionality", function() {
|
|||
cy.get(widgetsPage.colorPickerV2Popover)
|
||||
.click({ force: true })
|
||||
.click();
|
||||
cy.get(widgetsPage.colorPickerV2Color)
|
||||
.eq(40)
|
||||
cy.get(widgetsPage.colorPickerV2TailwindColor)
|
||||
.eq(33)
|
||||
.then(($elem) => {
|
||||
cy.get($elem).click({ force: true });
|
||||
cy.get(widgetsPage.widgetBtn)
|
||||
|
|
@ -1029,8 +1029,8 @@ describe("App Theming funtionality", function() {
|
|||
cy.get(widgetsPage.colorPickerV2Popover)
|
||||
.click({ force: true })
|
||||
.click();
|
||||
cy.get(widgetsPage.colorPickerV2Color)
|
||||
.eq(22)
|
||||
cy.get(widgetsPage.colorPickerV2TailwindColor)
|
||||
.eq(13)
|
||||
.then(($elem) => {
|
||||
cy.get($elem).click({ force: true });
|
||||
cy.get(widgetsPage.widgetBtn)
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ describe("Visual regression tests", () => {
|
|||
// command: "npx cypress run --spec cypress/integration/Smoke_TestSuite/ClientSideTests/LayoutValidation/AppPageLayout_spec.js --browser chrome"
|
||||
// 3. New screenshot will be generated in the snapshot folder.
|
||||
|
||||
it.skip("Layout validation for app page in edit mode", () => {
|
||||
it("Layout validation for app page in edit mode", () => {
|
||||
cy.visit("/applications");
|
||||
cy.wait(3000);
|
||||
cy.get(".t--applications-container .createnew").should("be.visible");
|
||||
|
|
@ -19,28 +19,28 @@ describe("Visual regression tests", () => {
|
|||
cy.get("#root").matchImageSnapshot("apppage");
|
||||
});
|
||||
|
||||
it.skip("Layout validation for Quick page wizard", () => {
|
||||
it("Layout validation for Quick page wizard", () => {
|
||||
cy.get("[data-cy='generate-app']").click();
|
||||
cy.wait(2000);
|
||||
// taking screenshot of generate crud page
|
||||
cy.get("#root").matchImageSnapshot("quickPageWizard");
|
||||
});
|
||||
|
||||
it.skip("Layout Validation for App builder Page", () => {
|
||||
it("Layout Validation for App builder Page", () => {
|
||||
cy.get(".bp3-icon-chevron-left").click();
|
||||
cy.wait(2000);
|
||||
// taking screenshot of app builder page
|
||||
cy.get("#root").matchImageSnapshot("emptyAppBuilder");
|
||||
});
|
||||
|
||||
it.skip("Layout Validation for Empty deployed app", () => {
|
||||
it("Layout Validation for Empty deployed app", () => {
|
||||
cy.PublishtheApp();
|
||||
cy.wait(3000);
|
||||
// taking screenshot of empty deployed app
|
||||
cy.get("#root").matchImageSnapshot("EmptyApp");
|
||||
});
|
||||
|
||||
it.skip("Layout Validation for profile page", () => {
|
||||
it("Layout Validation for profile page", () => {
|
||||
cy.get(".t--profile-menu-icon").click();
|
||||
cy.get(".t--edit-profile").click();
|
||||
cy.wait(2000);
|
||||
|
|
@ -48,13 +48,12 @@ describe("Visual regression tests", () => {
|
|||
cy.get("#root").matchImageSnapshot("Profile");
|
||||
});
|
||||
|
||||
it.skip("Layout validation for login page", () => {
|
||||
it("Layout validation for login page", () => {
|
||||
cy.get(homePage.profileMenu).click();
|
||||
cy.get(homePage.signOutIcon).click();
|
||||
cy.wait(500);
|
||||
// validating all the fields on login page
|
||||
cy.get(homePage.headerAppSmithLogo).should("be.visible");
|
||||
cy.xpath("//h1").should("have.text", "Sign in to your account");
|
||||
cy.xpath("//h1").should("have.text", "Sign in");
|
||||
cy.get(".bp3-label")
|
||||
.first()
|
||||
.should("have.text", "Email ");
|
||||
|
|
|
|||
|
|
@ -39,13 +39,6 @@ describe("Branding", () => {
|
|||
cy.get(locators.LeftPaneBrandingLink).should("be.visible");
|
||||
cy.get(locators.LeftPaneBrandingLink).click();
|
||||
cy.wait(2000);
|
||||
|
||||
cy.get("h2").contains(
|
||||
Cypress.env("MESSAGES").ADMIN_BRANDING_SETTINGS_TITLE(),
|
||||
);
|
||||
cy.get("h2 + div").contains(
|
||||
Cypress.env("MESSAGES").ADMIN_BRANDING_SETTINGS_SUBTITLE(),
|
||||
);
|
||||
});
|
||||
|
||||
it("should test that changing logo,favicon and color changes the preview", () => {
|
||||
|
|
@ -104,102 +97,5 @@ describe("Branding", () => {
|
|||
if (Cypress.env("Edition") === 0) {
|
||||
cy.get(locators.submitButton).should("be.disabled");
|
||||
}
|
||||
|
||||
if (Cypress.env("Edition") === 1) {
|
||||
// click on submit button
|
||||
cy.get(locators.submitButton).click();
|
||||
cy.wait(2000);
|
||||
|
||||
cy.get(commonlocators.toastMsg).contains("Successfully Saved");
|
||||
|
||||
// grab the favicon value
|
||||
cy.get(locators.AdmingSettingsFaviconInputImage)
|
||||
.invoke("attr", "src")
|
||||
.then((src) => {
|
||||
favicon = src;
|
||||
});
|
||||
|
||||
// grab the logo value
|
||||
cy.get(locators.AdmingSettingsLogoInputImage)
|
||||
.invoke("attr", "src")
|
||||
.then((src) => {
|
||||
logo = src;
|
||||
});
|
||||
|
||||
// grap the shades
|
||||
let currentColor;
|
||||
cy.get(locators.AdminSettingsColorInputShades)
|
||||
.find("div")
|
||||
.each(($el) => {
|
||||
cy.wrap($el)
|
||||
.invoke("css", "background-color")
|
||||
.then((color) => {
|
||||
currentColor = color;
|
||||
|
||||
cy.wrap($el)
|
||||
.invoke("data", "id")
|
||||
.then((id) => {
|
||||
shades[id] = currentColor;
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
it("checks branding on dashboard", () => {
|
||||
if (Cypress.env("Edition") === 1) {
|
||||
// naivagae to dashboard
|
||||
cy.get(locators.appsmithLogo).click();
|
||||
|
||||
// check logo
|
||||
cy.get(locators.appsmithLogoImg)
|
||||
.invoke("attr", "src")
|
||||
.should("eq", logo);
|
||||
|
||||
// check favicon
|
||||
cy.get(locators.BrandingFaviconHead)
|
||||
.invoke("attr", "href")
|
||||
.should("eq", favicon);
|
||||
|
||||
// check the apps tab border bottom
|
||||
cy.get(locators.dashboardAppTab).should(
|
||||
"have.css",
|
||||
"border-bottom-color",
|
||||
shades.primary,
|
||||
);
|
||||
|
||||
// check the button bg
|
||||
cy.get(locators.createNewAppButton).should(
|
||||
"have.css",
|
||||
"background-color",
|
||||
shades.primary,
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
it("checks branding colors on login page", () => {
|
||||
if (Cypress.env("Edition") === 1) {
|
||||
// logout user
|
||||
cy.window()
|
||||
.its("store")
|
||||
.invoke("dispatch", { type: "LOGOUT_USER_INIT" });
|
||||
cy.wait("@postLogout");
|
||||
|
||||
cy.wait(2000);
|
||||
|
||||
cy.get(locators.loginContainer).should(
|
||||
"have.css",
|
||||
"border-top-color",
|
||||
shades.primary,
|
||||
);
|
||||
|
||||
cy.get(locators.signupLink).should("have.css", "color", shades.primary);
|
||||
|
||||
cy.get(locators.authContainer).should(
|
||||
"have.css",
|
||||
"background-color",
|
||||
shades.background,
|
||||
);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -193,6 +193,7 @@
|
|||
"selectedTextSize": ".t--property-control-textsize .bp3-popover-target .sub-text",
|
||||
"colorPickerV2Popover": ".t--colorpicker-v2-popover",
|
||||
"colorPickerV2Color": ".t--colorpicker-v2-color",
|
||||
"colorPickerV2TailwindColor": ".t--tailwind-colors .t--colorpicker-v2-color",
|
||||
"modalCloseButton": ".t--draggable-iconbuttonwidget .bp3-button",
|
||||
"filepickerwidgetv2": ".t--widget-filepickerwidgetv2",
|
||||
"filepickerwidgetv2CancelBtn": "button.uppy-DashboardContent-back",
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 74 KiB After Width: | Height: | Size: 58 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 84 KiB After Width: | Height: | Size: 58 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 25 KiB After Width: | Height: | Size: 35 KiB |
|
|
@ -1162,7 +1162,7 @@ export const ADMIN_BRANDING_LOGO_SIZE_ERROR = () =>
|
|||
export const ADMIN_BRANDING_LOGO_DIMENSION_ERROR = () =>
|
||||
`Logo should be atleast 256px in height`;
|
||||
export const ADMIN_BRANDING_LOGO_FORMAT_ERROR = () =>
|
||||
`Uploaded file must be in .ICO, .PNG, and .JPG formats`;
|
||||
`Uploaded file must be in .SVG .PNG, and .JPG formats`;
|
||||
export const ADMIN_BRANDING_LOGO_REQUIREMENT = () =>
|
||||
`.SVG, .PNG, or .JPG only • Max 2MB`;
|
||||
export const ADMIN_BRANDING_FAVICON_DIMENSION_ERROR = () =>
|
||||
|
|
|
|||
|
|
@ -13,11 +13,11 @@ export interface TenantReduxState {
|
|||
}
|
||||
|
||||
export const defaultBrandingConfig = {
|
||||
brandFaviconUrl: "/static/img/favicon-orange.ico",
|
||||
brandFaviconUrl: "https://assets.appsmith.com/appsmith-favicon-orange.ico",
|
||||
brandColors: {
|
||||
...createBrandColorsFromPrimaryColor("#F86A2B"),
|
||||
},
|
||||
brandLogoUrl: "/static/img/appsmith-logo.svg",
|
||||
brandLogoUrl: "https://assets.appsmith.com/appsmith-logo.svg",
|
||||
};
|
||||
|
||||
export const initialState: TenantReduxState = {
|
||||
|
|
|
|||
|
|
@ -13,3 +13,12 @@ export const getTenantPermissions = (state: AppState) => {
|
|||
export const getTenantConfig = (state: AppState) => {
|
||||
return state.tenant?.tenantConfiguration;
|
||||
};
|
||||
|
||||
/**
|
||||
* selects the tenant brand colors
|
||||
*
|
||||
* @returns
|
||||
*/
|
||||
export const getBrandColors = () => {
|
||||
return {} as Record<string, string>;
|
||||
};
|
||||
|
|
|
|||
|
|
@ -26,7 +26,7 @@ import { extractColorsFromString } from "utils/helpers";
|
|||
import { TAILWIND_COLORS } from "constants/ThemeConstants";
|
||||
import useDSEvent from "utils/hooks/useDSEvent";
|
||||
import { DSEventTypes } from "utils/AppsmithUtils";
|
||||
import { getTenantConfig } from "@appsmith/selectors/tenantSelectors";
|
||||
import { getBrandColors } from "@appsmith/selectors/tenantSelectors";
|
||||
const FocusTrap = require("focus-trap-react");
|
||||
|
||||
const MAX_COLS = 10;
|
||||
|
|
@ -109,7 +109,7 @@ interface ColorPickerPopupProps {
|
|||
|
||||
function ColorPickerPopup(props: ColorPickerPopupProps) {
|
||||
const themeColors = useSelector(getSelectedAppThemeProperties).colors;
|
||||
const brandColors = useSelector(getTenantConfig).brandColors;
|
||||
const brandColors = useSelector(getBrandColors);
|
||||
const widgets = useSelector(getWidgets);
|
||||
const DSLStringified = JSON.stringify(widgets);
|
||||
const applicationColors = useMemo(() => {
|
||||
|
|
@ -232,7 +232,7 @@ function ColorPickerPopup(props: ColorPickerPopupProps) {
|
|||
|
||||
<section className="space-y-2">
|
||||
<h3 className="text-xs">All Colors</h3>
|
||||
<div className="grid grid-cols-10 gap-2">
|
||||
<div className="grid grid-cols-10 gap-2 t--tailwind-colors">
|
||||
{Object.keys(TAILWIND_COLORS).map((colorKey, rowIndex) =>
|
||||
Object.keys(get(TAILWIND_COLORS, `${colorKey}`)).map(
|
||||
(singleColorKey, colIndex) => (
|
||||
|
|
|
|||
|
|
@ -17,8 +17,8 @@ function Container(props: ContainerProps) {
|
|||
const tenantConfig = useSelector(getTenantConfig);
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="bg-white border border-t-4 border-t-[color:var(--ads-color-brand)] py-8 px-6 w-[min(400px,80%)] flex flex-col gap-8 t--login-container">
|
||||
<div className="flex flex-col items-center gap-4 my-auto min-w-min">
|
||||
<div className="bg-white border border-t-4 border-t-[color:var(--ads-color-brand)] py-8 px-6 w-[min(400px,80%)] flex flex-col gap-6 t--login-container">
|
||||
<img className="h-8 mx-auto" src={tenantConfig.brandLogoUrl} />
|
||||
<div className="flex flex-col gap-2 text-center">
|
||||
<h1 className="text-xl font-semibold text-center">{title}</h1>
|
||||
|
|
@ -31,7 +31,7 @@ function Container(props: ContainerProps) {
|
|||
{footer}
|
||||
<FooterLinks />
|
||||
</div>
|
||||
</>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@ export function UserAuth() {
|
|||
|
||||
return (
|
||||
<ThemeProvider theme={lightTheme}>
|
||||
<div className="absolute inset-0 flex flex-col gap-4 items-center justify-center auth-container bg-[color:var(--ads-color-background-secondary)] p-4 t--auth-container">
|
||||
<div className="absolute inset-0 flex flex-col overflow-y-auto auth-container bg-[color:var(--ads-color-background-secondary)] p-4 t--auth-container">
|
||||
<Switch location={location}>
|
||||
<SentryRoute component={Login} exact path={`${path}/login`} />
|
||||
<SentryRoute component={SignUp} exact path={`${path}/signup`} />
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user