feat: Collection Icons (#1281)

* wip: Working for creation, and display

* feat: IconPicker

* fix

* feat: Invert collection icon color when dark in dark mode

* Improve readability of dropdown menus in dark mode
Suggest icon based on collection name

* Add additional icons
Tweaks and final polish

* fix: Write default icon as empty icon column

* feat: Improve icon selection logic
add more keywords
Improve icon coloring when selected and in dark mode

* lint

* lint

server/api/collections.js

@@ -30,7 +30,7 @@ const { authorize } = policy;
 const router = new Router();
 
 router.post('collections.create', auth(), async ctx => {
-  const { name, color, description, type } = ctx.body;
+  const { name, color, description, icon, type } = ctx.body;
   const isPrivate = ctx.body.private;
   ctx.assertPresent(name, 'name is required');
 
@@ -44,6 +44,7 @@ router.post('collections.create', auth(), async ctx => {
   let collection = await Collection.create({
     name,
     description,
+    icon,
     color,
     type: type || 'atlas',
     teamId: user.teamId,
@@ -445,7 +446,7 @@ router.post('collections.export_all', auth(), async ctx => {
 });
 
 router.post('collections.update', auth(), async ctx => {
-  const { id, name, description, color } = ctx.body;
+  const { id, name, description, icon, color } = ctx.body;
   const isPrivate = ctx.body.private;
   ctx.assertPresent(name, 'name is required');
 
@@ -480,6 +481,7 @@ router.post('collections.update', auth(), async ctx => {
 
   collection.name = name;
   collection.description = description;
+  collection.icon = icon;
   collection.color = color;
   collection.private = isPrivate;
 

server/migrations/20200522054958-collection-icon.js

@@ -0,0 +1,14 @@
+'use strict';
+
+module.exports = {
+  up: async (queryInterface, Sequelize) => {
+    await queryInterface.addColumn('collections', 'icon', {
+      type: Sequelize.TEXT,
+      allowNull: true,
+    });
+  },
+
+  down: async (queryInterface, Sequelize) => {
+    await queryInterface.removeColumn('collections', 'icon');
+  }
+};

server/models/Collection.js

@@ -19,6 +19,7 @@ const Collection = sequelize.define(
     urlId: { type: DataTypes.STRING, unique: true },
     name: DataTypes.STRING,
     description: DataTypes.STRING,
+    icon: DataTypes.STRING,
     color: DataTypes.STRING,
     private: DataTypes.BOOLEAN,
     maintainerApprovalRequired: DataTypes.BOOLEAN,
@@ -46,6 +47,12 @@ const Collection = sequelize.define(
   }
 );
 
+Collection.addHook('beforeSave', async model => {
+  if (model.icon === 'collection') {
+    model.icon = null;
+  }
+});
+
 // Class methods
 
 Collection.associate = models => {

server/presenters/collection.js

@@ -24,6 +24,7 @@ export default function present(collection: Collection) {
     url: collection.url,
     name: collection.name,
     description: collection.description,
+    icon: collection.icon,
     color: collection.color || '#4E5C6E',
     type: collection.type,
     private: collection.private,