Merge branch 'release'

app/client/src/api/ApplicationApi.tsx

@@ -1,6 +1,8 @@
 import Api from "./Api";
 import { ApiResponse } from "./ApiResponses";
 import { AxiosPromise } from "axios";
+import { AppColorCode } from "constants/DefaultTheme";
+import { AppIconName } from "components/ads/AppIcon";
 
 export interface PublishApplicationRequest {
   applicationId: string;
@@ -44,6 +46,8 @@ export interface CreateApplicationResponse extends ApiResponse {
 export interface CreateApplicationRequest {
   name: string;
   orgId: string;
+  color?: AppColorCode;
+  icon?: AppIconName;
 }
 
 export interface SetDefaultPageRequest {
@@ -149,7 +153,7 @@ class ApplicationApi extends Api {
     return Api.post(
       ApplicationApi.baseURL +
         ApplicationApi.createApplicationPath(request.orgId),
-      { name: request.name },
+      { name: request.name, color: request.color, icon: request.icon },
     );
   }
 

app/client/src/components/stories/ColorSelector.stories.tsx

@@ -13,7 +13,7 @@ export default {
   decorators: [withKnobs, withDesign],
 };
 
-const defaultValue = light.appCardColors;
+const defaultValue = theme.colors.appCardColors;
 
 export const ColorPickerStory = () => (
   <StoryWrapper>

app/client/src/components/stories/Menu.stories.tsx

@@ -14,7 +14,7 @@ import EditableText, {
   EditInteractionKind,
 } from "components/ads/EditableText";
 import { IconCollection, IconName } from "components/ads/Icon";
-import { theme, light, dark } from "constants/DefaultTheme";
+import { theme } from "constants/DefaultTheme";
 
 export default {
   title: "Menu",
@@ -40,7 +40,7 @@ const errorFunction = (name: string) => {
 
 export const MenuStory = () => {
   const [selectedColor, setSelectedColor] = useState<string>(
-    light.appCardColors[0],
+    theme.colors.appCardColors[0],
   );
   const [savingState, SetSavingState] = useState<SavingState>(
     SavingState.NOT_STARTED,
@@ -99,7 +99,7 @@ export const MenuStory = () => {
         <ColorSelector
           onSelect={(value: string) => setSelectedColor(value)}
           fill={false}
-          colorPalette={light.appCardColors}
+          colorPalette={theme.colors.appCardColors}
         />
         <MenuDivider />
         <IconSelector

app/client/src/constants/DefaultTheme.tsx

@@ -427,6 +427,27 @@ export const largeButton = css`
   letter-spacing: ${props => props.theme.typography.btnLarge.letterSpacing}px;
 `;
 
+export const appColors = [
+  "#6C4CF1",
+  "#4F70FD",
+  "#F56AF4",
+  "#B94CF1",
+  "#54A9FB",
+  "#5ED3DA",
+  "#5EDA82",
+  "#A8D76C",
+  "#E9C951",
+  "#FE9F44",
+  "#ED86A1",
+  "#EA6179",
+  "#C03C3C",
+  "#BC6DB2",
+  "#6C9DD0",
+  "#6CD0CF",
+] as const;
+
+export type AppColorCode = typeof appColors[number];
+
 const darkShades = [
   "#1A191C",
   "#232324",
@@ -481,7 +502,6 @@ type ColorType = {
     hoverBorder: ShadeColor;
     iconColor: ShadeColor;
   };
-  appCardColors: string[];
   text: {
     normal: ShadeColor;
     heading: ShadeColor;
@@ -757,24 +777,6 @@ export const dark: ColorType = {
     hoverBorder: darkShades[4],
     iconColor: darkShades[9],
   },
-  appCardColors: [
-    "#6C4CF1",
-    "#4F70FD",
-    "#F56AF4",
-    "#B94CF1",
-    "#54A9FB",
-    "#5ED3DA",
-    "#5EDA82",
-    "#A8D76C",
-    "#E9C951",
-    "#FE9F44",
-    "#ED86A1",
-    "#EA6179",
-    "#C03C3C",
-    "#BC6DB2",
-    "#6C9DD0",
-    "#6CD0CF",
-  ],
   text: {
     normal: darkShades[6],
     heading: darkShades[7],
@@ -1050,17 +1052,6 @@ export const light: ColorType = {
     hoverBorder: lightShades[2],
     iconColor: lightShades[11],
   },
-  appCardColors: [
-    "#4266FD",
-    "#69B5FF",
-    "#5CE7EF",
-    "#61DF48",
-    "#FF6786",
-    "#FFAD5E",
-    "#FCD43E",
-    "#B0E968",
-    "#9177FF",
-  ],
   text: {
     normal: lightShades[8],
     heading: lightShades[9],
@@ -1435,6 +1426,7 @@ export const theme: Theme = {
     cmBacground: Colors.BLUE_CHARCOAL,
     lightningborder: Colors.ALABASTER,
     formButtonColor: Colors.WHITE,
+    appCardColors: appColors,
   },
   lineHeights: [0, 14, 16, 18, 22, 24, 28, 36, 48, 64, 80],
   fonts: {

app/client/src/pages/Applications/ApplicationCard.tsx

@@ -270,7 +270,7 @@ export const ApplicationCard = (props: ApplicationCardProps) => {
       );
     }
     setSelectedColor(colorCode);
-  }, []);
+  }, [props.application.color]);
   useEffect(() => {
     if (props.share) {
       moreActionItems.push({

app/client/src/pages/Applications/helpers.ts

@@ -1,8 +1,12 @@
+import { AppIconName } from "components/ads/AppIcon";
+import { AppColorCode } from "constants/DefaultTheme";
 import { ReduxActionTypes } from "constants/ReduxActionConstants";
 import { SubmissionError } from "redux-form";
 export type CreateApplicationFormValues = {
   applicationName: string;
   orgId: string;
+  colorCode?: AppColorCode;
+  appName?: AppIconName;
 };
 
 export const CREATE_APPLICATION_FORM_NAME_FIELD = "applicationName";

app/client/src/pages/Applications/index.tsx

@@ -60,9 +60,11 @@ import { notEmptyValidator } from "components/ads/TextInput";
 import { saveOrg } from "actions/orgActions";
 import CenteredWrapper from "../../components/designSystems/appsmith/CenteredWrapper";
 import NoSearchImage from "../../assets/images/NoSearchResult.svg";
-import { getNextEntityName } from "utils/AppsmithUtils";
+import { getNextEntityName, getRandomPaletteColor } from "utils/AppsmithUtils";
 import Spinner from "components/ads/Spinner";
 import ProfileImage from "pages/common/ProfileImage";
+import { getThemeDetails } from "selectors/themeSelectors";
+import { AppIconCollection } from "components/ads/AppIcon";
 
 const OrgDropDown = styled.div`
   display: flex;
@@ -434,6 +436,7 @@ const NoSearchResultImg = styled.img`
 
 const ApplicationsSection = (props: any) => {
   const dispatch = useDispatch();
+  const themeDetails = useSelector(getThemeDetails);
   const isSavingOrgInfo = useSelector(getIsSavingOrgInfo);
   const isFetchingApplications = useSelector(getIsFetchingApplications);
   const userOrgs = useSelector(getUserApplicationsOrgsList);
@@ -496,12 +499,19 @@ const ApplicationsSection = (props: any) => {
   };
 
   const createNewApplication = (applicationName: string, orgId: string) => {
-    console.log(applicationName, orgId);
+    const color = getRandomPaletteColor(
+      themeDetails.theme.colors.appCardColors,
+    );
+    const icon =
+      AppIconCollection[Math.floor(Math.random() * AppIconCollection.length)];
+
     return dispatch({
       type: ReduxActionTypes.CREATE_APPLICATION_INIT,
       payload: {
         applicationName,
         orgId,
+        icon,
+        color,
       },
     });
   };

app/client/src/sagas/ApplicationSagas.tsx

@@ -41,6 +41,8 @@ import { Toaster } from "components/ads/Toast";
 import { APP_MODE } from "../reducers/entityReducers/appReducer";
 import { Organization } from "constants/orgConstants";
 import { Variant } from "components/ads/common";
+import { AppIconName } from "components/ads/AppIcon";
+import { AppColorCode } from "constants/DefaultTheme";
 
 const getDefaultPageId = (
   pages?: ApplicationPagePayload[],
@@ -312,12 +314,14 @@ export function* changeAppViewAccessSaga(
 export function* createApplicationSaga(
   action: ReduxAction<{
     applicationName: string;
+    icon: AppIconName;
+    color: AppColorCode;
     orgId: string;
     resolve: any;
     reject: any;
   }>,
 ) {
-  const { applicationName, orgId, reject } = action.payload;
+  const { applicationName, icon, color, orgId, reject } = action.payload;
   try {
     const userOrgs = yield select(getUserApplicationsOrgsList);
     const existingOrgs = userOrgs.filter(
@@ -343,6 +347,8 @@ export function* createApplicationSaga(
     } else {
       const request: CreateApplicationRequest = {
         name: applicationName,
+        icon: icon,
+        color: color,
         orgId,
       };
       const response: CreateApplicationResponse = yield call(