Allows showing app icons (#274)

Author: natanrolnik

Parse-Dashboard/app.js

@@ -37,6 +37,7 @@ module.exports = function(config, allowInsecureHTTP) {
       apps: config.apps,
       newFeaturesInLatestVersion: newFeaturesInLatestVersion,
     };
+
     const users = config.users;
 
     let auth = null;
@@ -110,6 +111,14 @@ module.exports = function(config, allowInsecureHTTP) {
     res.send({ success: false, error: 'Something went wrong.' });
   });
 
+  // Serve the app icons. Uses the optional `iconsFolder` parameter as
+  // directory name, that was setup in the config file.
+  // We are explicitly not using `__dirpath` here because one may be
+  // running parse-dashboard from globally installed npm.
+  if (config.iconsFolder) {
+    app.use('/appicons', express.static(config.iconsFolder));
+  }
+
   // For every other request, go to index.html. Let client-side handle the rest.
   app.get('/*', function(req, res) {
     let mountPath = getMount(req);

Parse-Dashboard/index.js

@@ -77,8 +77,10 @@ if (!program.config && !process.env.PARSE_DASHBOARD_CONFIG) {
 }
 
 let p = null;
+let configFilePath = null;
 if (configFile) {
   p = jsonFile(configFile);
+  configFilePath = path.dirname(configFile);
 } else if (configFromCLI) {
   p = Promise.resolve(configFromCLI);
 } else {
@@ -93,6 +95,10 @@ p.then(config => {
     }
   });
 
+  if (config.data.iconsFolder && configFilePath) {
+    config.data.iconsFolder = path.join(configFilePath, config.data.iconsFolder);
+  }
+
   const app = express();
 
   app.use(mountPath, parseDashboard(config.data, allowInsecureHTTP));

README.md

@@ -60,6 +60,23 @@ You can also manage apps that on Parse.com from the same dashboard. In your conf
 }
 ```
 
+Parse Dashboard also supports adding an optional icon for each app, so you can identify them easier in the list. To do so, you *must* use the configuration file, define an `iconsFolder` in it, and define the `iconName` parameter for each app (including the extension). The path of the `iconsFolder` is relative to the configuration file. To visualize what it means, in the following example `icons` is a directory located under the same directory as the configuration file:
+
+```
+{
+  "apps": [
+    {
+      "serverURL": "http://localhost:1337/parse",
+      "appId": "myAppId",
+      "masterKey": "myMasterKey",
+      "appName": "My Parse Server App",
+      "iconName": "MyAppIcon.png",
+    }
+  ],
+  "iconsFolder": "icons"
+}
+```
+
 ![Parse Dashboard](.github/dash-shot.png)
 
 # Advanced Usage

src/dashboard/Apps/AppsIndex.react.js

@@ -76,7 +76,9 @@ let AppCard = ({
     </div>;
 
   return <li onClick={canBrowse}>
-    {icon ? <a className={styles.icon}><img src={icon} /></a> : null}
+    <a className={styles.icon}>
+      {icon ? <img src={'appicons/' + icon} width={56} height={56}/> : <Icon width={56} height={56} name='blank-app-outline' fill='#1E384D' />}
+    </a>
     <div className={styles.details}>
       <a className={styles.appname}>{app.name}</a>
       {versionMessage}
@@ -156,7 +158,7 @@ export default class AppsIndex extends React.Component {
         <ul className={styles.apps}>
           {apps.map(app =>
             app.name.toLowerCase().indexOf(search) > -1 ?
-              <AppCard key={app.slug} app={app} /> :
+              <AppCard key={app.slug} app={app} icon={app.icon ? app.icon : null}/> :
               null
           )}
         </ul>

src/dashboard/Apps/AppsIndex.scss

@@ -124,7 +124,7 @@
   height: 56px;
   margin-top: 9px;
   margin-right: 15px;
-  border-radius: 5px;
+  border-radius: 10px;
   overflow: hidden;
 }
 

src/lib/ParseApp.js

@@ -38,6 +38,7 @@ export default class ParseApp {
     serverURL,
     serverInfo,
     production,
+    iconName,
     ...params,
   }) {
     this.name = appName;
@@ -58,6 +59,7 @@ export default class ParseApp {
     this.production = production;
     this.serverURL = serverURL;
     this.serverInfo = serverInfo;
+    this.icon = iconName;
 
     this.settings = {
       fields: {},