feat: Branding

app/client/cypress/integration/Smoke_TestSuite/EnterpriseTests/Branding/Branding_spec.js

@@ -0,0 +1,205 @@
+const commonlocators = require("../../../../locators/commonlocators.json");
+
+const locators = {
+  AdminSettingsEntryLink: ".admin-settings-menu-option",
+  LeftPaneBrandingLink: ".t--settings-category-branding",
+  AdminSettingsColorInput: ".t--settings-brand-color-input input[type=text]",
+  AdmingSettingsLogoInput: ".t--settings-brand-logo-input input[type=file]",
+  AdmingSettingsLogoInputImage: ".t--settings-brand-logo-input img",
+  AdmingSettingsFaviconInput:
+    ".t--settings-brand-favicon-input input[type=file]",
+  AdmingSettingsFaviconInputImage: ".t--settings-brand-favicon-input img",
+  BrandingBg: ".t--branding-bg",
+  BrandingLogo: ".t--branding-logo",
+  BrandingFavicon: "img.t--branding-favicon",
+  BrandingFaviconHead: "link.t--branding-favicon",
+  dashboardAppTab: ".t--apps-tab",
+  createNewAppButton: ".t--new-button",
+  loginContainer: ".t--login-container",
+  signupLink: ".t--signup-link",
+  authContainer: ".t--auth-container",
+  submitButton: "button[type='submit']",
+  appsmithLogo: ".t--appsmith-logo",
+  appsmithLogoImg: ".t--appsmith-logo img",
+  AdminSettingsColorInputShades: ".t--color-input-shades",
+};
+
+describe("Branding", () => {
+  let logo;
+  let favicon;
+  let shades = {};
+
+  it("super user can access branding page", () => {
+    cy.LogOut();
+    cy.LoginFromAPI(Cypress.env("USERNAME"), Cypress.env("PASSWORD"));
+    cy.visit("/applications");
+    cy.get(locators.AdminSettingsEntryLink).should("be.visible");
+    cy.get(locators.AdminSettingsEntryLink).click();
+    cy.url().should("contain", "/settings/general");
+    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", () => {
+    // branding color
+    cy.get(locators.AdminSettingsColorInput)
+      .focus()
+      .clear()
+      .type("red");
+
+    cy.get(".t--branding-bg").should(
+      "have.css",
+      "background-color",
+      "rgb(255, 0, 0)",
+    );
+
+    // branding logo
+    cy.get(locators.AdmingSettingsLogoInput).attachFile("appsmithlogo.png");
+    cy.wait(1000);
+    cy.get(locators.AdmingSettingsLogoInputImage).should("be.visible");
+    cy.get(locators.BrandingLogo)
+      .invoke("attr", "src")
+      .then((src) => {
+        cy.get(locators.AdmingSettingsLogoInputImage)
+          .invoke("attr", "src")
+          .should("equal", src);
+      });
+
+    // branding favicon
+    cy.get(locators.AdmingSettingsFaviconInput).attachFile("appsmithlogo.png");
+    cy.wait(1000);
+    cy.get(locators.AdmingSettingsFaviconInputImage).should("be.visible");
+    cy.get(locators.BrandingFavicon)
+      .invoke("attr", "src")
+      .then((src) => {
+        cy.get(locators.AdmingSettingsFaviconInputImage)
+          .invoke("attr", "src")
+          .should("equal", src);
+      });
+
+    // validations - logo
+    cy.get(locators.AdmingSettingsLogoInput).attachFile("testFile.mov");
+    cy.wait(1000);
+    cy.get(commonlocators.toastMsg).contains(
+      Cypress.env("MESSAGES").ADMIN_BRANDING_LOGO_FORMAT_ERROR(),
+    );
+
+    // validations - favicon
+    cy.get(locators.AdmingSettingsFaviconInput).attachFile("testFile.mov");
+    cy.wait(1000);
+    cy.get(commonlocators.toastMsg).contains(
+      Cypress.env("MESSAGES").ADMIN_BRANDING_FAVICON_FORMAT_ERROR(),
+    );
+  });
+
+  it("checks if the form can be submitted", () => {
+    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,
+      );
+    }
+  });
+});

app/client/package.json

@@ -46,7 +46,7 @@
     "cypress-log-to-output": "^1.1.2",
     "dayjs": "^1.10.6",
     "deep-diff": "^1.0.2",
-    "design-system": "npm:@appsmithorg/[email protected].34",
+    "design-system": "npm:@appsmithorg/[email protected].37-alpha.1",
     "downloadjs": "^1.4.7",
     "draft-js": "^0.11.7",
     "exceljs-lightweight": "^1.14.0",

app/client/public/index.html

@@ -3,8 +3,6 @@
 
 <head>
   <meta charset="utf-8" />
-  <link rel="shortcut icon"
-    href="https://res.cloudinary.com/dwpfockn8/image/upload/v1597920848/favicons/favicon-orange_pxfmdc.ico" />
   <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
   <title>Appsmith</title>
   <style>
@@ -13,7 +11,7 @@
       left: 0;
       top: 0;
       height: 4px;
-      background: #D36500;
+      background: #D7D7D7;
       transition: all ease-in 0.3s;
     }
   </style>

app/client/src/AppRouter.tsx

@@ -35,7 +35,7 @@ import LandingScreen from "./LandingScreen";
 import UserAuth from "pages/UserAuth";
 import Users from "pages/users";
 import ErrorPage from "pages/common/ErrorPage";
-import PageNotFound from "pages/common/PageNotFound";
+import PageNotFound from "pages/common/ErrorPages/PageNotFound";
 import PageLoadingBar from "pages/common/PageLoadingBar";
 import ErrorPageHeader from "pages/common/ErrorPageHeader";
 import { getCurrentThemeDetails, ThemeMode } from "selectors/themeSelectors";
@@ -64,6 +64,7 @@ import { getCurrentTenant } from "@appsmith/actions/tenantActions";
 import { getDefaultAdminSettingsPath } from "@appsmith/utils/adminSettingsHelpers";
 import { getCurrentUser as getCurrentUserSelector } from "selectors/usersSelectors";
 import { getTenantPermissions } from "@appsmith/selectors/tenantSelectors";
+import useBrandingTheme from "utils/hooks/useBrandingTheme";
 
 /*
     We use this polyfill to show emoji flags
@@ -116,6 +117,8 @@ function AppRouter(props: {
     changeAppBackground(props.currentTheme);
   }, [props.currentTheme]);
 
+  useBrandingTheme();
+
   const user = useSelector(getCurrentUserSelector);
   const tenantPermissions = useSelector(getTenantPermissions);
 

app/client/src/LandingScreen.tsx

@@ -6,7 +6,7 @@ import { ANONYMOUS_USERNAME, User } from "constants/userConstants";
 import { Redirect } from "react-router";
 import { APPLICATIONS_URL, AUTH_LOGIN_URL, BASE_URL } from "constants/routes";
 import PageLoadingBar from "pages/common/PageLoadingBar";
-import ServerUnavailable from "pages/common/ServerUnavailable";
+import ServerUnavailable from "pages/common/ErrorPages/ServerUnavailable";
 
 type Props = {
   user?: User;

app/client/src/ce/actions/settingsAction.ts

@@ -1,8 +1,11 @@
 import { ReduxActionTypes } from "@appsmith/constants/ReduxActionConstants";
 
-export const saveSettings = (settings: Record<string, string>) => ({
+export const saveSettings = (settings: any, needsRestart = true) => ({
   type: ReduxActionTypes.SAVE_ADMIN_SETTINGS,
-  payload: settings,
+  payload: {
+    settings,
+    needsRestart,
+  },
 });
 
 export const retryServerRestart = () => ({

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

@@ -53,8 +53,6 @@ export const FORM_VALIDATION_PASSWORD_RULE = () =>
   `Please provide a password between 6 and 42 characters`;
 export const FORM_VALIDATION_INVALID_PASSWORD = FORM_VALIDATION_PASSWORD_RULE;
 
-export const LOGIN_PAGE_SUBTITLE = () => `Use your workspace email`;
-export const LOGIN_PAGE_TITLE = () => `Sign in to your account`;
 export const LOGIN_PAGE_EMAIL_INPUT_LABEL = () => `Email`;
 export const LOGIN_PAGE_PASSWORD_INPUT_LABEL = () => `Password`;
 export const LOGIN_PAGE_EMAIL_INPUT_PLACEHOLDER = () =>
@@ -65,7 +63,9 @@ export const LOGIN_PAGE_INVALID_CREDS_ERROR = () =>
   `It looks like you may have entered incorrect/invalid credentials. Please try again or reset password using the button below.`;
 export const LOGIN_PAGE_INVALID_CREDS_FORGOT_PASSWORD_LINK = () =>
   `Reset Password`;
-export const NEW_TO_APPSMITH = () => `New to Appsmith?`;
+export const NEW_TO_APPSMITH = () => `Don't have an account?`;
+export const LOGIN_PAGE_TITLE = () => `Sign in`;
+export const LOGIN_PAGE_SUBTITLE = () => `Sign in to your account`;
 
 export const LOGIN_PAGE_LOGIN_BUTTON_TEXT = () => `sign in`;
 export const LOGIN_PAGE_FORGOT_PASSWORD_TEXT = () => `Forgot Password`;
@@ -337,7 +337,22 @@ export const WIDGET_BIND_HELP = () =>
 
 export const BACK_TO_HOMEPAGE = () => "Go back to homepage";
 
+// error pages
+export const PAGE_NOT_FOUND_TITLE = () => "404";
 export const PAGE_NOT_FOUND = () => "Page not found";
+export const PAGE_SERVER_UNAVAILABLE_ERROR_CODE = () => "503";
+export const PAGE_SERVER_UNAVAILABLE_TITLE = () =>
+  "Appsmith server is unavailable";
+export const PAGE_SERVER_UNAVAILABLE_DESCRIPTION = () =>
+  "Please try again later";
+export const PAGE_SERVER_TIMEOUT_ERROR_CODE = () => "504";
+export const PAGE_SERVER_TIMEOUT_TITLE = () =>
+  "Appsmith server is taking too long to respond";
+export const PAGE_SERVER_TIMEOUT_DESCRIPTION = () =>
+  `Please retry after some time`;
+export const PAGE_CLIENT_ERROR_TITLE = () => "Whoops something went wrong!";
+export const PAGE_CLIENT_ERROR_DESCRIPTION = () =>
+  "This is embarrassing, please contact Appsmith support for help";
 
 // comments
 export const POST = () => "Post";
@@ -1131,6 +1146,40 @@ export const DANGER_ZONE = () => "Danger Zone";
 export const DISCONNECT_AUTH_METHOD = () => "Disconnect";
 export const DISCONNECT_CONFIRMATION = () => "Are you sure?";
 
+// Branding
+export const ADMIN_BRANDING_SETTINGS_TITLE = () => "Branding";
+export const ADMIN_BRANDING_SETTINGS_SUBTITLE = () =>
+  "Set your organization's logo and brand colors.";
+export const ADMIN_BRANDING_UPGRADE_BANNER_TITLE = () =>
+  "Brand your organisation";
+export const ADMIN_BRANDING_UPGRADE_BANNER_SUBTITLE = () =>
+  "Branding is only available via our enterprise plan. You can experiment with branding via the playground below, but your changes will not be saved unless your account is upgraded.";
+export const ADMIN_BRANDING_LOGO_SIZE_ERROR = () => `Logo should be below 2MB`;
+export const ADMIN_BRANDING_LOGO_DIMENSION_ERROR = () =>
+  `Logo should  be atleast 256px in height`;
+export const ADMIN_BRANDING_LOGO_FORMAT_ERROR = () =>
+  `Allowed formats for logo are svg, png and jpg`;
+export const ADMIN_BRANDING_LOGO_REQUIREMENT = () =>
+  `Upload a .SVG .PNG or .JPG. of max 2MB`;
+export const ADMIN_BRANDING_FAVICON_DIMENSION_ERROR = () =>
+  `Favicon should be max 32px in width and 32px in height`;
+export const ADMIN_BRANDING_FAVICON_SIZE_ERROR = () =>
+  `Favicon should be below 2MB`;
+export const ADMIN_BRANDING_FAVICON_FORMAT_ERROR = () =>
+  `Allowed formats for favicon are jpg, png and ico`;
+export const ADMIN_BRANDING_FAVICON_REQUIREMENT = () =>
+  `Upload a .ICO, .JPG or .PNG file of max 32 x 32`;
+export const ADMIN_BRANDING_COLOR_TOOLTIP_PRIMARY = () =>
+  `Used on buttons, links, and other interactive elements.`;
+export const ADMIN_BRANDING_COLOR_TOOLTIP_BACKGROUND = () =>
+  `Used as background color for the auth pages`;
+export const ADMIN_BRANDING_COLOR_TOOLTIP_HOVER = () =>
+  `Used as hover color for the button.`;
+export const ADMIN_BRANDING_COLOR_TOOLTIP_FONT = () =>
+  `Used as text color for the buttons.`;
+export const ADMIN_BRANDING_COLOR_TOOLTIP_DISABLED = () =>
+  `Used as background color for disabled buttons.`;
+
 // Guided tour
 // -- STEPS ---
 export const STEP_ONE_TITLE = () =>