add notification for optional plugins in plugin modal

scm-ui/ui-types/src/Plugin.ts

@@ -36,6 +36,7 @@ export type Plugin = {
   pending: boolean;
   markedForUninstall?: boolean;
   dependencies: string[];
+  optionalDependencies: string[];
   _links: Links;
 };
 

scm-ui/ui-webapp/public/locales/de/admin.json

@@ -62,6 +62,7 @@
       "currentVersion": "Installierte Version",
       "newVersion": "Neue Version",
       "dependencyNotification": "Mit diesem Plugin werden folgende Abhängigkeiten mit installiert bzw. aktualisiert, wenn sie noch nicht in der aktuellen Version vorhanden sind!",
+      "optionalDependencyNotification": "Mit diesem Plugin werden folgende optionale Abhängigkeiten mit aktualisiert, falls sie installiert sind!",
       "dependencies": "Abhängigkeiten",
       "installedNotification": "Das Plugin wurde erfolgreich installiert. Um Änderungen an der UI zu sehen, muss die Seite neu geladen werden:",
       "updatedNotification": "Das Plugin wurde erfolgreich aktualisiert. Um Änderungen an der UI zu sehen, muss die Seite neu geladen werden:",

scm-ui/ui-webapp/public/locales/en/admin.json

@@ -62,6 +62,7 @@
       "currentVersion": "Installed version",
       "newVersion": "New version",
       "dependencyNotification": "With this plugin, the following dependencies will be installed/updated if their latest versions are not installed yet!",
+      "optionalDependencyNotification": "With this plugin, the following optional dependencies will be updated if they are installed!",
       "dependencies": "Dependencies",
       "installedNotification": "Successfully installed plugin. You have to reload the page, to see ui changes:",
       "updatedNotification": "Successfully updated plugin. You have to reload the page, to see ui changes:",

scm-ui/ui-webapp/src/admin/plugins/components/PluginModal.tsx

@@ -183,6 +183,27 @@ class PluginModal extends React.Component<Props, State> {
     return dependencies;
   }
 
+  renderOptionalDependencies() {
+    const { plugin, t } = this.props;
+
+    let optionalDependencies = null;
+    if (plugin.optionalDependencies && plugin.optionalDependencies.length > 0) {
+      optionalDependencies = (
+        <div className="media">
+          <Notification type="warning">
+            <strong>{t("plugins.modal.optionalDependencyNotification")}</strong>
+            <ul>
+              {plugin.optionalDependencies.map((optionalDependency, index) => {
+                return <li key={index}>{optionalDependency}</li>;
+              })}
+            </ul>
+          </Notification>
+        </div>
+      );
+    }
+    return optionalDependencies;
+  }
+
   renderNotifications = () => {
     const { t, pluginAction } = this.props;
     const { restart, error, success } = this.state;
@@ -275,6 +296,7 @@ class PluginModal extends React.Component<Props, State> {
               </div>
             )}
             {this.renderDependencies()}
+            {this.renderOptionalDependencies()}
           </div>
         </div>
         <div className="media">