feat: Branding

app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Widgets/Tab/Tab_OnEvent_Navigation_spec.js

@@ -3,33 +3,35 @@ const widgetsPage = require("../../../../../locators/Widgets.json");
 const dsl = require("../../../../../fixtures/tabsWidgetReset.json");
 const publishPage = require("../../../../../locators/publishWidgetspage.json");
 
-describe("Tabs widget on change of selection navigation usecases", function () {
-    before(() => {
-        cy.addDsl(dsl);
-    });
+describe("Tabs widget on change of selection navigation usecases", function() {
+  before(() => {
+    cy.addDsl(dsl);
+  });
 
-    it("1.On change of tab selection Navigate to a URL", function () {
-        cy.openPropertyPane("tabswidget");
-        cy.get(".code-highlight")
-            .children()
-            .contains("No action")
-            .last()
-            .click({ force: true })
-            .selectOnClickOption("Navigate to");
-        cy.wait(5000);
-        cy.get("#switcher--url").click({ force: true });
-        cy.testCodeMirrorWithIndex("www.appsmith.com", 1);
-        cy.wait(5000);
-    });
-
-    it("2.Publish the app and validate the navigation change on tab selection.", function () {
-        cy.PublishtheApp();
-        cy.wait(5000);
-        cy.get(".t--page-switch-tab:contains('Tab 3')").click({force: true},{ multiple: true });
-        cy.url().should('include', 'appsmith');
-        cy.go('back');
-        cy.get(".t--page-switch-tab:contains('Tab 3')").should("be.visible");
-        //cy.get(publishPage.backToEditor).click({ force: true });
-    });
+  it("1.On change of tab selection Navigate to a URL", function() {
+    cy.openPropertyPane("tabswidget");
+    cy.get(".code-highlight")
+      .children()
+      .contains("No action")
+      .last()
+      .click({ force: true })
+      .selectOnClickOption("Navigate to");
+    cy.wait(5000);
+    cy.get("#switcher--url").click({ force: true });
+    cy.testCodeMirrorWithIndex("www.appsmith.com", 1);
+    cy.wait(5000);
+  });
 
+  it("2.Publish the app and validate the navigation change on tab selection.", function() {
+    cy.PublishtheApp();
+    cy.wait(5000);
+    cy.get(".t--page-switch-tab:contains('Tab 3')").click(
+      { force: true },
+      { multiple: true },
+    );
+    cy.url().should("include", "appsmith");
+    cy.go("back");
+    cy.get(".t--page-switch-tab:contains('Tab 3')").should("be.visible");
+    //cy.get(publishPage.backToEditor).click({ force: true });
+  });
 });

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/cypress/support/widgetCommands.js

@@ -431,8 +431,7 @@ Cypress.Commands.add("updateComputedValueV2", (value) => {
   cy.wait(1000);
 });
 
-
-Cypress.Commands.add("testCodeMirrorWithIndex", (value,index) => {
+Cypress.Commands.add("testCodeMirrorWithIndex", (value, index) => {
   cy.EnableAllCodeEditors();
   cy.get(".CodeMirror textarea")
     .eq(index)

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]",
+    "design-system": "npm:@appsmithorg/[email protected]-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/public/manifest.json

@@ -3,7 +3,7 @@
   "name": "Appsmith Client Web UI",
   "icons": [
     {
-      "src": "favicon-orange.ico",
+      "src": "static/img/favicon-orange.ico",
       "sizes": "64x64 32x32 24x24 16x16",
       "type": "image/x-icon"
     }

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 = () => ({