diff --git a/server/webapp/WEB-INF/rails/webpack/views/components/buttons/index.scss b/server/webapp/WEB-INF/rails/webpack/views/components/buttons/index.scss index a11255c8860..55b3c25f08d 100644 --- a/server/webapp/WEB-INF/rails/webpack/views/components/buttons/index.scss +++ b/server/webapp/WEB-INF/rails/webpack/views/components/buttons/index.scss @@ -72,7 +72,11 @@ } .icon-add { - border: 10px solid $secondary-bg; + @include icon-before($type: $fa-var-plus); + + &:before { + margin: 5px 10px 5px -5px; + } } .icon-doc { diff --git a/server/webapp/WEB-INF/rails/webpack/views/components/key_value_pair/index.scss b/server/webapp/WEB-INF/rails/webpack/views/components/key_value_pair/index.scss index 3dd43f6ea97..77c1345cb3a 100644 --- a/server/webapp/WEB-INF/rails/webpack/views/components/key_value_pair/index.scss +++ b/server/webapp/WEB-INF/rails/webpack/views/components/key_value_pair/index.scss @@ -76,7 +76,7 @@ $title-element-width: 360px; .key-value-item { display: flex; - padding: 5px; + padding: 5px 5px 5px 0; border-bottom: 1px dashed $border-color; align-content: center; flex-direction: column; diff --git a/server/webapp/WEB-INF/rails/webpack/views/pages/elastic_profiles/cluster_profile_widget.tsx b/server/webapp/WEB-INF/rails/webpack/views/pages/elastic_profiles/cluster_profile_widget.tsx new file mode 100644 index 00000000000..34a44e67a4a --- /dev/null +++ b/server/webapp/WEB-INF/rails/webpack/views/pages/elastic_profiles/cluster_profile_widget.tsx @@ -0,0 +1,178 @@ +/* + * Copyright 2019 ThoughtWorks, Inc. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import {bind} from "classnames/bind"; +import * as Routes from "gen/ts-routes"; +import {MithrilComponent} from "jsx/mithril-component"; +import * as _ from "lodash"; +import * as m from "mithril"; +import {Stream} from "mithril/stream"; +import * as stream from "mithril/stream"; +import {ClusterProfile, ElasticAgentProfile, ElasticAgentProfiles} from "models/elastic_profiles/types"; +import {Configurations} from "models/shared/configuration"; +import {ExtensionType} from "models/shared/plugin_infos_new/extension_type"; +import {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 {CollapsiblePanel} from "views/components/collapsible_panel"; +import {HeaderIcon} from "views/components/header_icon"; +import * as Icons from "views/components/icons"; +import {IconGroup} from "views/components/icons"; +import {KeyValuePair, KeyValueTitle} from "views/components/key_value_pair"; +import {Attrs as ElasticProfilesWidgetAttrs, ElasticProfilesWidget} from "views/pages/elastic_profiles/elastic_profiles_widget"; +import {AddOperation, CloneOperation, DeleteOperation, EditOperation} from "views/pages/page_operations"; +import * as styles from ".//index.scss"; + +const classnames = bind(styles); +export type ClusterProfileOperations = EditOperation & DeleteOperation & AddOperation & CloneOperation; + +export interface Attrs extends ElasticProfilesWidgetAttrs { + pluginInfos: Stream>>; + elasticProfiles: ElasticAgentProfiles; + isUserAnAdmin: boolean; + clusterProfileOperations: ClusterProfileOperations; +} + +interface ClusterProfileAttrs { + clusterProfile: ClusterProfile; +} + +interface State { + clusterProfileDetailsExpanded: Stream; +} + +type ClusterProfileWidgetAttrs = Attrs & ClusterProfileAttrs; + +interface HeaderAttrs { + clusterProfileId: string; + pluginName: string; + image: m.Children; +} + +class ClusterProfileHeaderWidget extends MithrilComponent { + view(vnode: m.Vnode) { + const title =
{vnode.attrs.clusterProfileId}
; + + return [ + , + + ]; + } +} + +export class ClusterProfileWidget extends MithrilComponent { + oninit(vnode: m.Vnode) { + vnode.state.clusterProfileDetailsExpanded = stream(false); + } + + view(vnode: m.Vnode) { + const filteredElasticAgentProfiles = vnode.attrs.elasticProfiles.filterByClusterProfile(vnode.attrs.clusterProfile.id()); + const pluginInfo = this.pluginInfo(vnode); + const pluginImageTag = ClusterProfileWidget.createImageTag(pluginInfo); + const pluginName = pluginInfo ? pluginInfo.about.name : ""; + return } + actions={this.getActionButtons(vnode)} + dataTestId={"cluster-profile-panel"}> + {this.getClusterProfileDetails(vnode)} +

Elastic Agent Profiles

+ + ; + } + + private static supportsClusterStatusReport(pluginInfo: PluginInfo | undefined) { + if (pluginInfo && pluginInfo.extensionOfType(ExtensionType.ELASTIC_AGENTS)) { + const extension = pluginInfo.extensionOfType(ExtensionType.ELASTIC_AGENTS); + return extension && extension.capabilities && extension.capabilities.supportsClusterStatusReport; + } + return false; + } + + private static createImageTag(pluginInfo: PluginInfo | undefined) { + if (pluginInfo && pluginInfo.imageUrl) { + return ; + } + return ; + } + + private goToStatusReportPage(statusReportHref: string, event: Event): void { + event.stopPropagation(); + window.location.href = statusReportHref; + } + + private getActionButtons(vnode: m.Vnode) { + const actionButtons = []; + const pluginInfo = this.pluginInfo(vnode); + if (pluginInfo != null && ClusterProfileWidget.supportsClusterStatusReport(pluginInfo)) { + const statusReportPath: string = Routes.adminClusterStatusReportPath(vnode.attrs.clusterProfile.pluginId(), vnode.attrs.clusterProfile.id()); + + actionButtons.push( + + Status Report + ); + } + + actionButtons.push( + { + vnode.attrs.elasticAgentOperations.onAdd(new ElasticAgentProfile("", vnode.attrs.clusterProfile.pluginId(), vnode.attrs.clusterProfile.id(), new Configurations([])), e); + }} data-test-id={"new-elastic-agent-profile-button"} disabled={!pluginInfo} icon={ButtonIcon.ADD}> + Elastic Agent Profile + ); + + actionButtons.push(
+ + + + + +
); + + return actionButtons; + } + + private toggle(vnode: m.Vnode) { + vnode.state.clusterProfileDetailsExpanded(!vnode.state.clusterProfileDetailsExpanded()); + } + + private getClusterProfileDetails(vnode: m.Vnode) { + const clusterProfileProperties = vnode.attrs.clusterProfile.properties() ? vnode.attrs.clusterProfile.properties().asMap() : []; + const clusterProfileDetails = new Map([ + ["Id", vnode.attrs.clusterProfile.id()], + ["PluginId", vnode.attrs.clusterProfile.pluginId()], + ...Array.from(clusterProfileProperties) + ]); + return ( +
+
Cluster configuration
+
+ +
+
+ ); + } + + private pluginInfo(vnode: m.Vnode) { + return _.find(vnode.attrs.pluginInfos(), ["id", vnode.attrs.clusterProfile.pluginId()]); + } +} diff --git a/server/webapp/WEB-INF/rails/webpack/views/pages/elastic_profiles/cluster_profiles_modals.tsx b/server/webapp/WEB-INF/rails/webpack/views/pages/elastic_profiles/cluster_profiles_modals.tsx index fae0e210c8d..2dc57d0cf53 100644 --- a/server/webapp/WEB-INF/rails/webpack/views/pages/elastic_profiles/cluster_profiles_modals.tsx +++ b/server/webapp/WEB-INF/rails/webpack/views/pages/elastic_profiles/cluster_profiles_modals.tsx @@ -106,7 +106,8 @@ export abstract class BaseClusterProfileModal extends Modal { return {id: pluginInfo.id, text: pluginInfo.about.name}; }); - this.elasticAgentPluginInfo(this.pluginInfo() || this.pluginInfos[0]); + const extensionPluginInfo = this.pluginInfo(); + this.elasticAgentPluginInfo(extensionPluginInfo || this.pluginInfos[0]); const elasticAgentSettings = this.elasticAgentPluginInfo().extensionOfType(ExtensionType.ELASTIC_AGENTS) as ElasticAgentSettings; @@ -117,7 +118,12 @@ export abstract class BaseClusterProfileModal extends Modal { configuration={this.clusterProfile().properties()} key={this.elasticAgentPluginInfo().id}/>; } else { - alertMessage = ; + const pluginName = extensionPluginInfo ? extensionPluginInfo.about.name : ""; + if (this.modalType === ModalType.create) { + alertMessage = ; + } else { + alertMessage = ; + } } return ( @@ -239,6 +245,7 @@ export class EditClusterProfileModal extends BaseClusterProfileModal { this.close(); }, (errorResponse) => { + this.onError(errorResponse.message); this.showErrors(result, errorResponse); } ); @@ -280,6 +287,7 @@ export class CloneClusterProfileModal extends BaseClusterProfileModal { this.close(); }, (errorResponse) => { + this.onError(errorResponse.message); this.showErrors(result, errorResponse); } ); diff --git a/server/webapp/WEB-INF/rails/webpack/views/pages/elastic_profiles/cluster_profiles_widget.tsx b/server/webapp/WEB-INF/rails/webpack/views/pages/elastic_profiles/cluster_profiles_widget.tsx index a24bf6ae5b6..2356b09d50d 100644 --- a/server/webapp/WEB-INF/rails/webpack/views/pages/elastic_profiles/cluster_profiles_widget.tsx +++ b/server/webapp/WEB-INF/rails/webpack/views/pages/elastic_profiles/cluster_profiles_widget.tsx @@ -13,58 +13,25 @@ * See the License for the specific language governing permissions and * limitations under the License. */ - -import * as Routes from "gen/ts-routes"; import {MithrilComponent} from "jsx/mithril-component"; -import * as _ from "lodash"; import * as m from "mithril"; import {Stream} from "mithril/stream"; -import {ClusterProfile, ClusterProfiles, ElasticAgentProfile, ElasticAgentProfiles} from "models/elastic_profiles/types"; -import {Configurations} from "models/shared/configuration"; -import {ExtensionType} from "models/shared/plugin_infos_new/extension_type"; +import {ClusterProfiles} from "models/elastic_profiles/types"; import {Extension} from "models/shared/plugin_infos_new/extensions"; import {PluginInfo} from "models/shared/plugin_infos_new/plugin_info"; -import * as Buttons from "views/components/buttons"; -import {CollapsiblePanel} from "views/components/collapsible_panel"; import {FlashMessage, MessageType} from "views/components/flash_message"; -import {HeaderIcon} from "views/components/header_icon"; -import * as Icons from "views/components/icons"; -import {IconGroup} from "views/components/icons"; -import {KeyValuePair, KeyValueTitle} from "views/components/key_value_pair"; -import {Attrs as ElasticProfilesWidgetAttrs, ElasticProfilesWidget} from "views/pages/elastic_profiles/elastic_profiles_widget"; -import * as styles from "views/pages/elastic_profiles/index.scss"; -import {AddOperation, CloneOperation, DeleteOperation, EditOperation} from "views/pages/page_operations"; - -export type ClusterProfileOperations = EditOperation & DeleteOperation & AddOperation & CloneOperation; +import {ClusterProfileWidget} from "views/pages/elastic_profiles/cluster_profile_widget"; +import {Attrs as ClusterProfileWidgetAttrs} from "views/pages/elastic_profiles/cluster_profile_widget"; interface Attrs { pluginInfos: Stream>>; - elasticProfiles: ElasticAgentProfiles; clusterProfiles: ClusterProfiles; - isUserAnAdmin: boolean; - clusterProfileOperations: ClusterProfileOperations; -} - -export type ClusterProfilesWidgetAttrs = Attrs & ElasticProfilesWidgetAttrs; - -interface HeaderAttrs { - clusterProfileId: string; - pluginId: string; - image: m.Children; } -class ClusterProfilesHeaderWidget extends MithrilComponent { - view(vnode: m.Vnode) { - const title =
{vnode.attrs.clusterProfileId}
; - - return [ - , - - ]; - } -} +export type ClusterProfilesWidgetAttrs = Attrs & ClusterProfileWidgetAttrs; export class ClusterProfilesWidget extends MithrilComponent { + view(vnode: m.Vnode) { let noPluginInstalledMessage; @@ -82,21 +49,7 @@ export class ClusterProfilesWidget extends MithrilComponent { vnode.attrs.clusterProfiles.all().map((clusterProfile) => { - const filteredElasticAgentProfiles = vnode.attrs.elasticProfiles.filterByClusterProfile(clusterProfile.id()); - const pluginInfo = ClusterProfilesWidget.findPluginInfoByPluginId(vnode.attrs.pluginInfos(), clusterProfile.pluginId()); - const pluginImageTag = ClusterProfilesWidget.createImageTag(pluginInfo); - - return } - actions={this.getActionButtons(vnode, clusterProfile, pluginInfo)} - dataTestId={"cluster-profile-panel"}> - {this.getClusterProfileDetails(clusterProfile)} - - ; + return ; }) } @@ -111,74 +64,4 @@ export class ClusterProfilesWidget extends MithrilComponent) { return vnode.attrs.clusterProfiles == null || vnode.attrs.clusterProfiles.all().length === 0; } - - private static createImageTag(pluginInfo: PluginInfo | undefined) { - if (pluginInfo && pluginInfo.imageUrl) { - return ; - } - return ; - } - - private static findPluginInfoByPluginId(pluginInfos: Array>, pluginId: string) { - return _.find(pluginInfos, ["id", pluginId]); - } - - private static supportsClusterStatusReport(pluginInfo: PluginInfo | undefined) { - if (pluginInfo && pluginInfo.extensionOfType(ExtensionType.ELASTIC_AGENTS)) { - const extension = pluginInfo.extensionOfType(ExtensionType.ELASTIC_AGENTS); - return extension && extension.capabilities && extension.capabilities.supportsClusterStatusReport; - } - return false; - } - - private goToStatusReportPage(statusReportHref: string, event: Event): void { - event.stopPropagation(); - window.location.href = statusReportHref; - } - - private getActionButtons(vnode: m.Vnode, clusterProfile: ClusterProfile, pluginInfo: PluginInfo | undefined) { - const actionButtons = []; - - if (pluginInfo != null && ClusterProfilesWidget.supportsClusterStatusReport(pluginInfo)) { - const statusReportPath: string = Routes.adminClusterStatusReportPath(clusterProfile.pluginId(), clusterProfile.id()); - - actionButtons.push( - - Status Report - ); - } - - actionButtons.push( - { - vnode.attrs.elasticAgentOperations.onAdd(new ElasticAgentProfile("", clusterProfile.pluginId(), clusterProfile.id(), new Configurations([])), e); - }} data-test-id={"new-elastic-agent-profile-button"} disabled={!pluginInfo}> - + New Elastic Agent Profile - ); - - actionButtons.push(
- - - - - -
); - - return actionButtons; - } - - private getClusterProfileDetails(clusterProfile: ClusterProfile) { - const clusterProfileProperties = clusterProfile.properties() ? clusterProfile.properties().asMap() : []; - const clusterProfileDetails = new Map([ - ["Id", clusterProfile.id()], - ["PluginId", clusterProfile.pluginId()], - ...Array.from(clusterProfileProperties) - ]); - return ( - - - - ); - } } diff --git a/server/webapp/WEB-INF/rails/webpack/views/pages/elastic_profiles/elastic_agent_profiles_modals.tsx b/server/webapp/WEB-INF/rails/webpack/views/pages/elastic_profiles/elastic_agent_profiles_modals.tsx index 35dab306f85..3ee26c46b16 100644 --- a/server/webapp/WEB-INF/rails/webpack/views/pages/elastic_profiles/elastic_agent_profiles_modals.tsx +++ b/server/webapp/WEB-INF/rails/webpack/views/pages/elastic_profiles/elastic_agent_profiles_modals.tsx @@ -21,7 +21,6 @@ import {Stream} from "mithril/stream"; import * as stream from "mithril/stream"; import {ElasticAgentProfilesCRUD} from "models/elastic_profiles/elastic_agent_profiles_crud"; import {ClusterProfile, ClusterProfiles, ElasticAgentProfile, ProfileUsage} from "models/elastic_profiles/types"; -import {Configurations} from "models/shared/configuration"; 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"; @@ -121,13 +120,8 @@ abstract class BaseElasticProfileModal extends Modal { } const clustersList = _.map(clustersBelongingToPlugin, (clusterProfile: ClusterProfile) => { - return {id: clusterProfile.id(), text: clusterProfile.id()}; + return {id: clusterProfile.id(), text: `${clusterProfile.id()} (${this.pluginInfo().about.name})`}; }) || []; - - const pluginList = _.map(this.pluginInfos, (pluginInfo: PluginInfo) => { - return {id: pluginInfo.id, text: pluginInfo.about.name}; - }); - const elasticAgentExtension = this.pluginInfo().extensionOfType(ExtensionType.ELASTIC_AGENTS); const elasticProfileConfigurations = (elasticAgentExtension as ElasticAgentSettings).profileSettings; @@ -142,14 +136,6 @@ abstract class BaseElasticProfileModal extends Modal { property={this.elasticProfile().id} errorText={this.elasticProfile().errors().errorsForDisplay("id")} required={true}/> - - - - p.id === newValue); - this.pluginInfo(pluginInfo!); - this.elasticProfile(new ElasticAgentProfile(this.elasticProfile().id(), - pluginInfo!.id, - undefined, - new Configurations([]))); - } - } - return this.pluginInfo().id; - } } export class EditElasticProfileModal extends BaseElasticProfileModal { diff --git a/server/webapp/WEB-INF/rails/webpack/views/pages/elastic_profiles/index.scss b/server/webapp/WEB-INF/rails/webpack/views/pages/elastic_profiles/index.scss index 317a130f3d4..2e17ba66288 100644 --- a/server/webapp/WEB-INF/rails/webpack/views/pages/elastic_profiles/index.scss +++ b/server/webapp/WEB-INF/rails/webpack/views/pages/elastic_profiles/index.scss @@ -42,10 +42,10 @@ $disabled-text-color: #999; } } -.plugin-name, .cluster-profile-name { - font-weight: 600; - font-size: 13px; - margin-right: 50px; +.plugin-name { + font-weight: 600; + font-size: 13px; + @media (min-width: $screen-md) { font-size: 12px; } @@ -55,6 +55,12 @@ $disabled-text-color: #999; } +.cluster-profile-name { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + .plugin-not-installed { margin-right: 15px; align-self: center; @@ -115,3 +121,44 @@ $disabled-text-color: #999; .cluster-profile-crud-actions { margin-left: 20px; } + +.cluster-profile-details-header { + @include icon-before($type: $fa-var-angle-right, $size: 16px); + position: relative; + padding-left: 17px; + cursor: pointer; + margin: 0 0 20px 0; + + &:before { + position: absolute; + left: 1px; + top: 1px; + margin: 0; + transition: $transition; + } + + &.expanded { + &:before { + transform: rotate(90deg); + transition: $transition; + left: 3px; + top: 2px; + } + } +} + +.cluster-profile-details-container { + display: block; +} + +.cluster-profile-details { + display: none; + + &.expanded { + display: block; + } +} + +.add-icon { + @include icon-before($type: $fa-var-plus); +} diff --git a/server/webapp/WEB-INF/rails/webpack/views/pages/elastic_profiles/index.scss.d.ts b/server/webapp/WEB-INF/rails/webpack/views/pages/elastic_profiles/index.scss.d.ts index 5fcc4be68dc..31604ee2a36 100644 --- a/server/webapp/WEB-INF/rails/webpack/views/pages/elastic_profiles/index.scss.d.ts +++ b/server/webapp/WEB-INF/rails/webpack/views/pages/elastic_profiles/index.scss.d.ts @@ -13,3 +13,8 @@ export const disabled: string; export const note: string; export const spinnerWrapper: string; export const clusterProfileCrudActions: string; +export const clusterProfileDetailsHeader: string; +export const expanded: string; +export const clusterProfileDetailsContainer: string; +export const clusterProfileDetails: string; +export const addIcon: string; diff --git a/server/webapp/WEB-INF/rails/webpack/views/pages/elastic_profiles/spec/cluster_profiles_modals_spec.tsx b/server/webapp/WEB-INF/rails/webpack/views/pages/elastic_profiles/spec/cluster_profiles_modals_spec.tsx index c1705850ea6..2fad516af5e 100644 --- a/server/webapp/WEB-INF/rails/webpack/views/pages/elastic_profiles/spec/cluster_profiles_modals_spec.tsx +++ b/server/webapp/WEB-INF/rails/webpack/views/pages/elastic_profiles/spec/cluster_profiles_modals_spec.tsx @@ -36,17 +36,25 @@ describe("ClusterProfileModal", () => { }); describe("EditModalType", () => { - beforeEach(() => { + it("id field should be disabled for edit modal type", () => { modal = new TestClusterProfile(pluginInfos, ModalType.edit, ClusterProfile.fromJSON(TestData.dockerClusterProfile())); helper.mount(modal.body.bind(modal)); - }); - afterEach(() => { + expect(find("form-field-input-id")).toBeDisabled(); + helper.unmount(); }); - it("id field should be disabled for edit modal type", () => { - expect(find("form-field-input-id")).toBeDisabled(); + it("should display warning message if selected plugin do not support cluster profile", () => { + const clusterProfile = new ClusterProfile("", "cd.go.contrib.elasticagent.kubernetes"); + modal = new TestClusterProfile(pluginInfos, ModalType.edit, clusterProfile); + helper.mount(modal.body.bind(modal)); + + expect(helper.findIn(find("cluster-profile-form-header"), "flash-message-warning")).toBeInDOM(); + expect(helper.findIn(find("cluster-profile-form-header"), "flash-message-warning")).toHaveText("Can not edit Cluster profile for 'Kubernetes Elastic Agent Plugin' plugin as it does not support cluster profiles."); + expect(helper.findByDataTestId("cluster-profile-properties-form")).toBeEmpty(); + + helper.unmount(); }); }); @@ -79,7 +87,7 @@ describe("ClusterProfileModal", () => { helper.mount(modal.body.bind(modal)); expect(helper.findIn(find("cluster-profile-form-header"), "flash-message-alert")).toBeInDOM(); - expect(helper.findIn(find("cluster-profile-form-header"), "flash-message-alert")).toHaveText("Can not define Cluster profiles for 'cd.go.contrib.elasticagent.kubernetes' plugin as it does not support cluster profiles."); + expect(helper.findIn(find("cluster-profile-form-header"), "flash-message-alert")).toHaveText("Can not define Cluster profiles for 'Kubernetes Elastic Agent Plugin' plugin as it does not support cluster profiles."); expect(helper.findByDataTestId("cluster-profile-properties-form")).toBeEmpty(); helper.unmount(); diff --git a/server/webapp/WEB-INF/rails/webpack/views/pages/elastic_profiles/spec/cluster_profiles_widget_spec.tsx b/server/webapp/WEB-INF/rails/webpack/views/pages/elastic_profiles/spec/cluster_profiles_widget_spec.tsx index d3ae5b8f3b7..a3f39dc2661 100644 --- a/server/webapp/WEB-INF/rails/webpack/views/pages/elastic_profiles/spec/cluster_profiles_widget_spec.tsx +++ b/server/webapp/WEB-INF/rails/webpack/views/pages/elastic_profiles/spec/cluster_profiles_widget_spec.tsx @@ -22,6 +22,7 @@ import {Extension} from "models/shared/plugin_infos_new/extensions"; import {PluginInfo} from "models/shared/plugin_infos_new/plugin_info"; import * as collapsiblePanelStyles from "views/components/collapsible_panel/index.scss"; import {ClusterProfilesWidget} from "views/pages/elastic_profiles/cluster_profiles_widget"; +import * as elasticProfilePageStyles from "views/pages/elastic_profiles/index.scss"; import {TestData} from "views/pages/elastic_profiles/spec/test_data"; import {TestHelper} from "views/pages/spec/test_helper"; @@ -68,7 +69,7 @@ describe("ClusterProfilesWidget", () => { mount(pluginInfos, clusterProfiles, new ElasticAgentProfiles([])); expect(helper.findByDataTestId("new-elastic-agent-profile-button")).toBeInDOM(); - expect(helper.findByDataTestId("new-elastic-agent-profile-button")).toHaveText("+ New Elastic Agent Profile"); + expect(helper.findByDataTestId("new-elastic-agent-profile-button")).toHaveText("Elastic Agent Profile"); helper.unmount(); }); @@ -88,8 +89,8 @@ describe("ClusterProfilesWidget", () => { mount(pluginInfos, clusterProfiles, new ElasticAgentProfiles([])); expect(helper.findIn(helper.findByDataTestId("collapse-header")[0], "cluster-profile-name")).toHaveText("cluster_3"); - expect(helper.findIn(helper.findByDataTestId("collapse-header")[0], "key-value-key-pluginid")).toHaveText("PluginId"); - expect(helper.findIn(helper.findByDataTestId("collapse-header")[0], "key-value-value-pluginid")).toHaveText("cd.go.contrib.elastic-agent.docker"); + expect(helper.findIn(helper.findByDataTestId("collapse-header")[0], "key-value-key-plugin")).toHaveText("Plugin"); + expect(helper.findIn(helper.findByDataTestId("collapse-header")[0], "key-value-value-plugin")).toHaveText("Docker Elastic Agent Plugin"); helper.unmount(); }); @@ -222,13 +223,15 @@ describe("ClusterProfilesWidget", () => { it("should toggle expanded state of cluster profile show details on click", () => { simulateEvent.simulate(clusterProfilePanelHeader, "click"); - const clusterProfileInfoHeader = helper.findIn(helper.findByDataTestId("cluster-profile-info-panel")[0], "collapse-header")[0]; + const clusterProfileInfoHeader = helper.findIn(helper.findByDataTestId("cluster-profile-panel"), "cluster-profile-details-header")[0]; - expect(clusterProfileInfoHeader).not.toHaveClass(collapsiblePanelStyles.expanded); + expect(clusterProfileInfoHeader).not.toHaveClass(elasticProfilePageStyles.expanded); + expect(helper.findIn(helper.findByDataTestId("cluster-profile-panel"), "cluster-profile-details")[0]).not.toHaveClass(elasticProfilePageStyles.expanded); simulateEvent.simulate(clusterProfileInfoHeader, "click"); - expect(clusterProfileInfoHeader).toHaveClass(collapsiblePanelStyles.expanded); + expect(clusterProfileInfoHeader).toHaveClass(elasticProfilePageStyles.expanded); + expect(helper.findIn(helper.findByDataTestId("cluster-profile-panel"), "cluster-profile-details")[0]).toHaveClass(elasticProfilePageStyles.expanded); }); it("should toggle expanded state of elastic agent profile show details on click", () => {