feat: Choose random color on collection creation (#3912)

Choose a random color from a shared color palette between backend
and frontend during collection creation.

app/components/IconPicker.tsx

@@ -40,6 +40,7 @@ import { useTranslation } from "react-i18next";
 import { useMenuState, MenuButton, MenuItem } from "reakit/Menu";
 import styled, { useTheme } from "styled-components";
 import breakpoint from "styled-components-breakpoint";
+import { colorPalette } from "@shared/utils/collections";
 import ContextMenu from "~/components/ContextMenu";
 import Flex from "~/components/Flex";
 import { LabelText } from "~/components/Input";
@@ -200,18 +201,7 @@ export const icons = {
     keywords: "warning alert error",
   },
 };
-const colors = [
-  "#4E5C6E",
-  "#0366d6",
-  "#9E5CF7",
-  "#FF825C",
-  "#FF5C80",
-  "#FFBE0B",
-  "#42DED1",
-  "#00D084",
-  "#FF4DFA",
-  "#2F362F",
-];
+
 type Props = {
   onOpen?: () => void;
   onClose?: () => void;
@@ -272,7 +262,7 @@ function IconPicker({ onOpen, onClose, icon, color, onChange }: Props) {
             <ColorPicker
               color={color}
               onChange={(color) => onChange(color.hex, icon)}
-              colors={colors}
+              colors={colorPalette}
               triangle="hide"
               styles={{
                 default: {

app/scenes/CollectionNew.tsx

@@ -3,6 +3,8 @@ import { observable } from "mobx";
 import { observer } from "mobx-react";
 import * as React from "react";
 import { withTranslation, Trans, WithTranslation } from "react-i18next";
+import { randomElement } from "@shared/random";
+import { colorPalette } from "@shared/utils/collections";
 import { CollectionValidation } from "@shared/validations";
 import RootStore from "~/stores/RootStore";
 import Collection from "~/models/Collection";
@@ -30,7 +32,7 @@ class CollectionNew extends React.Component<Props> {
   icon = "";
 
   @observable
-  color = "#4E5C6E";
+  color = randomElement(colorPalette);
 
   @observable
   sharing = true;

server/routes/api/collections.test.ts

@@ -1,4 +1,5 @@
 import TestServer from "fetch-test-server";
+import { colorPalette } from "@shared/utils/collections";
 import { Document, CollectionUser, CollectionGroup } from "@server/models";
 import webService from "@server/services/web";
 import {
@@ -1054,6 +1055,7 @@ describe("#collections.create", () => {
     expect(body.data.name).toBe("Test");
     expect(body.data.sort.field).toBe("index");
     expect(body.data.sort.direction).toBe("asc");
+    expect(colorPalette.includes(body.data.color)).toBeTruthy();
     expect(body.policies.length).toBe(1);
     expect(body.policies[0].abilities.read).toBeTruthy();
   });

server/routes/api/collections.ts

@@ -2,6 +2,8 @@ import fractionalIndex from "fractional-index";
 import invariant from "invariant";
 import Router from "koa-router";
 import { Sequelize, Op, WhereOptions } from "sequelize";
+import { randomElement } from "@shared/random";
+import { colorPalette } from "@shared/utils/collections";
 import collectionExporter from "@server/commands/collectionExporter";
 import teamUpdater from "@server/commands/teamUpdater";
 import { sequelize } from "@server/database/sequelize";
@@ -50,7 +52,7 @@ const router = new Router();
 router.post("collections.create", auth(), async (ctx) => {
   const {
     name,
-    color,
+    color = randomElement(colorPalette),
     description,
     permission,
     sharing,

shared/random.ts

@@ -2,4 +2,8 @@ const randomInteger = (min: number, max: number) => {
   return Math.floor(Math.random() * (max - min + 1) + min);
 };
 
-export { randomInteger };
+const randomElement = <T>(arr: T[]): T => {
+  return arr[randomInteger(0, arr.length - 1)];
+};
+
+export { randomInteger, randomElement };

shared/utils/collections.ts

@@ -28,3 +28,16 @@ export const sortNavigationNodes = (
       : document.children,
   }));
 };
+
+export const colorPalette = [
+  "#4E5C6E",
+  "#0366d6",
+  "#9E5CF7",
+  "#FF825C",
+  "#FF5C80",
+  "#FFBE0B",
+  "#42DED1",
+  "#00D084",
+  "#FF4DFA",
+  "#2F362F",
+];