Fixing a few bugs and addressing comments

Signed-off-by: Kshitij Tandon <tandonks@amazon.com>
CaptainDredge · Aug 19, 2024 · b7606e0 · b7606e0
1 parent 5f3cacd
commit b7606e0
Show file tree

Hide file tree

Showing 39 changed files with 227 additions and 187 deletions.
diff --git a/public/components/FilterGroup/__snapshots__/FilterGroup.test.tsx.snap b/public/components/FilterGroup/__snapshots__/FilterGroup.test.tsx.snap
@@ -13,7 +13,7 @@ HTMLCollection [
           class="euiPopover__anchor"
         >
           <button
-            class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--large euiFilterButton euiFilterButton-hasNotification euiFilterButton--hasIcon"
+            class="euiButtonEmpty euiButtonEmpty--text euiFilterButton euiFilterButton-hasNotification euiFilterButton--hasIcon"
             data-test-subj="test"
             placeholder="test"
             type="button"
@@ -63,7 +63,7 @@ HTMLCollection [
           class="euiPopover__anchor"
         >
           <button
-            class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--large euiFilterButton euiFilterButton-isSelected euiFilterButton-hasNotification euiFilterButton--hasIcon"
+            class="euiButtonEmpty euiButtonEmpty--text euiFilterButton euiFilterButton-isSelected euiFilterButton-hasNotification euiFilterButton--hasIcon"
             data-test-subj="test"
             placeholder="test"
             type="button"
@@ -181,7 +181,7 @@ HTMLCollection [
           class="euiPopover__anchor"
         >
           <button
-            class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--large euiFilterButton euiFilterButton-isSelected euiFilterButton-hasActiveFilters euiFilterButton-hasNotification euiFilterButton--hasIcon"
+            class="euiButtonEmpty euiButtonEmpty--text euiFilterButton euiFilterButton-isSelected euiFilterButton-hasActiveFilters euiFilterButton-hasNotification euiFilterButton--hasIcon"
             data-test-subj="test"
             placeholder="test"
             type="button"
@@ -299,7 +299,7 @@ HTMLCollection [
           class="euiPopover__anchor"
         >
           <button
-            class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--large euiFilterButton euiFilterButton-isSelected euiFilterButton-hasNotification euiFilterButton--hasIcon"
+            class="euiButtonEmpty euiButtonEmpty--text euiFilterButton euiFilterButton-isSelected euiFilterButton-hasNotification euiFilterButton--hasIcon"
             data-test-subj="test"
             placeholder="test"
             type="button"

diff --git a/public/pages/Aliases/containers/AliasActions/index.tsx b/public/pages/Aliases/containers/AliasActions/index.tsx
@@ -48,7 +48,7 @@ export default function AliasesActions(props: AliasesActionsProps) {
   const uiSettings = getUISettings();
   const useUpdatedUX = uiSettings.get("home:useNewHomePage");
 
-  const size = useUpdatedUX ? "s" : "m";
+  const size = useUpdatedUX ? "s" : undefined;
 
   return (
     <>

diff --git a/public/pages/Aliases/containers/Aliases/Aliases.tsx b/public/pages/Aliases/containers/Aliases/Aliases.tsx
@@ -161,7 +161,7 @@ class Aliases extends MDSEnabledComponent<AliasesProps, AliasesState> {
   }
 
   componentDidMount() {
-    const breadCrumbs = this.state.useUpdatedUX ? [BREADCRUMBS.ALIASES] : [BREADCRUMBS.INDEX_MANAGEMENT, BREADCRUMBS.ALIASES];
+    const breadCrumbs = this.state.useUpdatedUX ? [BREADCRUMBS.NEW_ALIASES] : [BREADCRUMBS.INDEX_MANAGEMENT, BREADCRUMBS.ALIASES];
     this.context.chrome.setBreadcrumbs(breadCrumbs);
     this.getAliases();
   }
@@ -310,7 +310,7 @@ class Aliases extends MDSEnabledComponent<AliasesProps, AliasesState> {
           <EuiFormRow
             fullWidth
             helpText={
-              <div style={{ width: "50%" }}>
+              <div style={{ width: "51%" }}>
                 An alias is a virtual index name that can point to one or more indexes. If your data is spread across multiple indexes, you
                 can create and query an alias instead of keeping track of which indexes to query.{" "}
                 <EuiLink target="_blank" external href={(this.context as CoreStart).docLinks.links.opensearch.indexAlias.base}>
@@ -325,7 +325,7 @@ class Aliases extends MDSEnabledComponent<AliasesProps, AliasesState> {
       },
     ];
 
-    const Buttonsize = this.state.useUpdatedUX ? "s" : "m";
+    const Buttonsize = this.state.useUpdatedUX ? "s" : undefined;
 
     const commonRender = () => {
       return (

diff --git a/public/pages/ChangePolicy/components/ChangeManagedIndices/ChangeManagedIndices.tsx b/public/pages/ChangePolicy/components/ChangeManagedIndices/ChangeManagedIndices.tsx
@@ -17,6 +17,7 @@ interface ChangeManagedIndicesProps {
   onChangeManagedIndices: (selectedManagedIndices: { label: string; value?: ManagedIndexItem }[]) => void;
   onChangeStateFilters: (stateFilter: { label: string }[]) => void;
   managedIndicesError: string;
+  useUpdatedUX?: boolean;
 }
 
 interface ChangeManagedIndicesState {
@@ -71,8 +72,7 @@ export default class ChangeManagedIndices extends Component<ChangeManagedIndices
 
   render() {
     const { managedIndices, managedIndicesIsLoading, stateFilterSearchValue } = this.state;
-    const { selectedManagedIndices, selectedStateFilters, managedIndicesError } = this.props;
-
+    const { selectedManagedIndices, selectedStateFilters, managedIndicesError, useUpdatedUX } = this.props;
     const uniqueStates = selectedManagedIndices.reduce(
       (accu: Set<any>, selectedManagedIndex: { label: string; value?: ManagedIndexItem }) => {
         if (!selectedManagedIndex.value) return accu;
@@ -109,6 +109,7 @@ export default class ChangeManagedIndices extends Component<ChangeManagedIndices
               // @ts-ignore
               onChange={this.props.onChangeManagedIndices}
               onSearchChange={this.onManagedIndexSearchChange}
+              compressed={useUpdatedUX ? true : false}
             />
           </EuiFormRow>
 
@@ -121,6 +122,7 @@ export default class ChangeManagedIndices extends Component<ChangeManagedIndices
               // @ts-ignore
               onChange={this.props.onChangeStateFilters}
               onSearchChange={this.onStateFilterSearchChange}
+              compressed={useUpdatedUX ? true : false}
             />
           </EuiFormRow>
         </div>

diff --git a/public/pages/ChangePolicy/components/NewPolicy/NewPolicy.tsx b/public/pages/ChangePolicy/components/NewPolicy/NewPolicy.tsx
@@ -24,6 +24,7 @@ interface NewPolicyProps {
   onChangePolicy: (selectedPolicies: PolicyOption[]) => void;
   onChangeStateRadio: (optionId: string) => void;
   onStateSelectChange: (e: React.ChangeEvent<HTMLSelectElement>) => void;
+  useUpdatedUX?: boolean;
 }
 
 interface NewPolicyState {
@@ -70,7 +71,7 @@ export default class NewPolicy extends React.Component<NewPolicyProps, NewPolicy
   };
 
   render() {
-    const { selectedPolicies, stateRadioIdSelected, stateSelected, selectedPoliciesError } = this.props;
+    const { selectedPolicies, stateRadioIdSelected, stateSelected, selectedPoliciesError, useUpdatedUX } = this.props;
     const { policies, policiesIsLoading } = this.state;
 
     const hasSelectedPolicy = !!selectedPolicies.length;
@@ -113,6 +114,7 @@ export default class NewPolicy extends React.Component<NewPolicyProps, NewPolicy
               // @ts-ignore
               onChange={this.props.onChangePolicy}
               onSearchChange={this.onPolicySearchChange}
+              compressed={useUpdatedUX ? true : false}
             />
           </EuiFormRow>
 
@@ -129,6 +131,7 @@ export default class NewPolicy extends React.Component<NewPolicyProps, NewPolicy
               value={stateSelected}
               onChange={this.props.onStateSelectChange}
               aria-label="Start state for new policy"
+              compressed={useUpdatedUX ? true : false}
             />
           </EuiFormRow>
         </div>

diff --git a/public/pages/ChangePolicy/containers/ChangePolicy/ChangePolicy.tsx b/public/pages/ChangePolicy/containers/ChangePolicy/ChangePolicy.tsx
@@ -21,6 +21,7 @@ import { getUISettings } from "../../../../services/Services";
 interface ChangePolicyProps extends RouteComponentProps, DataSourceMenuProperties {
   managedIndexService: ManagedIndexService;
   indexService: IndexService;
+  useUpdatedUX?: boolean;
 }
 
 interface ChangePolicyState {
@@ -54,9 +55,7 @@ export class ChangePolicy extends Component<ChangePolicyProps, ChangePolicyState
   state: ChangePolicyState = ChangePolicy.emptyState;
 
   async componentDidMount(): Promise<void> {
-    const uiSettings = getUISettings();
-    const useUpdatedUX = uiSettings.get("home:useNewHomePage");
-    const breadCrumbs = useUpdatedUX
+    const breadCrumbs = this.props.useUpdatedUX
       ? [BREADCRUMBS.MANAGED_INDICES, BREADCRUMBS.CHANGE_POLICY]
       : [BREADCRUMBS.INDEX_MANAGEMENT, BREADCRUMBS.MANAGED_INDICES, BREADCRUMBS.CHANGE_POLICY];
     this.context.chrome.setBreadcrumbs(breadCrumbs);
@@ -148,7 +147,7 @@ export class ChangePolicy extends Component<ChangePolicyProps, ChangePolicyState
   };
 
   render() {
-    const { indexService, managedIndexService } = this.props;
+    const { indexService, managedIndexService, useUpdatedUX } = this.props;
     const {
       selectedPolicies,
       selectedManagedIndices,
@@ -160,9 +159,6 @@ export class ChangePolicy extends Component<ChangePolicyProps, ChangePolicyState
       hasSubmitted,
     } = this.state;
 
-    const uiSettings = getUISettings();
-    const useUpdatedUX = uiSettings.get("home:useNewHomePage");
-
     const Title = !useUpdatedUX
       ? () => {
           return (
@@ -189,6 +185,7 @@ export class ChangePolicy extends Component<ChangePolicyProps, ChangePolicyState
           onChangeManagedIndices={this.onChangeManagedIndices}
           onChangeStateFilters={this.onChangeStateFilters}
           managedIndicesError={hasSubmitted ? managedIndicesError : ""}
+          useUpdatedUX={useUpdatedUX}
         />
 
         <EuiSpacer />
@@ -204,18 +201,19 @@ export class ChangePolicy extends Component<ChangePolicyProps, ChangePolicyState
           onChangeStateRadio={this.onChangeStateRadio}
           onStateSelectChange={this.onStateSelectChange}
           selectedPoliciesError={hasSubmitted ? selectedPoliciesError : ""}
+          useUpdatedUX={useUpdatedUX}
         />
 
         <EuiSpacer />
 
         <EuiFlexGroup alignItems="center" justifyContent="flexEnd">
           <EuiFlexItem grow={false}>
-            <EuiButtonEmpty size={useUpdatedUX ? "s" : "l"} onClick={this.onCancel} data-test-subj="changePolicyCancelButton">
+            <EuiButtonEmpty size={useUpdatedUX ? "s" : undefined} onClick={this.onCancel} data-test-subj="changePolicyCancelButton">
               Cancel
             </EuiButtonEmpty>
           </EuiFlexItem>
           <EuiFlexItem grow={false}>
-            <EuiButton size={useUpdatedUX ? "s" : "m"} fill onClick={this.onSubmit} data-test-subj="changePolicyChangeButton">
+            <EuiButton size={useUpdatedUX ? "s" : undefined} fill onClick={this.onSubmit} data-test-subj="changePolicyChangeButton">
               Change
             </EuiButton>
           </EuiFlexItem>
@@ -228,5 +226,7 @@ export class ChangePolicy extends Component<ChangePolicyProps, ChangePolicyState
 export default function (props: Omit<ChangePolicyProps, keyof DataSourceMenuProperties>) {
   const dataSourceMenuProperties = useContext(DataSourceMenuContext);
   useUpdateUrlWithDataSourceProperties();
-  return <ChangePolicy {...props} {...dataSourceMenuProperties} />;
+  const uiSettings = getUISettings();
+  const useUpdatedUX = uiSettings.get("home:useNewHomePage");
+  return <ChangePolicy {...props} {...dataSourceMenuProperties} useUpdatedUX={useUpdatedUX} />;
 }
diff --git a/public/pages/ChangePolicy/containers/ChangePolicy/__snapshots__/ChangePolicy.test.tsx.snap b/public/pages/ChangePolicy/containers/ChangePolicy/__snapshots__/ChangePolicy.test.tsx.snap
@@ -4,6 +4,18 @@ exports[`<ChangePolicy /> spec renders the component 1`] = `
 <div
   style="padding: 0px 0px;"
 >
+  <div
+    class="euiFlexItem"
+  >
+    <h1
+      class="euiTitle euiTitle--large"
+    >
+      Change Policy
+    </h1>
+    <div
+      class="euiSpacer euiSpacer--l"
+    />
+  </div>
   <div
     class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
     style="padding-left: 0px; padding-right: 0px;"
@@ -424,7 +436,7 @@ exports[`<ChangePolicy /> spec renders the component 1`] = `
       class="euiFlexItem euiFlexItem--flexGrowZero"
     >
       <button
-        class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--large"
+        class="euiButtonEmpty euiButtonEmpty--primary"
         data-test-subj="changePolicyCancelButton"
         type="button"
       >

diff --git a/...es/ComposableTemplates/components/IndexControls/__snapshots__/IndexControls.test.tsx.snap b/...es/ComposableTemplates/components/IndexControls/__snapshots__/IndexControls.test.tsx.snap
@@ -57,7 +57,7 @@ exports[`<IndexControls /> spec renders the component 1`] = `
           class="euiPopover__anchor"
         >
           <button
-            class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--large euiFilterButton euiFilterButton-hasNotification euiFilterButton--hasIcon"
+            class="euiButtonEmpty euiButtonEmpty--text euiFilterButton euiFilterButton-hasNotification euiFilterButton--hasIcon"
             type="button"
           >
             <span

diff --git a/...eTemplates/containers/ComposableTemplates/__snapshots__/ComposableTemplates.test.tsx.snap b/...eTemplates/containers/ComposableTemplates/__snapshots__/ComposableTemplates.test.tsx.snap
@@ -149,7 +149,7 @@ exports[`<ComposableTemplates /> spec renders the component 1`] = `
               class="euiPopover__anchor"
             >
               <button
-                class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--large euiFilterButton euiFilterButton-hasNotification euiFilterButton--hasIcon"
+                class="euiButtonEmpty euiButtonEmpty--text euiFilterButton euiFilterButton-hasNotification euiFilterButton--hasIcon"
                 type="button"
               >
                 <span

diff --git a/public/pages/CreateIndex/containers/CreateIndex/CreateIndex.tsx b/public/pages/CreateIndex/containers/CreateIndex/CreateIndex.tsx
@@ -15,6 +15,7 @@ import { getUISettings } from "../../../../services/Services";
 
 interface CreateIndexPropsBase extends RouteComponentProps<{ index?: string; mode?: IndicesUpdateMode }> {
   isEdit?: boolean;
+  useUpdatedUX?: boolean;
 }
 
 interface CreateIndexProps extends CreateIndexPropsBase, DataSourceMenuProperties {}
@@ -32,9 +33,7 @@ export class CreateIndex extends Component<CreateIndexProps> {
 
   componentDidMount = async (): Promise<void> => {
     const isEdit = this.isEdit;
-    const uiSettings = getUISettings();
-    const useUpdatedUX = uiSettings.get("home:useNewHomePage");
-    const breadCrumbs = useUpdatedUX
+    const breadCrumbs = this.props.useUpdatedUX
       ? [BREADCRUMBS.INDICES, isEdit ? BREADCRUMBS.EDIT_INDEX : BREADCRUMBS.CREATE_INDEX]
       : [BREADCRUMBS.INDEX_MANAGEMENT, BREADCRUMBS.INDICES, isEdit ? BREADCRUMBS.EDIT_INDEX : BREADCRUMBS.CREATE_INDEX];
     this.context.chrome.setBreadcrumbs(breadCrumbs);
@@ -47,17 +46,15 @@ export class CreateIndex extends Component<CreateIndexProps> {
   render() {
     const isEdit = this.isEdit;
 
-    const uiSettings = getUISettings();
-    const useUpdatedUX = uiSettings.get("home:useNewHomePage");
-
-    return useUpdatedUX ? (
+    return this.props.useUpdatedUX ? (
       <div style={{ padding: "0px 0px" }}>
         <IndexForm
           index={this.index}
           mode={this.props.match.params.mode}
           onCancel={this.onCancel}
           onSubmitSuccess={() => this.props.history.push(ROUTES.INDICES)}
           dataSourceId={this.props.dataSourceId}
+          useUpdatedUX={this.props.useUpdatedUX}
         />
       </div>
     ) : (
@@ -72,6 +69,7 @@ export class CreateIndex extends Component<CreateIndexProps> {
           onCancel={this.onCancel}
           onSubmitSuccess={() => this.props.history.push(ROUTES.INDICES)}
           dataSourceId={this.props.dataSourceId}
+          useUpdatedUX={this.props.useUpdatedUX}
         />
       </div>
     );
@@ -81,5 +79,7 @@ export class CreateIndex extends Component<CreateIndexProps> {
 export default function (props: CreateIndexPropsBase) {
   const dataSourceMenuProperties = useContext(DataSourceMenuContext);
   useUpdateUrlWithDataSourceProperties();
-  return <CreateIndex {...props} {...dataSourceMenuProperties} />;
+  const uiSettings = getUISettings();
+  const useUpdatedUX = uiSettings.get("home:useNewHomePage");
+  return <CreateIndex {...props} {...dataSourceMenuProperties} useUpdatedUX={useUpdatedUX} />;
 }
diff --git a/public/pages/CreateIndex/containers/IndexForm/index.tsx b/public/pages/CreateIndex/containers/IndexForm/index.tsx
@@ -55,6 +55,7 @@ export interface IndexFormProps
   onCancel?: () => void;
   onSubmitSuccess?: (indexName: string) => void;
   hideButtons?: boolean;
+  useUpdatedUX?: boolean;
 }
 
 interface CreateIndexState {
@@ -423,7 +424,7 @@ export class IndexForm extends Component<IndexFormProps & { services: BrowserSer
 
   render() {
     const isEdit = this.isEdit;
-    const { hideButtons, readonly } = this.props;
+    const { hideButtons, readonly, useUpdatedUX } = this.props;
     const { indexDetail, isSubmitting, oldIndexDetail, loading } = this.state;
 
     if (loading) {
@@ -466,12 +467,18 @@ export class IndexForm extends Component<IndexFormProps & { services: BrowserSer
             <EuiSpacer />
             <EuiFlexGroup alignItems="center" justifyContent="flexEnd">
               <EuiFlexItem grow={false}>
-                <EuiButtonEmpty onClick={this.onCancel} data-test-subj="createIndexCancelButton">
+                <EuiButtonEmpty size={useUpdatedUX ? "s" : undefined} onClick={this.onCancel} data-test-subj="createIndexCancelButton">
                   Cancel
                 </EuiButtonEmpty>
               </EuiFlexItem>
               <EuiFlexItem grow={false}>
-                <EuiButton fill onClick={this.onSubmit} isLoading={isSubmitting} data-test-subj="createIndexCreateButton">
+                <EuiButton
+                  fill
+                  size={useUpdatedUX ? "s" : undefined}
+                  onClick={this.onSubmit}
+                  isLoading={isSubmitting}
+                  data-test-subj="createIndexCreateButton"
+                >
                   {isEdit ? "Update" : "Create"}
                 </EuiButton>
               </EuiFlexItem>