Added option to set custom description for apps

CHANGELOG.md

@@ -1,3 +1,6 @@
+### v2.2.0 (TBA)
+- Added option to set custom description for apps ([#201](https://github.com/pawelmalak/flame/issues/201))
+
 ### v2.1.1 (2021-12-02)
 - Added support for Docker secrets ([#189](https://github.com/pawelmalak/flame/issues/189))
 - Changed some messages and buttons to make it easier to open bookmarks editor ([#239](https://github.com/pawelmalak/flame/issues/239))

client/src/components/Apps/AppCard/AppCard.tsx

@@ -8,16 +8,15 @@ import { State } from '../../../store/reducers';
 
 interface Props {
   app: App;
-  pinHandler?: Function;
 }
 
-export const AppCard = (props: Props): JSX.Element => {
+export const AppCard = ({ app }: Props): JSX.Element => {
   const { config } = useSelector((state: State) => state.config);
 
-  const [displayUrl, redirectUrl] = urlParser(props.app.url);
+  const [displayUrl, redirectUrl] = urlParser(app.url);
 
   let iconEl: JSX.Element;
-  const { icon } = props.app;
+  const { icon } = app;
 
   if (isImage(icon)) {
     const source = isUrl(icon) ? icon : `/uploads/${icon}`;
@@ -25,7 +24,7 @@ export const AppCard = (props: Props): JSX.Element => {
     iconEl = (
       <img
         src={source}
-        alt={`${props.app.name} icon`}
+        alt={`${app.name} icon`}
         className={classes.CustomIcon}
       />
     );
@@ -54,8 +53,8 @@ export const AppCard = (props: Props): JSX.Element => {
     >
       <div className={classes.AppCardIcon}>{iconEl}</div>
       <div className={classes.AppCardDetails}>
-        <h5>{props.app.name}</h5>
+        <h5>{app.name}</h5>
-        <span>{displayUrl}</span>
+        <span>{!app.description.length ? displayUrl : app.description}</span>
       </div>
     </a>
   );

client/src/components/Apps/AppForm/AppForm.tsx

@@ -96,7 +96,7 @@ export const AppForm = ({ modalHandler }: Props): JSX.Element => {
     <ModalForm modalHandler={modalHandler} formHandler={formSubmitHandler}>
       {/* NAME */}
       <InputGroup>
-        <label htmlFor="name">App Name</label>
+        <label htmlFor="name">App name</label>
         <input
           type="text"
           name="name"
@@ -122,11 +122,27 @@ export const AppForm = ({ modalHandler }: Props): JSX.Element => {
         />
       </InputGroup>
 
+      {/* DESCRIPTION */}
+      <InputGroup>
+        <label htmlFor="description">App description</label>
+        <input
+          type="text"
+          name="description"
+          id="description"
+          placeholder="My self-hosted app"
+          value={formData.description}
+          onChange={(e) => inputChangeHandler(e)}
+        />
+        <span>
+          Optional - If description is not set, app URL will be displayed
+        </span>
+      </InputGroup>
+
       {/* ICON */}
       {!useCustomIcon ? (
         // use mdi icon
         <InputGroup>
-          <label htmlFor="icon">App Icon</label>
+          <label htmlFor="icon">App icon</label>
           <input
             type="text"
             name="icon"

client/src/interfaces/App.ts

@@ -5,6 +5,7 @@ export interface NewApp {
   url: string;
   icon: string;
   isPublic: boolean;
+  description: string;
 }
 
 export interface App extends Model, NewApp {

client/src/utility/templateObjects/appTemplate.ts

@@ -5,6 +5,7 @@ export const newAppTemplate: NewApp = {
   url: '',
   icon: '',
   isPublic: true,
+  description: '',
 };
 
 export const appTemplate: App = {

db/migrations/05_app-description.js

@@ -0,0 +1,19 @@
+const { DataTypes } = require('sequelize');
+const { STRING } = DataTypes;
+
+const up = async (query) => {
+  await query.addColumn('apps', 'description', {
+    type: STRING,
+    allowNull: false,
+    defaultValue: '',
+  });
+};
+
+const down = async (query) => {
+  await query.removeColumn('apps', 'description');
+};
+
+module.exports = {
+  up,
+  down,
+};

models/App.js

@@ -31,6 +31,11 @@ const App = sequelize.define(
       allowNull: true,
       defaultValue: 1,
     },
+    description: {
+      type: DataTypes.STRING,
+      allowNull: false,
+      defaultValue: '',
+    },
   },
   {
     tableName: 'apps',