Making Look and Feel Changes in ISM pages

public/pages/CreatePolicy/components/DefinePolicy/DefinePolicy.tsx

@@ -26,23 +26,24 @@ interface DefinePolicyProps {
   hasJSONError: boolean;
   onChange: (value: string) => void;
   onAutoIndent: () => void;
+  useNewUx?: boolean;
 }
 
 // TODO: Add custom autocomplete for Policy syntax
-const DefinePolicy = ({ jsonString, onChange, onAutoIndent, hasJSONError }: DefinePolicyProps) => (
+const DefinePolicy = ({ jsonString, onChange, onAutoIndent, hasJSONError, useNewUx }: DefinePolicyProps) => (
   <ContentPanel
     bodyStyles={{ padding: "initial" }}
     title="Define policy"
     titleSize="s"
     actions={[
       <EuiCopy textToCopy={jsonString}>
         {(copy: () => void) => (
-          <EuiButton iconType="copyClipboard" onClick={copy}>
+          <EuiButton iconType="copyClipboard" onClick={copy} size={useNewUx ? "s" : undefined}>
             Copy
           </EuiButton>
         )}
       </EuiCopy>,
-      <EuiButton iconType="editorAlignLeft" onClick={onAutoIndent} disabled={hasJSONError}>
+      <EuiButton iconType="editorAlignLeft" onClick={onAutoIndent} disabled={hasJSONError} size={useNewUx ? "s" : undefined}>
         Auto indent
       </EuiButton>,
     ]}

public/pages/CreatePolicy/containers/CreatePolicy/CreatePolicy.tsx

@@ -286,7 +286,13 @@ export class CreatePolicy extends Component<CreatePolicyProps, CreatePolicyState
         {this.renderEditCallOut()}
         <ConfigurePolicy policyId={policyId} policyIdError={policyIdError} isEdit={isEdit} onChange={this.onChange} useNewUx={useNewUX} />
         <EuiSpacer />
-        <DefinePolicy jsonString={jsonString} onChange={this.onChangeJSON} onAutoIndent={this.onAutoIndent} hasJSONError={hasJSONError} />
+        <DefinePolicy
+          jsonString={jsonString}
+          onChange={this.onChangeJSON}
+          onAutoIndent={this.onAutoIndent}
+          hasJSONError={hasJSONError}
+          useNewUx={useNewUX}
+        />
         <EuiSpacer />
         {submitError && (
           <EuiCallOut title="Sorry, there was an error" color="danger" iconType="alert">
@@ -296,12 +302,18 @@ export class CreatePolicy extends Component<CreatePolicyProps, CreatePolicyState
         <EuiSpacer />
         <EuiFlexGroup alignItems="center" justifyContent="flexEnd">
           <EuiFlexItem grow={false}>
-            <EuiButtonEmpty onClick={this.onCancel} data-test-subj="createPolicyCancelButton">
+            <EuiButtonEmpty onClick={this.onCancel} data-test-subj="createPolicyCancelButton" size={useNewUX ? "s" : undefined}>
               Cancel
             </EuiButtonEmpty>
           </EuiFlexItem>
           <EuiFlexItem grow={false}>
-            <EuiButton fill onClick={this.onSubmit} isLoading={isSubmitting} data-test-subj="createPolicyCreateButton">
+            <EuiButton
+              fill
+              onClick={this.onSubmit}
+              isLoading={isSubmitting}
+              data-test-subj="createPolicyCreateButton"
+              size={useNewUX ? "s" : undefined}
+            >
               {isEdit ? "Update" : "Create"}
             </EuiButton>
           </EuiFlexItem>

public/pages/Policies/containers/Policies/Policies.tsx

@@ -26,6 +26,8 @@ import {
   EuiCompressedFieldSearch,
   EuiPopover,
   EuiContextMenuPanel,
+  EuiContextMenu,
+  EuiIcon,
 } from "@elastic/eui";
 import _ from "lodash";
 import { ContentPanel, ContentPanelActions } from "../../../../components/ContentPanel";
@@ -442,33 +444,31 @@ export class Policies extends MDSEnabledComponent<PoliciesProps, PoliciesState>
       </EuiButton>
     );
 
-    const popoverActionItems = [
-      <EuiContextMenuItem
-        key="Edit"
-        icon="pencil"
-        disabled={selectedItems.length != 1}
-        data-test-subj="editButton"
-        size="s"
-        onClick={() => {
-          this.closePopover();
-          this.onShowEditModal();
-        }}
-      >
-        Edit
-      </EuiContextMenuItem>,
-      <EuiContextMenuItem
-        key="Delete"
-        icon="trash"
-        disabled={!selectedItems.length}
-        data-test-subj="deleteButton"
-        size="s"
-        onClick={() => {
-          this.closePopover();
-          this.onShowDeleteModal();
-        }}
-      >
-        <EuiTextColor color="danger">Delete</EuiTextColor>
-      </EuiContextMenuItem>,
+    const popoverItems = [
+      {
+        id: 0,
+        width: 159,
+        items: [
+          {
+            name: "Edit",
+            icon: "pencil",
+            disabled: selectedItems.length != 1,
+            onClick: () => {
+              this.closePopover();
+              this.onShowEditModal();
+            },
+          },
+          {
+            name: "Delete",
+            icon: <EuiIcon type="trash" size="m" color="danger" />,
+            disabled: !selectedItems.length,
+            onClick: () => {
+              this.closePopover();
+              this.onShowDeleteModal();
+            },
+          },
+        ],
+      },
     ];
 
     return !useNewUX ? (
@@ -543,8 +543,9 @@ export class Policies extends MDSEnabledComponent<PoliciesProps, PoliciesState>
                 isOpen={isPopoverOpen}
                 closePopover={this.closePopover}
                 anchorPosition="downRight"
+                panelPaddingSize="none"
               >
-                <EuiContextMenuPanel items={popoverActionItems} />
+                <EuiContextMenu initialPanelId={0} panels={popoverItems} size="s" />
               </EuiPopover>
             </EuiFlexItem>
           </EuiFlexGroup>

public/pages/VisualCreatePolicy/components/ChannelNotification/ChannelNotification.tsx

@@ -18,6 +18,7 @@ interface ChannelNotificationProps {
   onChangeChannelId: (value: ChangeEvent<HTMLSelectElement>) => void;
   onChangeMessage?: (value: ChangeEvent<HTMLTextAreaElement>) => void;
   getChannels: () => void;
+  useNewUx?: boolean;
   actionNotification?: boolean; // to tell if this is rendering in actions or in error notification as they both show up on page together
 }
 
@@ -29,6 +30,7 @@ const ChannelNotification = ({
   onChangeChannelId,
   onChangeMessage,
   getChannels,
+  useNewUx,
   actionNotification = false,
 }: ChannelNotificationProps) => {
   return (
@@ -38,6 +40,7 @@ const ChannelNotification = ({
         <EuiFlexItem>
           <EuiFormRow>
             <EuiSelect
+              compressed={useNewUx}
               id={actionNotification ? "action-channel-id" : "channel-id"}
               placeholder="Select channel ID"
               hasNoInitialSelection
@@ -56,10 +59,11 @@ const ChannelNotification = ({
             disabled={loadingChannels}
             className="refresh-button"
             data-test-subj="channel-notification-refresh"
+            size={useNewUx ? "s" : undefined}
           />
         </EuiFlexItem>
         <EuiFlexItem grow={false}>
-          <EuiButton iconType="popout" href="notifications-dashboards#/channels" target="_blank">
+          <EuiButton iconType="popout" href="notifications-dashboards#/channels" target="_blank" size={useNewUx ? "s" : undefined}>
             Manage channels
           </EuiButton>
         </EuiFlexItem>

public/pages/VisualCreatePolicy/components/FlyoutFooter/FlyoutFooter.tsx

@@ -15,17 +15,34 @@ interface FlyoutFooterProps {
   save?: boolean;
   restore?: boolean;
   text?: string;
+  useNewUx?: boolean;
 }
 
-const FlyoutFooter = ({ edit, action, disabledAction = false, onClickCancel, onClickAction, save, restore, text }: FlyoutFooterProps) => (
+const FlyoutFooter = ({
+  edit,
+  action,
+  disabledAction = false,
+  onClickCancel,
+  onClickAction,
+  save,
+  restore,
+  text,
+  useNewUx,
+}: FlyoutFooterProps) => (
   <EuiFlexGroup justifyContent="flexEnd">
     <EuiFlexItem grow={false}>
-      <EuiButtonEmpty onClick={onClickCancel} flush="left" data-test-subj="flyout-footer-cancel-button">
+      <EuiButtonEmpty size={useNewUx ? "s" : undefined} onClick={onClickCancel} flush="left" data-test-subj="flyout-footer-cancel-button">
         Cancel
       </EuiButtonEmpty>
     </EuiFlexItem>
     <EuiFlexItem grow={false}>
-      <EuiButton disabled={disabledAction} onClick={onClickAction} fill data-test-subj="flyout-footer-action-button">
+      <EuiButton
+        size={useNewUx ? "s" : undefined}
+        disabled={disabledAction}
+        onClick={onClickAction}
+        fill
+        data-test-subj="flyout-footer-action-button"
+      >
         {text ? text : restore ? "Restore snapshot" : !save ? `${edit ? "Edit" : "Add"} ${action}` : save ? "Save" : "Create"}
       </EuiButton>
     </EuiFlexItem>

public/pages/VisualCreatePolicy/components/ISMTemplate/ISMTemplate.tsx

@@ -15,16 +15,18 @@ interface ISMTemplateProps {
   onUpdateTemplate: (template: ISMTemplateData) => void;
   onRemoveTemplate: () => void;
   isFirst: boolean;
+  useNewUx?: boolean;
 }
 
-const ISMTemplate = ({ template, onUpdateTemplate, onRemoveTemplate, isFirst }: ISMTemplateProps) => {
+const ISMTemplate = ({ template, onUpdateTemplate, onRemoveTemplate, isFirst, useNewUx }: ISMTemplateProps) => {
   // TODO: Move this top top of form submition
   const [isInvalid, setInvalid] = useState(false);
   return (
     <EuiFlexGroup gutterSize="l" alignItems="center">
       <EuiFlexItem style={{ maxWidth: ISM_TEMPLATE_INPUT_MAX_WIDTH }}>
         <EuiFormRow isInvalid={false} error={null}>
           <EuiComboBox
+            compressed={useNewUx}
             isClearable={false}
             placeholder="Add index patterns"
             noSuggestions
@@ -67,6 +69,7 @@ const ISMTemplate = ({ template, onUpdateTemplate, onRemoveTemplate, isFirst }:
       <EuiFlexItem grow={false}>
         <EuiFormRow error={null} isInvalid={false}>
           <EuiFieldNumber
+            compressed={useNewUx}
             value={template.priority}
             onChange={(e: ChangeEvent<HTMLInputElement>) => {
               const priority = e.target.valueAsNumber;
@@ -78,7 +81,7 @@ const ISMTemplate = ({ template, onUpdateTemplate, onRemoveTemplate, isFirst }:
         </EuiFormRow>
       </EuiFlexItem>
       <EuiFlexItem grow={false}>
-        <EuiButton color="danger" onClick={onRemoveTemplate} data-test-subj="ism-template-remove-button">
+        <EuiButton color="danger" onClick={onRemoveTemplate} data-test-subj="ism-template-remove-button" size={useNewUx ? "s" : undefined}>
           Remove
         </EuiButton>
       </EuiFlexItem>

public/pages/VisualCreatePolicy/components/ISMTemplates/ISMTemplates.tsx

@@ -18,12 +18,14 @@ import { makeId } from "../../../../utils/helpers";
 interface ISMTemplatesProps {
   policy: Policy;
   onChangePolicy: (policy: Policy) => void;
+  useNewUx?: boolean;
 }
 
-const ISMTemplates = ({ policy, onChangePolicy }: ISMTemplatesProps) => {
+const ISMTemplates = ({ policy, onChangePolicy, useNewUx }: ISMTemplatesProps) => {
   const templates = convertTemplatesToArray(policy.ism_template);
   const addTemplateButton = (
     <EuiButton
+      size={useNewUx ? "s" : undefined}
       onClick={() => {
         onChangePolicy({ ...policy, ism_template: [...templates, { index_patterns: [], priority: 1 }] });
       }}
@@ -32,6 +34,7 @@ const ISMTemplates = ({ policy, onChangePolicy }: ISMTemplatesProps) => {
       Add template
     </EuiButton>
   );
+  const paddingStyle = useNewUx ? { padding: "0px 0px" } : { padding: "5px 0px" };
   return (
     <ContentPanel
       bodyStyles={{ padding: "initial" }}
@@ -51,7 +54,7 @@ const ISMTemplates = ({ policy, onChangePolicy }: ISMTemplatesProps) => {
       }
       titleSize="s"
       subTitleText={
-        <EuiText color="subdued" size="s" style={{ padding: "5px 0px" }}>
+        <EuiText color="subdued" size="s" style={paddingStyle}>
           <p style={{ fontWeight: 200 }}>
             Specify ISM template patterns that match the index to apply the policy.{" "}
             <EuiLink href={DOCUMENTATION_URL} target="_blank" rel="noopener noreferrer">
@@ -97,6 +100,7 @@ const ISMTemplates = ({ policy, onChangePolicy }: ISMTemplatesProps) => {
                 ism_template: templates.slice(0, idx).concat(templates.slice(idx + 1)),
               });
             }}
+            useNewUx={useNewUx}
           />
         ))}
 

public/pages/VisualCreatePolicy/components/States/States.tsx

@@ -31,16 +31,26 @@ interface StatesProps {
   onClickDeleteState: (idx: number) => void;
   onChangeDefaultState: (event: ChangeEvent<HTMLSelectElement>) => void;
   isReadOnly: boolean;
+  useNewUx?: boolean;
 }
 
-const States = ({ onOpenFlyout, policy, onClickEditState, onClickDeleteState, onChangeDefaultState, isReadOnly = false }: StatesProps) => {
+const States = ({
+  onOpenFlyout,
+  policy,
+  onClickEditState,
+  onClickDeleteState,
+  onChangeDefaultState,
+  isReadOnly = false,
+  useNewUx,
+}: StatesProps) => {
+  const paddingStyle = useNewUx ? { padding: "0px 0px" } : { padding: "5px 0px" };
   return (
     <ContentPanel
       bodyStyles={{ padding: "initial" }}
       title={`States (${policy.states.length})`}
       titleSize="s"
       subTitleText={
-        <EuiText color="subdued" size="s" style={{ padding: "5px 0px" }}>
+        <EuiText color="subdued" size="s" style={paddingStyle}>
           <p style={{ fontWeight: 200 }}>
             You can think of policies as state machines. "Actions" are the operations ISM performs when an index is in a certain state.
             <br />
@@ -89,7 +99,7 @@ const States = ({ onOpenFlyout, policy, onClickEditState, onClickDeleteState, on
           (!!policy.states.length ? (
             <>
               <EuiSpacer />
-              <EuiButton onClick={onOpenFlyout} data-test-subj="states-add-state-button">
+              <EuiButton onClick={onOpenFlyout} data-test-subj="states-add-state-button" size={useNewUx ? "s" : undefined}>
                 Add state
               </EuiButton>
             </>
@@ -99,7 +109,12 @@ const States = ({ onOpenFlyout, policy, onClickEditState, onClickDeleteState, on
               titleSize="s"
               body={<p>Your policy currently has no states defined. Add states to manage your index lifecycle.</p>}
               actions={
-                <EuiButton color="primary" onClick={onOpenFlyout} data-test-subj="states-add-state-button">
+                <EuiButton
+                  color="primary"
+                  onClick={onOpenFlyout}
+                  data-test-subj="states-add-state-button"
+                  size={useNewUx ? "s" : undefined}
+                >
                   Add state
                 </EuiButton>
               }

public/pages/VisualCreatePolicy/components/Transition/Transition.tsx

@@ -24,9 +24,10 @@ const conditionTypeOptions = [
 interface TransitionProps {
   uiTransition: UITransition;
   onChangeTransition: (transition: UITransition) => void;
+  useNewUx?: boolean;
 }
 
-const Transition = ({ uiTransition, onChangeTransition }: TransitionProps) => {
+const Transition = ({ uiTransition, onChangeTransition, useNewUx }: TransitionProps) => {
   // We currently only support one transition condition
   const conditionType = Object.keys(uiTransition.transition.conditions || []).pop() || "none";
   const conditions = uiTransition.transition.conditions;
@@ -35,6 +36,7 @@ const Transition = ({ uiTransition, onChangeTransition }: TransitionProps) => {
       <EuiFormCustomLabel title="Condition" helpText="Specify the condition needed to be met to transition to the destination state." />
       <EuiFormRow fullWidth isInvalid={false} error={null}>
         <EuiSelect
+          compressed={useNewUx}
           fullWidth
           id="condition-type"
           options={conditionTypeOptions}