Merge pull request #262 from pawelmalak/feature

Version 2.2.0

.docker/Dockerfile

@@ -1,4 +1,4 @@
-FROM node:14 as builder
+FROM node:16 as builder
 
 WORKDIR /app
 
@@ -16,7 +16,7 @@ RUN mkdir -p ./public ./data \
     && mv ./client/build/* ./public \
     && rm -rf ./client
 
-FROM node:14-alpine
+FROM node:16-alpine
 
 COPY --from=builder /app /app
 

.docker/Dockerfile.multiarch

@@ -1,10 +1,10 @@
-FROM node:14-alpine3.11 as builder
+FROM node:16-alpine3.11 as builder
 
 WORKDIR /app
 
 COPY package*.json ./
 
-RUN apk --no-cache --virtual build-dependencies add python make g++ \
+RUN apk --no-cache --virtual build-dependencies add python python3 make g++ \
     && npm install --production
 
 COPY . .    
@@ -17,7 +17,7 @@ RUN mkdir -p ./public ./data \
     && mv ./client/build/* ./public \
     && rm -rf ./client
 
-FROM node:14-alpine3.11
+FROM node:16-alpine3.11
 
 COPY --from=builder /app /app
 

.docker/docker-compose.yml

@@ -1,12 +1,22 @@
-version: '3'
+version: '3.6'
+
 services:
   flame:
     image: pawelmalak/flame
     container_name: flame
     volumes:
-      - /path/to/data:/app/data
+      - /path/to/host/data:/app/data
+      # - /var/run/docker.sock:/var/run/docker.sock # optional but required for Docker integration
     ports:
       - 5005:5005
+    # secrets:
+    #   - password # optional but required for (1)
     environment:
       - PASSWORD=flame_password
+      # - PASSWORD_FILE=/run/secrets/password # optional but required for (1)
     restart: unless-stopped
+    
+# optional but required for Docker secrets (1)
+# secrets:
+#   password:
+#     file: /path/to/secrets/password

.dockerignore

@@ -2,4 +2,5 @@ node_modules
 .github
 public
 k8s
-skaffold.yaml
+skaffold.yaml
+data

.env

@@ -1,5 +1,5 @@
 PORT=5005
 NODE_ENV=development
-VERSION=2.1.0
+VERSION=2.2.0
 PASSWORD=flame_password
 SECRET=e02eb43d69953658c6d07311d6313f2d4467672cb881f96b29368ba1f3f4da4b

.prettierignore

@@ -1 +1,2 @@
-*.md
+*.md
+docker-compose.yml

CHANGELOG.md

@@ -1,3 +1,11 @@
+### v2.2.0 (2021-12-17)
+- Added option to set custom description for apps ([#201](https://github.com/pawelmalak/flame/issues/201))
+- Fixed fatal error while deploying Flame to cluster ([#242](https://github.com/pawelmalak/flame/issues/242))
+
+### 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))
+
 ### v2.1.0 (2021-11-26)
 - Added option to set custom order for bookmarks ([#43](https://github.com/pawelmalak/flame/issues/43)) and ([#187](https://github.com/pawelmalak/flame/issues/187))
 - Added support for .ico files for custom icons ([#209](https://github.com/pawelmalak/flame/issues/209))

README.md

@@ -35,7 +35,7 @@ docker pull pawelmalak/flame:2.0.0
 
 ```sh
 # run container
-docker run -p 5005:5005 -v /path/to/data:/app/data -e PASSWORD=flame_password flame
+docker run -p 5005:5005 -v /path/to/data:/app/data -e PASSWORD=flame_password pawelmalak/flame
 ```
 
 #### Building images
@@ -55,19 +55,42 @@ docker buildx build \
 #### Docker-Compose
 
 ```yaml
-version: '2.1'
+version: '3.6'
+
 services:
   flame:
-    image: pawelmalak/flame:latest
+    image: pawelmalak/flame
     container_name: flame
     volumes:
-      - <host_dir>:/app/data
+      - /path/to/host/data:/app/data
-      - /var/run/docker.sock:/var/run/docker.sock # optional but required for Docker integration feature
+      - /var/run/docker.sock:/var/run/docker.sock # optional but required for Docker integration
     ports:
       - 5005:5005
+    secrets:
+      - password # optional but required for (1)
     environment:
       - PASSWORD=flame_password
+      - PASSWORD_FILE=/run/secrets/password # optional but required for (1)
     restart: unless-stopped
+
+# optional but required for Docker secrets (1)
+secrets:
+  password:
+    file: /path/to/secrets/password
+```
+
+##### Docker Secrets
+
+All environment variables can be overwritten by appending `_FILE` to the variable value. For example, you can use `PASSWORD_FILE` to pass through a docker secret instead of `PASSWORD`. If both `PASSWORD` and `PASSWORD_FILE` are set, the docker secret will take precedent.
+
+```bash
+# ./secrets/flame_password
+my_custom_secret_password_123
+
+# ./docker-compose.yml
+secrets:
+  password:
+    file: ./secrets/flame_password
 ```
 
 #### Skaffold
@@ -212,7 +235,7 @@ metadata:
 - Backup your `db.sqlite` before running script!
 - Known Issues:
   - generated icons are sometimes incorrect
-  
+
 ```bash
 pip3 install Pillow, beautifulsoup4
 

client/.env

@@ -1 +1 @@
-REACT_APP_VERSION=2.1.0
+REACT_APP_VERSION=2.2.0

client/package.json

@@ -11,7 +11,6 @@
     "@types/jest": "^27.0.2",
     "@types/node": "^16.11.6",
     "@types/react": "^17.0.34",
-    "@types/react-autosuggest": "^10.1.5",
     "@types/react-beautiful-dnd": "^13.1.2",
     "@types/react-dom": "^17.0.11",
     "@types/react-redux": "^7.1.20",
@@ -21,7 +20,6 @@
     "http-proxy-middleware": "^2.0.1",
     "jwt-decode": "^3.1.2",
     "react": "^17.0.2",
-    "react-autosuggest": "^10.1.0",
     "react-beautiful-dnd": "^13.1.0",
     "react-dom": "^17.0.2",
     "react-redux": "^7.2.6",

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/components/Apps/AppTable/AppTable.module.css

@@ -1,29 +0,0 @@
-.TableActions {
-  display: flex;
-  align-items: center;
-}
-
-.TableAction {
-  width: 22px;
-}
-
-.TableAction:hover {
-  cursor: pointer;
-}
-
-.Message {
-  width: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: baseline;
-  color: var(--color-primary);
-  margin-bottom: 20px;
-}
-
-.Message a {
-  color: var(--color-accent);
-}
-
-.Message a:hover {
-  cursor: pointer;
-}

client/src/components/Apps/AppTable/AppTable.tsx

@@ -17,8 +17,7 @@ import { actionCreators } from '../../../store';
 import { App } from '../../../interfaces';
 
 // Other
-import classes from './AppTable.module.css';
+import { Message, Table } from '../../UI';
-import { Table } from '../../UI';
 import { TableActions } from '../../Actions/TableActions';
 
 interface Props {
@@ -89,7 +88,7 @@ export const AppTable = (props: Props): JSX.Element => {
 
   return (
     <Fragment>
-      <div className={classes.Message}>
+      <Message isPrimary={false}>
         {config.useOrdering === 'orderId' ? (
           <p>You can drag and drop single rows to reorder application</p>
         ) : (
@@ -98,7 +97,7 @@ export const AppTable = (props: Props): JSX.Element => {
             <Link to="/settings/interface">settings</Link>
           </p>
         )}
-      </div>
+      </Message>
 
       <DragDropContext onDragEnd={dragEndHanlder}>
         <Droppable droppableId="apps">

client/src/components/Bookmarks/BookmarkCard/BookmarkCard.tsx

@@ -22,7 +22,10 @@ interface Props {
 export const BookmarkCard = (props: Props): JSX.Element => {
   const { category, fromHomepage = false } = props;
 
-  const { config } = useSelector((state: State) => state.config);
+  const {
+    config: { config },
+    auth: { isAuthenticated },
+  } = useSelector((state: State) => state);
 
   const dispatch = useDispatch();
   const { setEditCategory } = bindActionCreators(actionCreators, dispatch);
@@ -30,9 +33,11 @@ export const BookmarkCard = (props: Props): JSX.Element => {
   return (
     <div className={classes.BookmarkCard}>
       <h3
-        className={fromHomepage ? '' : classes.BookmarkHeader}
+        className={
+          fromHomepage || !isAuthenticated ? '' : classes.BookmarkHeader
+        }
         onClick={() => {
-          if (!fromHomepage) {
+          if (!fromHomepage && isAuthenticated) {
             setEditCategory(category);
           }
         }}

client/src/components/Bookmarks/Bookmarks.tsx

@@ -14,7 +14,14 @@ import { Category, Bookmark } from '../../interfaces';
 import classes from './Bookmarks.module.css';
 
 // UI
-import { Container, Headline, ActionButton, Spinner, Modal } from '../UI';
+import {
+  Container,
+  Headline,
+  ActionButton,
+  Spinner,
+  Modal,
+  Message,
+} from '../UI';
 
 // Components
 import { BookmarkGrid } from './BookmarkGrid/BookmarkGrid';
@@ -121,6 +128,11 @@ export const Bookmarks = (props: Props): JSX.Element => {
     }
   };
 
+  const finishEditing = () => {
+    setShowTable(false);
+    setEditCategory(null);
+  };
+
   return (
     <Container>
       <Modal isOpen={modalIsOpen} setIsOpen={toggleModal}>
@@ -150,14 +162,24 @@ export const Bookmarks = (props: Props): JSX.Element => {
             icon="mdiPencil"
             handler={() => showTableForEditing(ContentType.category)}
           />
-          <ActionButton
+          {showTable && tableContentType === ContentType.bookmark && (
-            name="Edit Bookmarks"
+            <ActionButton
-            icon="mdiPencil"
+              name="Finish Editing"
-            handler={() => showTableForEditing(ContentType.bookmark)}
+              icon="mdiPencil"
-          />
+              handler={finishEditing}
+            />
+          )}
         </div>
       )}
 
+      {categories.length && isAuthenticated && !showTable ? (
+        <Message isPrimary={false}>
+          Click on category name to edit its bookmarks
+        </Message>
+      ) : (
+        <></>
+      )}
+
       {loading ? (
         <Spinner />
       ) : !showTable ? (

client/src/components/Bookmarks/Table/BookmarksTable.tsx

@@ -15,11 +15,8 @@ import { actionCreators } from '../../../store';
 // Typescript
 import { Bookmark, Category } from '../../../interfaces';
 
-// CSS
-import classes from './Table.module.css';
-
 // UI
-import { Table } from '../../UI';
+import { Message, Table } from '../../UI';
 import { TableActions } from '../../Actions/TableActions';
 import { bookmarkTemplate } from '../../../utility';
 
@@ -108,18 +105,14 @@ export const BookmarksTable = ({ openFormForUpdating }: Props): JSX.Element => {
   return (
     <Fragment>
       {!categoryInEdit ? (
-        <div className={classes.Message}>
+        <Message isPrimary={false}>
-          <p>
+          Switch to grid view and click on the name of category you want to edit
-            Switch to grid view and click on the name of category you want to
+        </Message>
-            edit
-          </p>
-        </div>
       ) : (
-        <div className={classes.Message}>
+        <Message isPrimary={false}>
-          <p>
+          Editing bookmarks from&nbsp;<span>{categoryInEdit.name}</span>
-            Editing bookmarks from <span>{categoryInEdit.name}</span> category
+          &nbsp;category
-          </p>
+        </Message>
-        </div>
       )}
 
       {categoryInEdit && (

client/src/components/Bookmarks/Table/CategoryTable.tsx

@@ -16,11 +16,8 @@ import { actionCreators } from '../../../store';
 // Typescript
 import { Bookmark, Category } from '../../../interfaces';
 
-// CSS
-import classes from './Table.module.css';
-
 // UI
-import { Table } from '../../UI';
+import { Message, Table } from '../../UI';
 import { TableActions } from '../../Actions/TableActions';
 
 interface Props {
@@ -99,7 +96,7 @@ export const CategoryTable = ({ openFormForUpdating }: Props): JSX.Element => {
 
   return (
     <Fragment>
-      <div className={classes.Message}>
+      <Message isPrimary={false}>
         {config.useOrdering === 'orderId' ? (
           <p>You can drag and drop single rows to reorder categories</p>
         ) : (
@@ -108,7 +105,7 @@ export const CategoryTable = ({ openFormForUpdating }: Props): JSX.Element => {
             <Link to="/settings/interface">settings</Link>
           </p>
         )}
-      </div>
+      </Message>
 
       <DragDropContext onDragEnd={dragEndHanlder}>
         <Droppable droppableId="categories">

client/src/components/Bookmarks/Table/Table.module.css

@@ -1,17 +0,0 @@
-.Message {
-  width: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: baseline;
-  color: var(--color-primary);
-  margin-bottom: 20px;
-}
-
-.Message a,
-.Message span {
-  color: var(--color-accent);
-}
-
-.Message a:hover {
-  cursor: pointer;
-}

client/src/components/UI/Text/Message/Message.module.css

@@ -6,3 +6,21 @@
   color: var(--color-accent);
   font-weight: 600;
 }
+
+.messageCenter {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: baseline;
+  color: var(--color-primary);
+  margin-bottom: 20px;
+}
+
+.messageCenter a,
+.messageCenter span {
+  color: var(--color-accent);
+}
+
+.messageCenter a:hover {
+  cursor: pointer;
+}

client/src/components/UI/Text/Message/Message.tsx

@@ -4,8 +4,11 @@ import classes from './Message.module.css';
 
 interface Props {
   children: ReactNode;
+  isPrimary?: boolean;
 }
 
-export const Message = ({ children }: Props): JSX.Element => {
+export const Message = ({ children, isPrimary = true }: Props): JSX.Element => {
-  return <p className={classes.message}>{children}</p>;
+  const style = isPrimary ? classes.message : classes.messageCenter;
+
+  return <p className={style}>{children}</p>;
 };

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,
+};

middleware/errorHandler.js

@@ -1,5 +1,4 @@
 const ErrorResponse = require('../utils/ErrorResponse');
-const colors = require('colors');
 const Logger = require('../utils/Logger');
 const logger = new Logger();
 

models/App.js

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

package.json

@@ -20,8 +20,8 @@
     "@kubernetes/client-node": "^0.15.1",
     "@types/express": "^4.17.13",
     "axios": "^0.24.0",
-    "colors": "^1.4.0",
     "concurrently": "^6.3.0",
+    "docker-secret": "^1.2.4",
     "dotenv": "^10.0.0",
     "express": "^4.17.1",
     "jsonwebtoken": "^8.5.1",

utils/init/index.js

@@ -1,7 +1,9 @@
 const initConfig = require('./initConfig');
 const initFiles = require('./initFiles');
+const initDockerSecrets = require('./initDockerSecrets');
 
 const initApp = async () => {
+  initDockerSecrets();
   await initFiles();
   await initConfig();
 };

utils/init/initDockerSecrets.js

@@ -0,0 +1,21 @@
+const { getSecrets } = require('docker-secret');
+const Logger = require('../Logger');
+const logger = new Logger();
+
+const initDockerSecrets = () => {
+  try {
+    const secrets = getSecrets();
+
+    for (const property in secrets) {
+      const upperProperty = property.toUpperCase();
+
+      process.env[upperProperty] = secrets[property];
+
+      logger.log(`${upperProperty} was overwritten with docker secret value`);
+    }
+  } catch (e) {
+    logger.log(`Failed to initialize docker secrets. Error: ${e}`, 'ERROR');
+  }
+};
+
+module.exports = initDockerSecrets;