Skip to content

Commit

Permalink
fixed key errors
Browse files Browse the repository at this point in the history
  • Loading branch information
@YulNaumenko
YulNaumenko committed May 25, 2021
1 parent a80b8da commit 9b85dfc
Show file tree
Hide file tree
Showing 4 changed files with 118 additions and 123 deletions.
76 changes: 39 additions & 37 deletions ...ins/triggers_actions_ui/public/application/sections/action_connector_form/action_form.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
* 2.0.
*/

import React, { useState, useEffect, useCallback } from 'react';
import React, { Fragment, useState, useEffect, useCallback } from 'react';
import { i18n } from '@kbn/i18n';
import { FormattedMessage } from '@kbn/i18n/react';
import {
Expand Down Expand Up @@ -362,42 +362,44 @@ export const ActionForm = ({
?.validateParams(actionItem.params);

return (
<ActionTypeForm
actionItem={actionItem}
actionConnector={actionConnector}
actionParamsErrors={actionParamsErrors}
index={index}
key={`action-form-action-at-${index}`}
setActionParamsProperty={setActionParamsProperty}
actionTypesIndex={actionTypesIndex}
connectors={connectors}
defaultActionGroupId={defaultActionGroupId}
messageVariables={messageVariables}
actionGroups={actionGroups}
defaultActionMessage={defaultActionMessage}
defaultParams={getDefaultActionParams?.(actionItem.actionTypeId, actionItem.group)}
isActionGroupDisabledForActionType={isActionGroupDisabledForActionType}
setActionGroupIdByIndex={setActionGroupIdByIndex}
onAddConnector={() => {
setActiveActionItem({ actionTypeId: actionItem.actionTypeId, indices: [index] });
setAddModalVisibility(true);
}}
onConnectorSelected={(id: string) => {
setActionIdByIndex(id, index);
}}
actionTypeRegistry={actionTypeRegistry}
onDeleteAction={() => {
const updatedActions = actions.filter(
(_item: AlertAction, i: number) => i !== index
);
setActions(updatedActions);
setIsAddActionPanelOpen(
updatedActions.filter((item: AlertAction) => item.id !== actionItem.id).length ===
0
);
setActiveActionItem(undefined);
}}
/>
<Fragment key={`action-form-action-at-${index}`}>
<ActionTypeForm
actionItem={actionItem}
actionConnector={actionConnector}
actionParamsErrors={actionParamsErrors}
index={index}
setActionParamsProperty={setActionParamsProperty}
actionTypesIndex={actionTypesIndex}
connectors={connectors}
defaultActionGroupId={defaultActionGroupId}
messageVariables={messageVariables}
actionGroups={actionGroups}
defaultActionMessage={defaultActionMessage}
defaultParams={getDefaultActionParams?.(actionItem.actionTypeId, actionItem.group)}
isActionGroupDisabledForActionType={isActionGroupDisabledForActionType}
setActionGroupIdByIndex={setActionGroupIdByIndex}
onAddConnector={() => {
setActiveActionItem({ actionTypeId: actionItem.actionTypeId, indices: [index] });
setAddModalVisibility(true);
}}
onConnectorSelected={(id: string) => {
setActionIdByIndex(id, index);
}}
actionTypeRegistry={actionTypeRegistry}
onDeleteAction={() => {
const updatedActions = actions.filter(
(_item: AlertAction, i: number) => i !== index
);
setActions(updatedActions);
setIsAddActionPanelOpen(
updatedActions.filter((item: AlertAction) => item.id !== actionItem.id)
.length === 0
);
setActiveActionItem(undefined);
}}
/>
<EuiSpacer size="m" />
</Fragment>
);
})}
<EuiSpacer size="m" />
Expand Down
145 changes: 71 additions & 74 deletions ...riggers_actions_ui/public/application/sections/action_connector_form/action_type_form.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -311,83 +311,80 @@ export const ActionTypeForm = ({
);

return (
<>
<EuiAccordion
initialIsOpen={true}
key={index}
id={index.toString()}
onToggle={setIsOpen}
paddingSize="l"
className="actAccordionActionForm"
buttonContentClassName="actAccordionActionForm__button"
data-test-subj={`alertActionAccordion-${index}`}
buttonContent={
<EuiFlexGroup gutterSize="l" alignItems="center">
<EuiFlexItem grow={false}>
<EuiIcon type={actionTypeRegistered.iconClass} size="m" />
</EuiFlexItem>
<EuiFlexItem>
<EuiText>
<div>
<EuiFlexGroup gutterSize="s">
<EuiAccordion
initialIsOpen={true}
key={index}
id={index.toString()}
onToggle={setIsOpen}
paddingSize="l"
className="actAccordionActionForm"
buttonContentClassName="actAccordionActionForm__button"
data-test-subj={`alertActionAccordion-${index}`}
buttonContent={
<EuiFlexGroup gutterSize="l" alignItems="center">
<EuiFlexItem grow={false}>
<EuiIcon type={actionTypeRegistered.iconClass} size="m" />
</EuiFlexItem>
<EuiFlexItem>
<EuiText>
<div>
<EuiFlexGroup gutterSize="s">
<EuiFlexItem grow={false}>
<FormattedMessage
defaultMessage="{actionConnectorName}"
id="xpack.triggersActionsUI.sections.actionTypeForm.existingAlertActionTypeEditTitle"
values={{
actionConnectorName: `${actionConnector.name} ${
actionConnector.isPreconfigured ? preconfiguredMessage : ''
}`,
}}
/>
</EuiFlexItem>
{selectedActionGroup && !isOpen && (
<EuiFlexItem grow={false}>
<FormattedMessage
defaultMessage="{actionConnectorName}"
id="xpack.triggersActionsUI.sections.actionTypeForm.existingAlertActionTypeEditTitle"
values={{
actionConnectorName: `${actionConnector.name} ${
actionConnector.isPreconfigured ? preconfiguredMessage : ''
}`,
}}
/>
<EuiBadge>{selectedActionGroup.name}</EuiBadge>
</EuiFlexItem>
{selectedActionGroup && !isOpen && (
<EuiFlexItem grow={false}>
<EuiBadge>{selectedActionGroup.name}</EuiBadge>
</EuiFlexItem>
)}
<EuiFlexItem grow={false}>
{checkEnabledResult.isEnabled === false && (
<>
<EuiIconTip
type="alert"
color="danger"
content={i18n.translate(
'xpack.triggersActionsUI.sections.actionTypeForm.actionDisabledTitle',
{
defaultMessage: 'This action is disabled',
}
)}
position="right"
/>
</>
)}
<EuiFlexItem grow={false}>
{checkEnabledResult.isEnabled === false && (
<>
<EuiIconTip
type="alert"
color="danger"
content={i18n.translate(
'xpack.triggersActionsUI.sections.actionTypeForm.actionDisabledTitle',
{
defaultMessage: 'This action is disabled',
}
)}
position="right"
/>
</>
)}
</EuiFlexItem>
</EuiFlexGroup>
</div>
</EuiText>
</EuiFlexItem>
</EuiFlexGroup>
}
extraAction={
<EuiButtonIcon
iconType="minusInCircle"
color="danger"
className="actAccordionActionForm__extraAction"
aria-label={i18n.translate(
'xpack.triggersActionsUI.sections.actionTypeForm.accordion.deleteIconAriaLabel',
{
defaultMessage: 'Delete',
}
)}
onClick={onDeleteAction}
/>
}
>
{accordionContent}
</EuiAccordion>
<EuiSpacer size="m" />
</>
</EuiFlexItem>
</EuiFlexGroup>
</div>
</EuiText>
</EuiFlexItem>
</EuiFlexGroup>
}
extraAction={
<EuiButtonIcon
iconType="minusInCircle"
color="danger"
className="actAccordionActionForm__extraAction"
aria-label={i18n.translate(
'xpack.triggersActionsUI.sections.actionTypeForm.accordion.deleteIconAriaLabel',
{
defaultMessage: 'Delete',
}
)}
onClick={onDeleteAction}
/>
}
>
{accordionContent}
</EuiAccordion>
);
};

Expand Down
12 changes: 4 additions & 8 deletions ...ns/triggers_actions_ui/public/application/sections/alerts_list/components/type_filter.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
* 2.0.
*/

import React, { useEffect, useState } from 'react';
import React, { Fragment, useEffect, useState } from 'react';
import { FormattedMessage } from '@kbn/i18n/react';
import {
EuiFilterGroup,
Expand Down Expand Up @@ -63,12 +63,8 @@ export const TypeFilter: React.FunctionComponent<TypeFilterProps> = ({
>
<div className="euiFilterSelect__items">
{options.map((groupItem, groupIndex) => (
<>
<EuiTitle
data-test-subj={`alertType${groupIndex}Group`}
size="xxs"
key={`group${groupIndex}`}
>
<Fragment key={`group${groupIndex}`}>
<EuiTitle data-test-subj={`alertType${groupIndex}Group`} size="xxs">
<h3>{groupItem.groupName}</h3>
</EuiTitle>
{groupItem.subOptions.map((item, index) => (
Expand All @@ -88,7 +84,7 @@ export const TypeFilter: React.FunctionComponent<TypeFilterProps> = ({
{item.name}
</EuiFilterSelectItem>
))}
</>
</Fragment>
))}
</div>
</EuiPopover>
Expand Down
8 changes: 4 additions & 4 deletions x-pack/plugins/triggers_actions_ui/public/common/expression_items/threshold.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
* 2.0.
*/

import React, { useEffect, useState } from 'react';
import React, { Fragment, useEffect, useState } from 'react';
import { i18n } from '@kbn/i18n';
import {
EuiExpression,
Expand Down Expand Up @@ -134,7 +134,7 @@ export const ThresholdExpression = ({
</EuiFlexItem>
{Array.from(Array(numRequiredThresholds)).map((_notUsed, i) => {
return (
<>
<Fragment key={`threshold${i}`}>
{i > 0 ? (
<EuiFlexItem
grow={false}
Expand All @@ -143,7 +143,7 @@ export const ThresholdExpression = ({
<EuiText>{andThresholdText}</EuiText>
</EuiFlexItem>
) : null}
<EuiFlexItem grow={false} key={`threshold${i}`}>
<EuiFlexItem grow={false}>
<EuiFormRow
isInvalid={errors[`threshold${i}`]?.length > 0 || !threshold[i]}
error={errors[`threshold${i}`]}
Expand All @@ -167,7 +167,7 @@ export const ThresholdExpression = ({
/>
</EuiFormRow>
</EuiFlexItem>
</>
</Fragment>
);
})}
</EuiFlexGroup>
Expand Down

0 comments on commit 9b85dfc

Please sign in to comment.