Add deprecation warning message on plugins page for elastic agent plu…

…gins not supporting cluster profiles.
GaneshSPatil · Apr 22, 2019 · 48a1b8b · 48a1b8b
1 parent 65f401c
commit 48a1b8b
Show file tree

Hide file tree

Showing 7 changed files with 237 additions and 36 deletions.
diff --git a/server/webapp/WEB-INF/rails/webpack/views/components/collapsible_panel/index.scss b/server/webapp/WEB-INF/rails/webpack/views/components/collapsible_panel/index.scss
@@ -35,6 +35,10 @@ $collapsible-header-height: 50px;
   &.error {
     border-top: 1px solid $failed;
   }
+
+  &.warning {
+    border-top: 1px solid darken($warning, 30%);
+  }
 }
 
 .collapse-header {

diff --git a/server/webapp/WEB-INF/rails/webpack/views/components/collapsible_panel/index.scss.d.ts b/server/webapp/WEB-INF/rails/webpack/views/components/collapsible_panel/index.scss.d.ts
@@ -3,6 +3,7 @@
 export const collapse: string;
 export const expanded: string;
 export const error: string;
+export const warning: string;
 export const collapseHeader: string;
 export const headerDetails: string;
 export const actions: string;

diff --git a/server/webapp/WEB-INF/rails/webpack/views/components/collapsible_panel/index.tsx b/server/webapp/WEB-INF/rails/webpack/views/components/collapsible_panel/index.tsx
@@ -30,6 +30,7 @@ export interface Attrs<Header, Actions> {
   actions?: AttributeType | AttributeType[];
   header: AttributeType | string;
   error?: boolean;
+  warning?: boolean;
   expanded?: boolean;
 }
 
@@ -49,7 +50,8 @@ export class CollapsiblePanel<Header, Actions> extends MithrilComponent<Attrs<He
   view(vnode: m.Vnode<Attrs<Header, Actions>, State>) {
     const collapsibleClasses = classnames({
       [styles.expanded]: vnode.state.expanded(),
-      [styles.error]: vnode.attrs.error
+      [styles.error]: vnode.attrs.error,
+      [styles.warning]: vnode.attrs.warning
     });
     let actions;
     if (vnode.attrs.actions) {
@@ -64,6 +66,7 @@ export class CollapsiblePanel<Header, Actions> extends MithrilComponent<Attrs<He
       <div data-test-id={vnode.attrs.dataTestId}
            data-test-element-state={expandCollapseState}
            data-test-has-error={vnode.attrs.error}
+           data-test-has-warning={vnode.attrs.warning}
            class={classnames(styles.collapse, collapsibleClasses)}>
         <div class={classnames(styles.collapseHeader, collapsibleClasses)}
              data-test-id="collapse-header"

diff --git a/server/webapp/WEB-INF/rails/webpack/views/pages/new_plugins/index.scss b/server/webapp/WEB-INF/rails/webpack/views/pages/new_plugins/index.scss
@@ -26,11 +26,13 @@ $collapse-icon-size: 25px;
   display:        none;
   vertical-align: middle;
   margin:         0 15px 0 -15px;
+
   img {
     width:          $collapse-icon-size;
     height:         $collapse-icon-size;
     vertical-align: middle;
   }
+
   @media (min-width: $screen-md) {
     display:     flex;
     align-items: center;
@@ -67,3 +69,54 @@ $collapse-icon-size: 25px;
 .spinner-wrapper {
   @include spinner-for-modal;
 }
+
+.deprecation-warning-tooltip-wrapper {
+  position: static;
+  display:  inline-block;
+
+  &:hover {
+    .deprecation-warning-tooltip-content {
+      display: block;
+    }
+  }
+}
+
+.deprecation-warning-icon {
+  @include icon-before($type: $fa-var-info-circle, $color: darken($warning, 30%));
+
+  &:before {
+    font-size: 20px;
+    padding:   2px;
+  }
+}
+
+.deprecation-warning-tooltip-content {
+  display:       none;
+  background:    $white;
+  line-height:   18px;
+  font-size:     12px;
+  position:      absolute;
+  margin-left:   -8px;
+  margin-top:    3px;
+  font-weight:   400;
+  border-radius: $global-border-radius;
+  padding:       10px 20px 0;
+  box-shadow:    0 2px 4px $box-shadow-color;
+  z-index:       map_get($zindex, submenu);
+
+  &:before {
+    content:          "";
+    position:         absolute;
+    width:            0;
+    height:           0;
+    margin-left:      -0.5em;
+    top:              0;
+    left:             17px;
+    box-sizing:       border-box;
+    border:           6px solid $black;
+    border-color:     $white $white transparent transparent;
+    transform-origin: 0 0;
+    transform:        rotate(-45deg);
+    box-shadow:       1px -1px 1px 0 $box-shadow-color;
+  }
+}
diff --git a/server/webapp/WEB-INF/rails/webpack/views/pages/new_plugins/index.scss.d.ts b/server/webapp/WEB-INF/rails/webpack/views/pages/new_plugins/index.scss.d.ts
@@ -8,3 +8,6 @@ export const pluginsPage: string;
 export const keyValuePairInline: string;
 export const pluginsList: string;
 export const spinnerWrapper: string;
+export const deprecationWarningTooltipWrapper: string;
+export const deprecationWarningTooltipContent: string;
+export const deprecationWarningIcon: string;
diff --git a/server/webapp/WEB-INF/rails/webpack/views/pages/new_plugins/plugin_widget.tsx b/server/webapp/WEB-INF/rails/webpack/views/pages/new_plugins/plugin_widget.tsx
@@ -14,16 +14,20 @@
  * limitations under the License.
  */
 
+import {docsUrl} from "gen/gocd_version";
 import * as Routes from "gen/ts-routes";
 import {MithrilViewComponent} from "jsx/mithril-component";
 import * as m from "mithril";
+import {ExtensionType} from "models/shared/plugin_infos_new/extension_type";
+import {ElasticAgentSettings, Extension} from "models/shared/plugin_infos_new/extensions";
 import {PluginInfo} from "models/shared/plugin_infos_new/plugin_info";
-import {ButtonIcon} from "views/components/buttons";
 import * as Buttons from "views/components/buttons";
+import {ButtonIcon} from "views/components/buttons";
 import {CollapsiblePanel} from "views/components/collapsible_panel";
 import {HeaderIcon} from "views/components/header_icon";
 import * as Icons from "views/components/icons";
 import {KeyValuePair, KeyValueTitle} from "views/components/key_value_pair";
+import * as styles from "./index.scss";
 
 interface PluginHeaderAttrs {
   image: m.Children;
@@ -35,8 +39,8 @@ interface PluginHeaderAttrs {
 class PluginHeaderWidget extends MithrilViewComponent<PluginHeaderAttrs> {
   view(vnode: m.Vnode<PluginHeaderAttrs>) {
     const data = new Map([
-      ["Version", vnode.attrs.pluginVersion],
-    ]);
+                           ["Version", vnode.attrs.pluginVersion],
+                         ]);
     return [
       (
         <KeyValueTitle image={vnode.attrs.image} titleTestId="plugin-name" title={vnode.attrs.pluginName}/>
@@ -63,6 +67,7 @@ export class PluginWidget extends MithrilViewComponent<Attrs> {
 
     let statusReportButton: OptionalElement;
     let settingsButton: OptionalElement;
+    let deprecationWarningButton: OptionalElement;
 
     if (pluginInfo.supportsStatusReport()) {
       const statusReportPath: string = Routes.adminStatusReportPath(pluginInfo.id);
@@ -82,15 +87,20 @@ export class PluginWidget extends MithrilViewComponent<Attrs> {
                                        onclick={vnode.attrs.onEdit.bind(vnode.attrs)}/>;
     }
 
+    if (this.deprecatedPluginInfo(pluginInfo)) {
+      const content            = <p>Version {pluginInfo.about.version} of plugin is deprecated as it does not support <a onclick={(e) => this.goToClusterProfileDocs(e)} href={"#"}>ClusterProfiles</a>. This version of plugin will stop working in upcoming release of GoCD, update to latest version of the plugin.</p>;
+      deprecationWarningButton = <PluginDeprecationWarning content={content}/>;
+    }
+
     let pluginData = new Map<string, string | m.Children>([
-      ["Id", pluginInfo.id],
-      ["Description", pluginInfo.about.description],
-      ["Author", this.getAuthorInfo(pluginInfo)],
-      ["Supported operating systems", pluginInfo.about.targetOperatingSystemsDisplayValue()],
-      ["Plugin file location", pluginInfo.pluginFileLocation],
-      ["Bundled", pluginInfo.bundledPlugin ? "Yes" : "No"],
-      ["Target GoCD Version", pluginInfo.about.targetGoVersion],
-    ]);
+                                                            ["Id", pluginInfo.id],
+                                                            ["Description", pluginInfo.about.description],
+                                                            ["Author", this.getAuthorInfo(pluginInfo)],
+                                                            ["Supported operating systems", pluginInfo.about.targetOperatingSystemsDisplayValue()],
+                                                            ["Plugin file location", pluginInfo.pluginFileLocation],
+                                                            ["Bundled", pluginInfo.bundledPlugin ? "Yes" : "No"],
+                                                            ["Target GoCD Version", pluginInfo.about.targetGoVersion],
+                                                          ]);
     if (pluginInfo.hasErrors()) {
       pluginData = pluginData.set("There were errors loading the plugin", pluginInfo.getErrors());
     }
@@ -101,8 +111,9 @@ export class PluginWidget extends MithrilViewComponent<Attrs> {
                                                     pluginName={pluginInfo.about.name}
                                                     pluginVersion={pluginInfo.about.version}
                                                     pluginId={pluginInfo.id}/>}
-                        actions={[statusReportButton, settingsButton]}
+                        actions={[deprecationWarningButton, statusReportButton, settingsButton]}
                         error={pluginInfo.hasErrors()}
+                        warning={this.hasWarnings(pluginInfo)}
                         expanded={pluginInfo.status.isInvalid()}>
         <KeyValuePair data={pluginData}/>
       </CollapsiblePanel>
@@ -121,4 +132,34 @@ export class PluginWidget extends MithrilViewComponent<Attrs> {
     event.stopPropagation();
     window.location.href = statusReportHref;
   }
+
+  private deprecatedPluginInfo(pluginInfo: PluginInfo<Extension>) {
+    const elasticAgentExtension = pluginInfo.extensionOfType(ExtensionType.ELASTIC_AGENTS) as ElasticAgentSettings;
+    return elasticAgentExtension && !elasticAgentExtension.supportsClusterProfiles;
+  }
+
+  private goToClusterProfileDocs(event: Event): void {
+    event.stopPropagation();
+    window.open(docsUrl("configuration/elastic_agents.html"), "_blank");
+  }
+
+  private hasWarnings(pluginInfo: PluginInfo<Extension>): boolean {
+    return this.deprecatedPluginInfo(pluginInfo);
+  }
+}
+
+interface PluginDeprecationWarningAttrs {
+  content: m.Children;
+}
+
+class PluginDeprecationWarning extends MithrilViewComponent<PluginDeprecationWarningAttrs> {
+  view(vnode: m.Vnode<PluginDeprecationWarningAttrs>) {
+    return (
+      <div data-test-id="deprecation-warning-tooltip-wrapper" className={styles.deprecationWarningTooltipWrapper}>
+        <i data-test-id={"deprecation-warning-icon"} className={styles.deprecationWarningIcon}/>
+        <div data-test-id="deprecation-warning-tooltip-content" className={styles.deprecationWarningTooltipContent}>
+          {vnode.attrs.content}
+        </div>
+      </div>);
+  }
 }