From e056e83f835559796daa4947821a7d0f72989298 Mon Sep 17 00:00:00 2001
From: Manideep Pabba <109986843+mpabba3003@users.noreply.github.com>
Date: Thu, 20 Oct 2022 14:29:59 -0500
Subject: [PATCH 1/3] [MD] Datasource management Edit/Update page UX updates
 (#2629)

Signed-off-by: mpabba3003 <amazonmanideep@gmail.com>
---
 CHANGELOG.md                                  |   1 +
 .../edit_data_source.test.tsx.snap            | 226 +++-----
 .../edit_data_source_form.test.tsx.snap       | 532 +++++++-----------
 .../edit_form/edit_data_source_form.test.tsx  |   2 +
 .../edit_form/edit_data_source_form.tsx       |  90 +--
 .../components/header/header.tsx              |   1 +
 .../edit_data_source.test.tsx                 |   2 +-
 .../edit_data_source/edit_data_source.tsx     |  64 +--
 .../data_source_management/public/types.ts    |   1 +
 9 files changed, 365 insertions(+), 554 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 017d697c4eac..bb0680e6c9f2 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -32,6 +32,7 @@ Inspired from [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 * [Vis Builder] Update vislib params and misc fixes ([2610](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/2610))
 * [MD] Add data source param to low-level search call in Discover ([#2431](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/2431))
 * [Multi DataSource] Skip data source view in index pattern step when pick default ([#2574](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/2574))
+* [Multi DataSource] Address UX comments on Edit Data source page ([#2629](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/2629))
 
 ### 🚞 Infrastructure
 
diff --git a/src/plugins/data_source_management/public/components/edit_data_source/__snapshots__/edit_data_source.test.tsx.snap b/src/plugins/data_source_management/public/components/edit_data_source/__snapshots__/edit_data_source.test.tsx.snap
index 85e08d85ecef..a3d004457a78 100644
--- a/src/plugins/data_source_management/public/components/edit_data_source/__snapshots__/edit_data_source.test.tsx.snap
+++ b/src/plugins/data_source_management/public/components/edit_data_source/__snapshots__/edit_data_source.test.tsx.snap
@@ -59,6 +59,7 @@ exports[`Datasource Management: Edit Datasource Wizard should load resources suc
       />
     </EuiSpacer>
     <EditDataSourceForm
+      displayToastMessage={[Function]}
       existingDataSource={
         Object {
           "auth": Object {
@@ -573,177 +574,82 @@ exports[`Datasource Management: Edit Datasource Wizard should load resources suc
                   className="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginMedium"
                 />
               </EuiHorizontalRule>
-              <EuiDescribedFormGroup
-                description={
-                  <p>
-                    <FormattedMessage
-                      defaultMessage="This connection information is used for reference in tables and when adding to a data source connection"
-                      id="dataSourcesManagement.editDataSource.endpointDescription"
-                      values={Object {}}
-                    />
-                  </p>
-                }
-                title={
-                  <h4>
-                    <FormattedMessage
-                      defaultMessage="Endpoint"
-                      id="dataSourcesManagement.editDataSource.endpointTitle"
-                      values={Object {}}
-                    />
-                  </h4>
-                }
+              <EuiFormRow
+                describedByIds={Array []}
+                display="row"
+                fullWidth={true}
+                hasChildLabel={true}
+                hasEmptyLabelSpace={false}
+                label="Endpoint URL"
+                labelType="label"
               >
                 <div
-                  className="euiDescribedFormGroup"
-                  role="group"
+                  className="euiFormRow euiFormRow--fullWidth"
+                  id="generated-id-row"
                 >
-                  <EuiFlexGroup
-                    gutterSize="l"
+                  <div
+                    className="euiFormRow__labelWrapper"
                   >
-                    <div
-                      className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
+                    <EuiFormLabel
+                      className="euiFormRow__label"
+                      htmlFor="generated-id"
+                      isFocused={false}
+                      type="label"
                     >
-                      <EuiFlexItem>
-                        <div
-                          className="euiFlexItem"
-                        >
-                          <EuiTitle
-                            className="euiDescribedFormGroup__title"
-                            size="xs"
-                          >
-                            <h4
-                              className="euiTitle euiTitle--xsmall euiDescribedFormGroup__title"
-                            >
-                              <FormattedMessage
-                                defaultMessage="Endpoint"
-                                id="dataSourcesManagement.editDataSource.endpointTitle"
-                                values={Object {}}
-                              >
-                                <span>
-                                  Endpoint
-                                </span>
-                              </FormattedMessage>
-                            </h4>
-                          </EuiTitle>
-                          <EuiText
-                            className="euiDescribedFormGroup__description"
-                            color="subdued"
-                            size="s"
-                          >
-                            <div
-                              className="euiText euiText--small euiDescribedFormGroup__description"
-                            >
-                              <EuiTextColor
-                                color="subdued"
-                                component="div"
-                              >
-                                <div
-                                  className="euiTextColor euiTextColor--subdued"
-                                >
-                                  <p>
-                                    <FormattedMessage
-                                      defaultMessage="This connection information is used for reference in tables and when adding to a data source connection"
-                                      id="dataSourcesManagement.editDataSource.endpointDescription"
-                                      values={Object {}}
-                                    >
-                                      <span>
-                                        This connection information is used for reference in tables and when adding to a data source connection
-                                      </span>
-                                    </FormattedMessage>
-                                  </p>
-                                </div>
-                              </EuiTextColor>
-                            </div>
-                          </EuiText>
-                        </div>
-                      </EuiFlexItem>
-                      <EuiFlexItem
-                        className="euiDescribedFormGroup__fields euiDescribedFormGroup__fieldPadding--xsmall"
+                      <label
+                        className="euiFormLabel euiFormRow__label"
+                        htmlFor="generated-id"
+                      >
+                        Endpoint URL
+                      </label>
+                    </EuiFormLabel>
+                  </div>
+                  <div
+                    className="euiFormRow__fieldWrapper"
+                  >
+                    <EuiFieldText
+                      aria-disabled={true}
+                      data-test-subj="editDatasourceEndpointField"
+                      disabled={true}
+                      fullWidth={true}
+                      id="generated-id"
+                      name="endpoint"
+                      onBlur={[Function]}
+                      onFocus={[Function]}
+                      value="https://test.com"
+                    >
+                      <EuiFormControlLayout
+                        fullWidth={true}
+                        inputId="generated-id"
                       >
                         <div
-                          className="euiFlexItem euiDescribedFormGroup__fields euiDescribedFormGroup__fieldPadding--xsmall"
+                          className="euiFormControlLayout euiFormControlLayout--fullWidth"
                         >
-                          <EuiFormRow
-                            describedByIds={Array []}
-                            display="row"
-                            fullWidth={false}
-                            hasChildLabel={true}
-                            hasEmptyLabelSpace={false}
-                            label="Endpoint URL"
-                            labelType="label"
+                          <div
+                            className="euiFormControlLayout__childrenWrapper"
                           >
-                            <div
-                              className="euiFormRow"
-                              id="generated-id-row"
-                            >
-                              <div
-                                className="euiFormRow__labelWrapper"
-                              >
-                                <EuiFormLabel
-                                  className="euiFormRow__label"
-                                  htmlFor="generated-id"
-                                  isFocused={false}
-                                  type="label"
-                                >
-                                  <label
-                                    className="euiFormLabel euiFormRow__label"
-                                    htmlFor="generated-id"
-                                  >
-                                    Endpoint URL
-                                  </label>
-                                </EuiFormLabel>
-                              </div>
-                              <div
-                                className="euiFormRow__fieldWrapper"
-                              >
-                                <EuiFieldText
-                                  aria-disabled={true}
-                                  data-test-subj="editDatasourceEndpointField"
-                                  disabled={true}
-                                  id="generated-id"
-                                  name="endpoint"
-                                  onBlur={[Function]}
-                                  onFocus={[Function]}
-                                  value="https://test.com"
-                                >
-                                  <EuiFormControlLayout
-                                    fullWidth={false}
-                                    inputId="generated-id"
-                                  >
-                                    <div
-                                      className="euiFormControlLayout"
-                                    >
-                                      <div
-                                        className="euiFormControlLayout__childrenWrapper"
-                                      >
-                                        <EuiValidatableControl>
-                                          <input
-                                            aria-disabled={true}
-                                            className="euiFieldText"
-                                            data-test-subj="editDatasourceEndpointField"
-                                            disabled={true}
-                                            id="generated-id"
-                                            name="endpoint"
-                                            onBlur={[Function]}
-                                            onFocus={[Function]}
-                                            type="text"
-                                            value="https://test.com"
-                                          />
-                                        </EuiValidatableControl>
-                                        <EuiFormControlLayoutIcons />
-                                      </div>
-                                    </div>
-                                  </EuiFormControlLayout>
-                                </EuiFieldText>
-                              </div>
-                            </div>
-                          </EuiFormRow>
+                            <EuiValidatableControl>
+                              <input
+                                aria-disabled={true}
+                                className="euiFieldText euiFieldText--fullWidth"
+                                data-test-subj="editDatasourceEndpointField"
+                                disabled={true}
+                                id="generated-id"
+                                name="endpoint"
+                                onBlur={[Function]}
+                                onFocus={[Function]}
+                                type="text"
+                                value="https://test.com"
+                              />
+                            </EuiValidatableControl>
+                            <EuiFormControlLayoutIcons />
+                          </div>
                         </div>
-                      </EuiFlexItem>
-                    </div>
-                  </EuiFlexGroup>
+                      </EuiFormControlLayout>
+                    </EuiFieldText>
+                  </div>
                 </div>
-              </EuiDescribedFormGroup>
+              </EuiFormRow>
             </div>
           </EuiPanel>
           <EuiSpacer
diff --git a/src/plugins/data_source_management/public/components/edit_data_source/components/edit_form/__snapshots__/edit_data_source_form.test.tsx.snap b/src/plugins/data_source_management/public/components/edit_data_source/components/edit_form/__snapshots__/edit_data_source_form.test.tsx.snap
index fbdc0767bf3d..1ce16bf131c2 100644
--- a/src/plugins/data_source_management/public/components/edit_data_source/components/edit_form/__snapshots__/edit_data_source_form.test.tsx.snap
+++ b/src/plugins/data_source_management/public/components/edit_data_source/components/edit_form/__snapshots__/edit_data_source_form.test.tsx.snap
@@ -5,6 +5,7 @@ exports[`Datasource Management: Edit Datasource Form Case 1: With Username & Pas
   locale="en"
 >
   <EditDataSourceForm
+    displayToastMessage={[MockFunction]}
     existingDataSource={
       Object {
         "auth": Object {
@@ -520,177 +521,82 @@ exports[`Datasource Management: Edit Datasource Form Case 1: With Username & Pas
                 className="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginMedium"
               />
             </EuiHorizontalRule>
-            <EuiDescribedFormGroup
-              description={
-                <p>
-                  <FormattedMessage
-                    defaultMessage="This connection information is used for reference in tables and when adding to a data source connection"
-                    id="dataSourcesManagement.editDataSource.endpointDescription"
-                    values={Object {}}
-                  />
-                </p>
-              }
-              title={
-                <h4>
-                  <FormattedMessage
-                    defaultMessage="Endpoint"
-                    id="dataSourcesManagement.editDataSource.endpointTitle"
-                    values={Object {}}
-                  />
-                </h4>
-              }
+            <EuiFormRow
+              describedByIds={Array []}
+              display="row"
+              fullWidth={true}
+              hasChildLabel={true}
+              hasEmptyLabelSpace={false}
+              label="Endpoint URL"
+              labelType="label"
             >
               <div
-                className="euiDescribedFormGroup"
-                role="group"
+                className="euiFormRow euiFormRow--fullWidth"
+                id="generated-id-row"
               >
-                <EuiFlexGroup
-                  gutterSize="l"
+                <div
+                  className="euiFormRow__labelWrapper"
                 >
-                  <div
-                    className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
+                  <EuiFormLabel
+                    className="euiFormRow__label"
+                    htmlFor="generated-id"
+                    isFocused={false}
+                    type="label"
                   >
-                    <EuiFlexItem>
-                      <div
-                        className="euiFlexItem"
-                      >
-                        <EuiTitle
-                          className="euiDescribedFormGroup__title"
-                          size="xs"
-                        >
-                          <h4
-                            className="euiTitle euiTitle--xsmall euiDescribedFormGroup__title"
-                          >
-                            <FormattedMessage
-                              defaultMessage="Endpoint"
-                              id="dataSourcesManagement.editDataSource.endpointTitle"
-                              values={Object {}}
-                            >
-                              <span>
-                                Endpoint
-                              </span>
-                            </FormattedMessage>
-                          </h4>
-                        </EuiTitle>
-                        <EuiText
-                          className="euiDescribedFormGroup__description"
-                          color="subdued"
-                          size="s"
-                        >
-                          <div
-                            className="euiText euiText--small euiDescribedFormGroup__description"
-                          >
-                            <EuiTextColor
-                              color="subdued"
-                              component="div"
-                            >
-                              <div
-                                className="euiTextColor euiTextColor--subdued"
-                              >
-                                <p>
-                                  <FormattedMessage
-                                    defaultMessage="This connection information is used for reference in tables and when adding to a data source connection"
-                                    id="dataSourcesManagement.editDataSource.endpointDescription"
-                                    values={Object {}}
-                                  >
-                                    <span>
-                                      This connection information is used for reference in tables and when adding to a data source connection
-                                    </span>
-                                  </FormattedMessage>
-                                </p>
-                              </div>
-                            </EuiTextColor>
-                          </div>
-                        </EuiText>
-                      </div>
-                    </EuiFlexItem>
-                    <EuiFlexItem
-                      className="euiDescribedFormGroup__fields euiDescribedFormGroup__fieldPadding--xsmall"
+                    <label
+                      className="euiFormLabel euiFormRow__label"
+                      htmlFor="generated-id"
+                    >
+                      Endpoint URL
+                    </label>
+                  </EuiFormLabel>
+                </div>
+                <div
+                  className="euiFormRow__fieldWrapper"
+                >
+                  <EuiFieldText
+                    aria-disabled={true}
+                    data-test-subj="editDatasourceEndpointField"
+                    disabled={true}
+                    fullWidth={true}
+                    id="generated-id"
+                    name="endpoint"
+                    onBlur={[Function]}
+                    onFocus={[Function]}
+                    value="https://test.com"
+                  >
+                    <EuiFormControlLayout
+                      fullWidth={true}
+                      inputId="generated-id"
                     >
                       <div
-                        className="euiFlexItem euiDescribedFormGroup__fields euiDescribedFormGroup__fieldPadding--xsmall"
+                        className="euiFormControlLayout euiFormControlLayout--fullWidth"
                       >
-                        <EuiFormRow
-                          describedByIds={Array []}
-                          display="row"
-                          fullWidth={false}
-                          hasChildLabel={true}
-                          hasEmptyLabelSpace={false}
-                          label="Endpoint URL"
-                          labelType="label"
+                        <div
+                          className="euiFormControlLayout__childrenWrapper"
                         >
-                          <div
-                            className="euiFormRow"
-                            id="generated-id-row"
-                          >
-                            <div
-                              className="euiFormRow__labelWrapper"
-                            >
-                              <EuiFormLabel
-                                className="euiFormRow__label"
-                                htmlFor="generated-id"
-                                isFocused={false}
-                                type="label"
-                              >
-                                <label
-                                  className="euiFormLabel euiFormRow__label"
-                                  htmlFor="generated-id"
-                                >
-                                  Endpoint URL
-                                </label>
-                              </EuiFormLabel>
-                            </div>
-                            <div
-                              className="euiFormRow__fieldWrapper"
-                            >
-                              <EuiFieldText
-                                aria-disabled={true}
-                                data-test-subj="editDatasourceEndpointField"
-                                disabled={true}
-                                id="generated-id"
-                                name="endpoint"
-                                onBlur={[Function]}
-                                onFocus={[Function]}
-                                value="https://test.com"
-                              >
-                                <EuiFormControlLayout
-                                  fullWidth={false}
-                                  inputId="generated-id"
-                                >
-                                  <div
-                                    className="euiFormControlLayout"
-                                  >
-                                    <div
-                                      className="euiFormControlLayout__childrenWrapper"
-                                    >
-                                      <EuiValidatableControl>
-                                        <input
-                                          aria-disabled={true}
-                                          className="euiFieldText"
-                                          data-test-subj="editDatasourceEndpointField"
-                                          disabled={true}
-                                          id="generated-id"
-                                          name="endpoint"
-                                          onBlur={[Function]}
-                                          onFocus={[Function]}
-                                          type="text"
-                                          value="https://test.com"
-                                        />
-                                      </EuiValidatableControl>
-                                      <EuiFormControlLayoutIcons />
-                                    </div>
-                                  </div>
-                                </EuiFormControlLayout>
-                              </EuiFieldText>
-                            </div>
-                          </div>
-                        </EuiFormRow>
+                          <EuiValidatableControl>
+                            <input
+                              aria-disabled={true}
+                              className="euiFieldText euiFieldText--fullWidth"
+                              data-test-subj="editDatasourceEndpointField"
+                              disabled={true}
+                              id="generated-id"
+                              name="endpoint"
+                              onBlur={[Function]}
+                              onFocus={[Function]}
+                              type="text"
+                              value="https://test.com"
+                            />
+                          </EuiValidatableControl>
+                          <EuiFormControlLayoutIcons />
+                        </div>
                       </div>
-                    </EuiFlexItem>
-                  </div>
-                </EuiFlexGroup>
+                    </EuiFormControlLayout>
+                  </EuiFieldText>
+                </div>
               </div>
-            </EuiDescribedFormGroup>
+            </EuiFormRow>
           </div>
         </EuiPanel>
         <EuiSpacer
@@ -1270,6 +1176,61 @@ exports[`Datasource Management: Edit Datasource Form Case 2: With No Authenticat
   locale="en"
 >
   <EditDataSourceForm
+    displayToastMessage={
+      [MockFunction] {
+        "calls": Array [
+          Array [
+            Object {
+              "auth": Object {
+                "credentials": Object {
+                  "password": "testPassword",
+                  "username": "test123",
+                },
+                "type": "username_password",
+              },
+              "description": "jest testing",
+              "endpoint": undefined,
+              "title": "create-test-ds",
+            },
+            true,
+          ],
+          Array [
+            Object {
+              "defaultMessage": "Password updated successfully.",
+              "id": "dataSourcesManagement.editDataSource.updatePasswordSuccessMsg",
+              "success": true,
+            },
+          ],
+          Array [
+            Object {
+              "auth": Object {
+                "credentials": Object {
+                  "username": "test123",
+                },
+                "type": "username_password",
+              },
+              "description": "testDescription",
+              "title": "create-test-ds",
+            },
+            false,
+          ],
+        ],
+        "results": Array [
+          Object {
+            "type": "return",
+            "value": undefined,
+          },
+          Object {
+            "type": "return",
+            "value": undefined,
+          },
+          Object {
+            "type": "return",
+            "value": undefined,
+          },
+        ],
+      }
+    }
     existingDataSource={
       Object {
         "auth": Object {
@@ -1307,6 +1268,14 @@ exports[`Datasource Management: Edit Datasource Form Case 2: With No Authenticat
               "endpoint": undefined,
               "title": "create-test-ds",
             },
+            true,
+          ],
+          Array [
+            Object {
+              "defaultMessage": "Password updated successfully.",
+              "id": "dataSourcesManagement.editDataSource.updatePasswordSuccessMsg",
+              "success": true,
+            },
           ],
           Array [
             Object {
@@ -1319,6 +1288,7 @@ exports[`Datasource Management: Edit Datasource Form Case 2: With No Authenticat
               "description": "testDescription",
               "title": "create-test-ds",
             },
+            false,
           ],
         ],
         "results": Array [
@@ -1330,6 +1300,10 @@ exports[`Datasource Management: Edit Datasource Form Case 2: With No Authenticat
             "type": "return",
             "value": undefined,
           },
+          Object {
+            "type": "return",
+            "value": undefined,
+          },
         ],
       }
     }
@@ -1349,6 +1323,14 @@ exports[`Datasource Management: Edit Datasource Form Case 2: With No Authenticat
               "endpoint": undefined,
               "title": "create-test-ds",
             },
+            true,
+          ],
+          Array [
+            Object {
+              "defaultMessage": "Password updated successfully.",
+              "id": "dataSourcesManagement.editDataSource.updatePasswordSuccessMsg",
+              "success": true,
+            },
           ],
           Array [
             Object {
@@ -1361,6 +1343,7 @@ exports[`Datasource Management: Edit Datasource Form Case 2: With No Authenticat
               "description": "testDescription",
               "title": "create-test-ds",
             },
+            false,
           ],
         ],
         "results": Array [
@@ -1372,6 +1355,10 @@ exports[`Datasource Management: Edit Datasource Form Case 2: With No Authenticat
             "type": "return",
             "value": undefined,
           },
+          Object {
+            "type": "return",
+            "value": undefined,
+          },
         ],
       }
     }
@@ -1864,177 +1851,82 @@ exports[`Datasource Management: Edit Datasource Form Case 2: With No Authenticat
                 className="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginMedium"
               />
             </EuiHorizontalRule>
-            <EuiDescribedFormGroup
-              description={
-                <p>
-                  <FormattedMessage
-                    defaultMessage="This connection information is used for reference in tables and when adding to a data source connection"
-                    id="dataSourcesManagement.editDataSource.endpointDescription"
-                    values={Object {}}
-                  />
-                </p>
-              }
-              title={
-                <h4>
-                  <FormattedMessage
-                    defaultMessage="Endpoint"
-                    id="dataSourcesManagement.editDataSource.endpointTitle"
-                    values={Object {}}
-                  />
-                </h4>
-              }
+            <EuiFormRow
+              describedByIds={Array []}
+              display="row"
+              fullWidth={true}
+              hasChildLabel={true}
+              hasEmptyLabelSpace={false}
+              label="Endpoint URL"
+              labelType="label"
             >
               <div
-                className="euiDescribedFormGroup"
-                role="group"
+                className="euiFormRow euiFormRow--fullWidth"
+                id="generated-id-row"
               >
-                <EuiFlexGroup
-                  gutterSize="l"
+                <div
+                  className="euiFormRow__labelWrapper"
                 >
-                  <div
-                    className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
+                  <EuiFormLabel
+                    className="euiFormRow__label"
+                    htmlFor="generated-id"
+                    isFocused={false}
+                    type="label"
                   >
-                    <EuiFlexItem>
-                      <div
-                        className="euiFlexItem"
-                      >
-                        <EuiTitle
-                          className="euiDescribedFormGroup__title"
-                          size="xs"
-                        >
-                          <h4
-                            className="euiTitle euiTitle--xsmall euiDescribedFormGroup__title"
-                          >
-                            <FormattedMessage
-                              defaultMessage="Endpoint"
-                              id="dataSourcesManagement.editDataSource.endpointTitle"
-                              values={Object {}}
-                            >
-                              <span>
-                                Endpoint
-                              </span>
-                            </FormattedMessage>
-                          </h4>
-                        </EuiTitle>
-                        <EuiText
-                          className="euiDescribedFormGroup__description"
-                          color="subdued"
-                          size="s"
-                        >
-                          <div
-                            className="euiText euiText--small euiDescribedFormGroup__description"
-                          >
-                            <EuiTextColor
-                              color="subdued"
-                              component="div"
-                            >
-                              <div
-                                className="euiTextColor euiTextColor--subdued"
-                              >
-                                <p>
-                                  <FormattedMessage
-                                    defaultMessage="This connection information is used for reference in tables and when adding to a data source connection"
-                                    id="dataSourcesManagement.editDataSource.endpointDescription"
-                                    values={Object {}}
-                                  >
-                                    <span>
-                                      This connection information is used for reference in tables and when adding to a data source connection
-                                    </span>
-                                  </FormattedMessage>
-                                </p>
-                              </div>
-                            </EuiTextColor>
-                          </div>
-                        </EuiText>
-                      </div>
-                    </EuiFlexItem>
-                    <EuiFlexItem
-                      className="euiDescribedFormGroup__fields euiDescribedFormGroup__fieldPadding--xsmall"
+                    <label
+                      className="euiFormLabel euiFormRow__label"
+                      htmlFor="generated-id"
+                    >
+                      Endpoint URL
+                    </label>
+                  </EuiFormLabel>
+                </div>
+                <div
+                  className="euiFormRow__fieldWrapper"
+                >
+                  <EuiFieldText
+                    aria-disabled={true}
+                    data-test-subj="editDatasourceEndpointField"
+                    disabled={true}
+                    fullWidth={true}
+                    id="generated-id"
+                    name="endpoint"
+                    onBlur={[Function]}
+                    onFocus={[Function]}
+                    value="https://test.com"
+                  >
+                    <EuiFormControlLayout
+                      fullWidth={true}
+                      inputId="generated-id"
                     >
                       <div
-                        className="euiFlexItem euiDescribedFormGroup__fields euiDescribedFormGroup__fieldPadding--xsmall"
+                        className="euiFormControlLayout euiFormControlLayout--fullWidth"
                       >
-                        <EuiFormRow
-                          describedByIds={Array []}
-                          display="row"
-                          fullWidth={false}
-                          hasChildLabel={true}
-                          hasEmptyLabelSpace={false}
-                          label="Endpoint URL"
-                          labelType="label"
+                        <div
+                          className="euiFormControlLayout__childrenWrapper"
                         >
-                          <div
-                            className="euiFormRow"
-                            id="generated-id-row"
-                          >
-                            <div
-                              className="euiFormRow__labelWrapper"
-                            >
-                              <EuiFormLabel
-                                className="euiFormRow__label"
-                                htmlFor="generated-id"
-                                isFocused={false}
-                                type="label"
-                              >
-                                <label
-                                  className="euiFormLabel euiFormRow__label"
-                                  htmlFor="generated-id"
-                                >
-                                  Endpoint URL
-                                </label>
-                              </EuiFormLabel>
-                            </div>
-                            <div
-                              className="euiFormRow__fieldWrapper"
-                            >
-                              <EuiFieldText
-                                aria-disabled={true}
-                                data-test-subj="editDatasourceEndpointField"
-                                disabled={true}
-                                id="generated-id"
-                                name="endpoint"
-                                onBlur={[Function]}
-                                onFocus={[Function]}
-                                value="https://test.com"
-                              >
-                                <EuiFormControlLayout
-                                  fullWidth={false}
-                                  inputId="generated-id"
-                                >
-                                  <div
-                                    className="euiFormControlLayout"
-                                  >
-                                    <div
-                                      className="euiFormControlLayout__childrenWrapper"
-                                    >
-                                      <EuiValidatableControl>
-                                        <input
-                                          aria-disabled={true}
-                                          className="euiFieldText"
-                                          data-test-subj="editDatasourceEndpointField"
-                                          disabled={true}
-                                          id="generated-id"
-                                          name="endpoint"
-                                          onBlur={[Function]}
-                                          onFocus={[Function]}
-                                          type="text"
-                                          value="https://test.com"
-                                        />
-                                      </EuiValidatableControl>
-                                      <EuiFormControlLayoutIcons />
-                                    </div>
-                                  </div>
-                                </EuiFormControlLayout>
-                              </EuiFieldText>
-                            </div>
-                          </div>
-                        </EuiFormRow>
+                          <EuiValidatableControl>
+                            <input
+                              aria-disabled={true}
+                              className="euiFieldText euiFieldText--fullWidth"
+                              data-test-subj="editDatasourceEndpointField"
+                              disabled={true}
+                              id="generated-id"
+                              name="endpoint"
+                              onBlur={[Function]}
+                              onFocus={[Function]}
+                              type="text"
+                              value="https://test.com"
+                            />
+                          </EuiValidatableControl>
+                          <EuiFormControlLayoutIcons />
+                        </div>
                       </div>
-                    </EuiFlexItem>
-                  </div>
-                </EuiFlexGroup>
+                    </EuiFormControlLayout>
+                  </EuiFieldText>
+                </div>
               </div>
-            </EuiDescribedFormGroup>
+            </EuiFormRow>
           </div>
         </EuiPanel>
         <EuiSpacer
diff --git a/src/plugins/data_source_management/public/components/edit_data_source/components/edit_form/edit_data_source_form.test.tsx b/src/plugins/data_source_management/public/components/edit_data_source/components/edit_form/edit_data_source_form.test.tsx
index 000b019b3ee3..bf63f9ff8125 100644
--- a/src/plugins/data_source_management/public/components/edit_data_source/components/edit_form/edit_data_source_form.test.tsx
+++ b/src/plugins/data_source_management/public/components/edit_data_source/components/edit_form/edit_data_source_form.test.tsx
@@ -58,6 +58,7 @@ describe('Datasource Management: Edit Datasource Form', () => {
             existingDatasourceNamesList={existingDatasourceNamesList}
             onDeleteDataSource={mockFn}
             handleSubmit={mockFn}
+            displayToastMessage={mockFn}
           />
         ),
         {
@@ -229,6 +230,7 @@ describe('Datasource Management: Edit Datasource Form', () => {
             existingDatasourceNamesList={existingDatasourceNamesList}
             onDeleteDataSource={mockFn}
             handleSubmit={mockFn}
+            displayToastMessage={mockFn}
           />
         ),
         {
diff --git a/src/plugins/data_source_management/public/components/edit_data_source/components/edit_form/edit_data_source_form.tsx b/src/plugins/data_source_management/public/components/edit_data_source/components/edit_form/edit_data_source_form.tsx
index 00c205fa1ade..bda8709cf509 100644
--- a/src/plugins/data_source_management/public/components/edit_data_source/components/edit_form/edit_data_source_form.tsx
+++ b/src/plugins/data_source_management/public/components/edit_data_source/components/edit_form/edit_data_source_form.tsx
@@ -29,6 +29,7 @@ import {
   credentialSourceOptions,
   DataSourceAttributes,
   DataSourceManagementContextValue,
+  ToastMessageItem,
   UsernamePasswordTypedContent,
 } from '../../../../types';
 import { context as contextType } from '../../../../../../opensearch_dashboards_react/public';
@@ -45,6 +46,7 @@ export interface EditDataSourceProps {
   existingDatasourceNamesList: string[];
   handleSubmit: (formValues: DataSourceAttributes) => void;
   onDeleteDataSource?: () => void;
+  displayToastMessage: (info: ToastMessageItem) => void;
 }
 export interface EditDataSourceState {
   formErrorsByField: CreateEditDataSourceValidation;
@@ -57,6 +59,7 @@ export interface EditDataSourceState {
   };
   showUpdatePasswordModal: boolean;
   showUpdateOptions: boolean;
+  isLoading: boolean;
 }
 
 export class EditDataSourceForm extends React.Component<EditDataSourceProps, EditDataSourceState> {
@@ -81,6 +84,7 @@ export class EditDataSourceForm extends React.Component<EditDataSourceProps, Edi
       },
       showUpdatePasswordModal: false,
       showUpdateOptions: false,
+      isLoading: false,
     };
   }
 
@@ -208,7 +212,7 @@ export class EditDataSourceForm extends React.Component<EditDataSourceProps, Edi
     });
   };
 
-  onClickUpdateDataSource = () => {
+  onClickUpdateDataSource = async () => {
     if (this.isFormValid()) {
       // update data source endpoint is currently not supported/allowed
       const formValues: DataSourceAttributes = {
@@ -225,7 +229,19 @@ export class EditDataSourceForm extends React.Component<EditDataSourceProps, Edi
       }
 
       /* Submit */
-      this.props.handleSubmit(formValues);
+      this.setState({ isLoading: true });
+      try {
+        await this.props.handleSubmit(formValues, false);
+        this.setState({ showUpdateOptions: false });
+        this.setFormValuesForEditMode();
+      } catch (e) {
+        this.props.displayToastMessage({
+          id: 'dataSourcesManagement.editDataSource.editDataSourceFailMsg',
+          defaultMessage: 'Updating the Data Source failed with some errors.',
+        });
+      } finally {
+        this.setState({ isLoading: false });
+      }
     }
   };
 
@@ -247,7 +263,7 @@ export class EditDataSourceForm extends React.Component<EditDataSourceProps, Edi
   };
 
   /* Update password */
-  updatePassword = (password: string) => {
+  updatePassword = async (password: string) => {
     const { title, description, auth } = this.props.existingDataSource;
     const updateAttributes: DataSourceAttributes = {
       title,
@@ -261,8 +277,21 @@ export class EditDataSourceForm extends React.Component<EditDataSourceProps, Edi
         },
       },
     };
-    this.props.handleSubmit(updateAttributes);
     this.closePasswordModal();
+
+    try {
+      await this.props.handleSubmit(updateAttributes, true);
+      this.props.displayToastMessage({
+        id: 'dataSourcesManagement.editDataSource.updatePasswordSuccessMsg',
+        defaultMessage: 'Password updated successfully.',
+        success: true,
+      });
+    } catch (e) {
+      this.props.displayToastMessage({
+        id: 'dataSourcesManagement.editDataSource.updatePasswordFailMsg',
+        defaultMessage: 'Updating the stored password failed with some errors.',
+      });
+    }
   };
 
   /* Render methods */
@@ -426,44 +455,22 @@ export class EditDataSourceForm extends React.Component<EditDataSourceProps, Edi
         </EuiText>
 
         <EuiHorizontalRule margin="m" />
-
-        <EuiDescribedFormGroup
-          title={
-            <h4>
-              {
-                <FormattedMessage
-                  id="dataSourcesManagement.editDataSource.endpointTitle"
-                  defaultMessage="Endpoint"
-                />
-              }
-            </h4>
-          }
-          description={
-            <p>
-              {
-                <FormattedMessage
-                  id="dataSourcesManagement.editDataSource.endpointDescription"
-                  defaultMessage="This connection information is used for reference in tables and when adding to a data source connection"
-                />
-              }
-            </p>
-          }
+        {/* Endpoint */}
+        <EuiFormRow
+          fullWidth={true}
+          label={i18n.translate('dataSourcesManagement.editDataSource.endpointURL', {
+            defaultMessage: 'Endpoint URL',
+          })}
         >
-          {/* Endpoint */}
-          <EuiFormRow
-            label={i18n.translate('dataSourcesManagement.editDataSource.endpointURL', {
-              defaultMessage: 'Endpoint URL',
-            })}
-          >
-            <EuiFieldText
-              name="endpoint"
-              value={this.props.existingDataSource.endpoint}
-              disabled={true}
-              aria-disabled={true}
-              data-test-subj="editDatasourceEndpointField"
-            />
-          </EuiFormRow>
-        </EuiDescribedFormGroup>
+          <EuiFieldText
+            name="endpoint"
+            value={this.props.existingDataSource.endpoint}
+            disabled={true}
+            fullWidth={true}
+            aria-disabled={true}
+            data-test-subj="editDatasourceEndpointField"
+          />
+        </EuiFormRow>
       </EuiPanel>
     );
   };
@@ -653,6 +660,7 @@ export class EditDataSourceForm extends React.Component<EditDataSourceProps, Edi
               fill
               size="s"
               iconType="check"
+              isLoading={this.state.isLoading}
               onClick={this.onClickUpdateDataSource}
               data-test-subj="datasource-edit-saveButton"
             >
diff --git a/src/plugins/data_source_management/public/components/edit_data_source/components/header/header.tsx b/src/plugins/data_source_management/public/components/edit_data_source/components/header/header.tsx
index 88e050394b89..8a73bcccc275 100644
--- a/src/plugins/data_source_management/public/components/edit_data_source/components/header/header.tsx
+++ b/src/plugins/data_source_management/public/components/edit_data_source/components/header/header.tsx
@@ -80,6 +80,7 @@ export const Header = ({
             confirmButtonText={i18n.translate('dataSourcesManagement.editDataSource.delete', {
               defaultMessage: 'Delete',
             })}
+            buttonColor="danger"
             defaultFocusedButton="confirm"
             data-test-subj="editDatasourceDeleteConfirmModal"
           >
diff --git a/src/plugins/data_source_management/public/components/edit_data_source/edit_data_source.test.tsx b/src/plugins/data_source_management/public/components/edit_data_source/edit_data_source.test.tsx
index d8bd006f9dc1..d11f8c8bc9da 100644
--- a/src/plugins/data_source_management/public/components/edit_data_source/edit_data_source.test.tsx
+++ b/src/plugins/data_source_management/public/components/edit_data_source/edit_data_source.test.tsx
@@ -103,7 +103,7 @@ describe('Datasource Management: Edit Datasource Wizard', () => {
       expect(history.push).toBeCalledWith('');
     });
     test('should fail to update datasource', async () => {
-      spyOn(utils, 'updateDataSourceById').and.throwError('error');
+      spyOn(utils, 'updateDataSourceById').and.returnValue(new Error(''));
       await act(async () => {
         // @ts-ignore
         await component.find(formIdentifier).first().prop('handleSubmit')(
diff --git a/src/plugins/data_source_management/public/components/edit_data_source/edit_data_source.tsx b/src/plugins/data_source_management/public/components/edit_data_source/edit_data_source.tsx
index 24e6448df35a..9bbaecfccce4 100644
--- a/src/plugins/data_source_management/public/components/edit_data_source/edit_data_source.tsx
+++ b/src/plugins/data_source_management/public/components/edit_data_source/edit_data_source.tsx
@@ -51,49 +51,48 @@ export const EditDataSource: React.FunctionComponent<RouteComponentProps<{ id: s
   /* Fetch data source by id*/
   useEffectOnce(() => {
     (async function () {
-      setIsLoading(true);
-      try {
-        const fetchDataSourceById = await getDataSourceById(dataSourceID, savedObjects.client);
-        const listOfDataSources: DataSourceTableItem[] = await getDataSources(savedObjects.client);
-        if (fetchDataSourceById) {
-          setDataSource(fetchDataSourceById);
-          setBreadcrumbs(getEditBreadcrumbs(fetchDataSourceById));
-        }
-        if (Array.isArray(listOfDataSources) && listOfDataSources.length) {
-          setExistingDatasourceNamesList(
-            listOfDataSources.map((datasource) => datasource.title?.toLowerCase())
-          );
-        }
-      } catch (e) {
-        setDataSource(defaultDataSource);
-        handleDisplayToastMessage({
-          id: 'dataSourcesManagement.editDataSource.editDataSourceFailMsg',
-          defaultMessage: 'Unable to find the Data Source.',
-        });
-        props.history.push('');
-      } finally {
-        setIsLoading(false);
-      }
+      await fetchDataSourceDetailsByID();
     })();
   });
 
-  /* Handle submit - create data source*/
-  const handleSubmit = async (attributes: DataSourceAttributes) => {
+  const fetchDataSourceDetailsByID = async () => {
     setIsLoading(true);
     try {
-      await updateDataSourceById(savedObjects.client, dataSourceID, attributes);
-      props.history.push('');
+      const fetchDataSourceById = await getDataSourceById(dataSourceID, savedObjects.client);
+      const listOfDataSources: DataSourceTableItem[] = await getDataSources(savedObjects.client);
+      if (fetchDataSourceById) {
+        setDataSource(fetchDataSourceById);
+        setBreadcrumbs(getEditBreadcrumbs(fetchDataSourceById));
+      }
+      if (Array.isArray(listOfDataSources) && listOfDataSources.length) {
+        setExistingDatasourceNamesList(
+          listOfDataSources.map((datasource) => datasource.title?.toLowerCase())
+        );
+      }
     } catch (e) {
-      setIsLoading(false);
+      setDataSource(defaultDataSource);
       handleDisplayToastMessage({
-        id: 'dataSourcesManagement.editDataSource.editDataSourceFailMsg',
-        defaultMessage: 'Updating the Data Source failed with some errors. Please try it again.',
+        id: 'dataSourcesManagement.editDataSource.fetchDataSourceFailMsg',
+        defaultMessage: 'Unable to find the Data Source.',
       });
+      props.history.push('');
+    } finally {
+      setIsLoading(false);
     }
   };
 
-  const handleDisplayToastMessage = ({ id, defaultMessage }: ToastMessageItem) => {
-    toasts.addWarning(i18n.translate(id, { defaultMessage }));
+  /* Handle submit - create data source*/
+  const handleSubmit = async (attributes: DataSourceAttributes) => {
+    await updateDataSourceById(savedObjects.client, dataSourceID, attributes);
+    await fetchDataSourceDetailsByID();
+  };
+
+  const handleDisplayToastMessage = ({ id, defaultMessage, success }: ToastMessageItem) => {
+    if (success) {
+      toasts.addSuccess(i18n.translate(id, { defaultMessage }));
+    } else {
+      toasts.addWarning(i18n.translate(id, { defaultMessage }));
+    }
   };
 
   /* Handle delete - data source*/
@@ -124,6 +123,7 @@ export const EditDataSource: React.FunctionComponent<RouteComponentProps<{ id: s
             existingDatasourceNamesList={existingDatasourceNamesList}
             onDeleteDataSource={handleDelete}
             handleSubmit={handleSubmit}
+            displayToastMessage={handleDisplayToastMessage}
           />
         ) : null}
         {isLoading || !dataSource?.endpoint ? <LoadingMask /> : null}
diff --git a/src/plugins/data_source_management/public/types.ts b/src/plugins/data_source_management/public/types.ts
index a689cb4a593e..fe52466df1e5 100644
--- a/src/plugins/data_source_management/public/types.ts
+++ b/src/plugins/data_source_management/public/types.ts
@@ -42,6 +42,7 @@ export interface DataSourceTableItem {
 export interface ToastMessageItem {
   id: string;
   defaultMessage: string;
+  success?: boolean;
 }
 
 export type DataSourceManagementContextValue = OpenSearchDashboardsReactContextValue<

From fb4bdfa7bfd10878481814862fc794debeac272e Mon Sep 17 00:00:00 2001
From: Yibo Wang <109543558+yibow98@users.noreply.github.com>
Date: Thu, 20 Oct 2022 13:25:24 -0700
Subject: [PATCH 2/3] [MD]Address comments from UX signoff meeting-Datasource
 list and create page (#2625)

Signed-off-by: Yibo Wang <yibow@amazon.com>
---
 CHANGELOG.md                                  |  1 +
 .../create_button/create_button.test.tsx      |  3 +-
 .../create_button/create_button.tsx           |  8 ++--
 .../create_data_source_wizard.test.tsx.snap   | 22 +++++++--
 .../create_data_source_form.test.tsx.snap     | 44 ++++++++++++++----
 .../create_form/create_data_source_form.tsx   |  3 +-
 .../create_data_source_wizard.tsx             |  2 +-
 .../data_source_table.test.tsx.snap           | 46 ++++++++++---------
 .../data_source_table/data_source_table.tsx   | 16 +++++--
 .../experimental_callout.tsx                  |  4 +-
 10 files changed, 104 insertions(+), 45 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index bb0680e6c9f2..e3135bd2d397 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -24,6 +24,7 @@ Inspired from [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 * [Multi DataSource] Make text content dynamically translated & update unit tests ([#2570](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/2570))
 * [Vis Builder] Change classname prefix wiz to vb ([#2581](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/2581/files))
 * [Vis Builder] Change wizard to vis_builder in file names and paths ([#2587](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/2587))
+* [Multi DataSource] Address UX comments on Data source list and create page ([#2625](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/2625))
 
 ### 🐛 Bug Fixes
 * [Vis Builder] Fixes auto bounds for timeseries bar chart visualization ([2401](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/2401))
diff --git a/src/plugins/data_source_management/public/components/create_button/create_button.test.tsx b/src/plugins/data_source_management/public/components/create_button/create_button.test.tsx
index 64906045b004..f54aef129df3 100644
--- a/src/plugins/data_source_management/public/components/create_button/create_button.test.tsx
+++ b/src/plugins/data_source_management/public/components/create_button/create_button.test.tsx
@@ -13,10 +13,11 @@ const createButtonIdentifier = `[data-test-subj="createDataSourceButton"]`;
 
 describe('CreateButton', () => {
   const history = (scopedHistoryMock.create() as unknown) as ScopedHistory;
+  const dataTestSubj = 'createDataSourceButton';
   let component: ShallowWrapper<any, Readonly<{}>, React.Component<{}, {}, any>>;
 
   beforeEach(() => {
-    component = shallow(<CreateButton history={history} />);
+    component = shallow(<CreateButton history={history} dataTestSubj={dataTestSubj} />);
   });
 
   it('should render normally', () => {
diff --git a/src/plugins/data_source_management/public/components/create_button/create_button.tsx b/src/plugins/data_source_management/public/components/create_button/create_button.tsx
index 072eb8af6029..7c893af0209d 100644
--- a/src/plugins/data_source_management/public/components/create_button/create_button.tsx
+++ b/src/plugins/data_source_management/public/components/create_button/create_button.tsx
@@ -11,13 +11,15 @@ import { FormattedMessage } from '@osd/i18n/react';
 
 interface Props {
   history: History;
+  isEmptyState?: boolean;
+  dataTestSubj: string;
 }
 
-export const CreateButton = ({ history }: Props) => {
+export const CreateButton = ({ history, isEmptyState, dataTestSubj }: Props) => {
   return (
     <EuiButton
-      data-test-subj="createDataSourceButton"
-      fill={true}
+      data-test-subj={dataTestSubj}
+      fill={isEmptyState ? false : true}
       onClick={() => history.push('/create')}
     >
       <FormattedMessage
diff --git a/src/plugins/data_source_management/public/components/create_data_source_wizard/__snapshots__/create_data_source_wizard.test.tsx.snap b/src/plugins/data_source_management/public/components/create_data_source_wizard/__snapshots__/create_data_source_wizard.test.tsx.snap
index a7c32d540d27..b4331e26f79d 100644
--- a/src/plugins/data_source_management/public/components/create_data_source_wizard/__snapshots__/create_data_source_wizard.test.tsx.snap
+++ b/src/plugins/data_source_management/public/components/create_data_source_wizard/__snapshots__/create_data_source_wizard.test.tsx.snap
@@ -112,6 +112,13 @@ exports[`Datasource Management: Create Datasource Wizard case1: should load reso
                 </div>
               </EuiFlexGroup>
             </Header>
+            <EuiSpacer
+              size="m"
+            >
+              <div
+                className="euiSpacer euiSpacer--m"
+              />
+            </EuiSpacer>
             <EuiForm
               data-test-subj="data-source-creation"
             >
@@ -401,7 +408,7 @@ exports[`Datasource Management: Create Datasource Wizard case1: should load reso
                         onBlur={[Function]}
                         onChange={[Function]}
                         onFocus={[Function]}
-                        placeholder="Sample URL: https://connectionurl.com"
+                        placeholder="https://connectionurl.com"
                         value=""
                       >
                         <EuiFormControlLayout
@@ -425,7 +432,7 @@ exports[`Datasource Management: Create Datasource Wizard case1: should load reso
                                   onBlur={[Function]}
                                   onChange={[Function]}
                                   onFocus={[Function]}
-                                  placeholder="Sample URL: https://connectionurl.com"
+                                  placeholder="https://connectionurl.com"
                                   type="text"
                                   value=""
                                 />
@@ -1079,6 +1086,13 @@ exports[`Datasource Management: Create Datasource Wizard case2: should fail to l
                 </div>
               </EuiFlexGroup>
             </Header>
+            <EuiSpacer
+              size="m"
+            >
+              <div
+                className="euiSpacer euiSpacer--m"
+              />
+            </EuiSpacer>
             <EuiForm
               data-test-subj="data-source-creation"
             >
@@ -1368,7 +1382,7 @@ exports[`Datasource Management: Create Datasource Wizard case2: should fail to l
                         onBlur={[Function]}
                         onChange={[Function]}
                         onFocus={[Function]}
-                        placeholder="Sample URL: https://connectionurl.com"
+                        placeholder="https://connectionurl.com"
                         value=""
                       >
                         <EuiFormControlLayout
@@ -1392,7 +1406,7 @@ exports[`Datasource Management: Create Datasource Wizard case2: should fail to l
                                   onBlur={[Function]}
                                   onChange={[Function]}
                                   onFocus={[Function]}
-                                  placeholder="Sample URL: https://connectionurl.com"
+                                  placeholder="https://connectionurl.com"
                                   type="text"
                                   value=""
                                 />
diff --git a/src/plugins/data_source_management/public/components/create_data_source_wizard/components/create_form/__snapshots__/create_data_source_form.test.tsx.snap b/src/plugins/data_source_management/public/components/create_data_source_wizard/components/create_form/__snapshots__/create_data_source_form.test.tsx.snap
index 1006968b632f..fcd197cc0827 100644
--- a/src/plugins/data_source_management/public/components/create_data_source_wizard/components/create_form/__snapshots__/create_data_source_form.test.tsx.snap
+++ b/src/plugins/data_source_management/public/components/create_data_source_wizard/components/create_form/__snapshots__/create_data_source_form.test.tsx.snap
@@ -140,6 +140,13 @@ exports[`Datasource Management: Create Datasource form should create data source
               </div>
             </EuiFlexGroup>
           </Header>
+          <EuiSpacer
+            size="m"
+          >
+            <div
+              className="euiSpacer euiSpacer--m"
+            />
+          </EuiSpacer>
           <EuiForm
             data-test-subj="data-source-creation"
           >
@@ -429,7 +436,7 @@ exports[`Datasource Management: Create Datasource form should create data source
                       onBlur={[Function]}
                       onChange={[Function]}
                       onFocus={[Function]}
-                      placeholder="Sample URL: https://connectionurl.com"
+                      placeholder="https://connectionurl.com"
                       value="https://test.com"
                     >
                       <EuiFormControlLayout
@@ -453,7 +460,7 @@ exports[`Datasource Management: Create Datasource form should create data source
                                 onBlur={[Function]}
                                 onChange={[Function]}
                                 onFocus={[Function]}
-                                placeholder="Sample URL: https://connectionurl.com"
+                                placeholder="https://connectionurl.com"
                                 type="text"
                                 value="https://test.com"
                               />
@@ -867,6 +874,13 @@ exports[`Datasource Management: Create Datasource form should create data source
               </div>
             </EuiFlexGroup>
           </Header>
+          <EuiSpacer
+            size="m"
+          >
+            <div
+              className="euiSpacer euiSpacer--m"
+            />
+          </EuiSpacer>
           <EuiForm
             data-test-subj="data-source-creation"
           >
@@ -1156,7 +1170,7 @@ exports[`Datasource Management: Create Datasource form should create data source
                       onBlur={[Function]}
                       onChange={[Function]}
                       onFocus={[Function]}
-                      placeholder="Sample URL: https://connectionurl.com"
+                      placeholder="https://connectionurl.com"
                       value="https://test.com"
                     >
                       <EuiFormControlLayout
@@ -1180,7 +1194,7 @@ exports[`Datasource Management: Create Datasource form should create data source
                                 onBlur={[Function]}
                                 onChange={[Function]}
                                 onFocus={[Function]}
-                                placeholder="Sample URL: https://connectionurl.com"
+                                placeholder="https://connectionurl.com"
                                 type="text"
                                 value="https://test.com"
                               />
@@ -1792,6 +1806,13 @@ exports[`Datasource Management: Create Datasource form should render normally 1`
               </div>
             </EuiFlexGroup>
           </Header>
+          <EuiSpacer
+            size="m"
+          >
+            <div
+              className="euiSpacer euiSpacer--m"
+            />
+          </EuiSpacer>
           <EuiForm
             data-test-subj="data-source-creation"
           >
@@ -2081,7 +2102,7 @@ exports[`Datasource Management: Create Datasource form should render normally 1`
                       onBlur={[Function]}
                       onChange={[Function]}
                       onFocus={[Function]}
-                      placeholder="Sample URL: https://connectionurl.com"
+                      placeholder="https://connectionurl.com"
                       value=""
                     >
                       <EuiFormControlLayout
@@ -2105,7 +2126,7 @@ exports[`Datasource Management: Create Datasource form should render normally 1`
                                 onBlur={[Function]}
                                 onChange={[Function]}
                                 onFocus={[Function]}
-                                placeholder="Sample URL: https://connectionurl.com"
+                                placeholder="https://connectionurl.com"
                                 type="text"
                                 value=""
                               />
@@ -2717,6 +2738,13 @@ exports[`Datasource Management: Create Datasource form should throw validation e
               </div>
             </EuiFlexGroup>
           </Header>
+          <EuiSpacer
+            size="m"
+          >
+            <div
+              className="euiSpacer euiSpacer--m"
+            />
+          </EuiSpacer>
           <EuiForm
             data-test-subj="data-source-creation"
           >
@@ -3023,7 +3051,7 @@ exports[`Datasource Management: Create Datasource form should throw validation e
                       onBlur={[Function]}
                       onChange={[Function]}
                       onFocus={[Function]}
-                      placeholder="Sample URL: https://connectionurl.com"
+                      placeholder="https://connectionurl.com"
                       value="https://test.com"
                     >
                       <EuiFormControlLayout
@@ -3047,7 +3075,7 @@ exports[`Datasource Management: Create Datasource form should throw validation e
                                 onBlur={[Function]}
                                 onChange={[Function]}
                                 onFocus={[Function]}
-                                placeholder="Sample URL: https://connectionurl.com"
+                                placeholder="https://connectionurl.com"
                                 type="text"
                                 value="https://test.com"
                               />
diff --git a/src/plugins/data_source_management/public/components/create_data_source_wizard/components/create_form/create_data_source_form.tsx b/src/plugins/data_source_management/public/components/create_data_source_wizard/components/create_form/create_data_source_form.tsx
index e5d779296a58..429790231a5c 100644
--- a/src/plugins/data_source_management/public/components/create_data_source_wizard/components/create_form/create_data_source_form.tsx
+++ b/src/plugins/data_source_management/public/components/create_data_source_wizard/components/create_form/create_data_source_form.tsx
@@ -287,6 +287,7 @@ export class CreateDataSourceForm extends React.Component<
     return (
       <EuiPageContent>
         {this.renderHeader()}
+        <EuiSpacer size="m" />
         <EuiForm data-test-subj="data-source-creation">
           {/* Endpoint section */}
           {this.renderSectionHeader(
@@ -354,7 +355,7 @@ export class CreateDataSourceForm extends React.Component<
               placeholder={i18n.translate(
                 'dataSourcesManagement.createDataSource.endpointPlaceholder',
                 {
-                  defaultMessage: 'Sample URL: https://connectionurl.com',
+                  defaultMessage: 'https://connectionurl.com',
                 }
               )}
               isInvalid={!!this.state.formErrorsByField.endpoint.length}
diff --git a/src/plugins/data_source_management/public/components/create_data_source_wizard/create_data_source_wizard.tsx b/src/plugins/data_source_management/public/components/create_data_source_wizard/create_data_source_wizard.tsx
index aaa50435d5e3..08ac198c7561 100644
--- a/src/plugins/data_source_management/public/components/create_data_source_wizard/create_data_source_wizard.tsx
+++ b/src/plugins/data_source_management/public/components/create_data_source_wizard/create_data_source_wizard.tsx
@@ -75,7 +75,7 @@ export const CreateDataSourceWizard: React.FunctionComponent<CreateDataSourceWiz
   };
 
   const handleDisplayToastMessage = ({ id, defaultMessage }: ToastMessageItem) => {
-    toasts.addWarning(i18n.translate(id, { defaultMessage }));
+    toasts.addDanger(i18n.translate(id, { defaultMessage }));
   };
 
   /* Render the creation wizard */
diff --git a/src/plugins/data_source_management/public/components/data_source_table/__snapshots__/data_source_table.test.tsx.snap b/src/plugins/data_source_management/public/components/data_source_table/__snapshots__/data_source_table.test.tsx.snap
index abd6fc95c88d..53e2fac37130 100644
--- a/src/plugins/data_source_management/public/components/data_source_table/__snapshots__/data_source_table.test.tsx.snap
+++ b/src/plugins/data_source_management/public/components/data_source_table/__snapshots__/data_source_table.test.tsx.snap
@@ -108,6 +108,7 @@ exports[`DataSourceTable should get datasources failed should render empty table
                   className="euiFlexItem euiFlexItem--flexGrowZero"
                 >
                   <CreateButton
+                    dataTestSubj="createDataSourceButton"
                     history={
                       Object {
                         "action": "PUSH",
@@ -245,6 +246,7 @@ exports[`DataSourceTable should get datasources failed should render empty table
                 />
               </EuiSpacer>
               <CreateButton
+                dataTestSubj="createDataSourceButtonEmptyState"
                 history={
                   Object {
                     "action": "PUSH",
@@ -267,25 +269,26 @@ exports[`DataSourceTable should get datasources failed should render empty table
                     "replace": [MockFunction],
                   }
                 }
+                isEmptyState={true}
               >
                 <EuiButton
-                  data-test-subj="createDataSourceButton"
-                  fill={true}
+                  data-test-subj="createDataSourceButtonEmptyState"
+                  fill={false}
                   onClick={[Function]}
                 >
                   <EuiButtonDisplay
                     baseClassName="euiButton"
-                    data-test-subj="createDataSourceButton"
+                    data-test-subj="createDataSourceButtonEmptyState"
                     disabled={false}
                     element="button"
-                    fill={true}
+                    fill={false}
                     isDisabled={false}
                     onClick={[Function]}
                     type="button"
                   >
                     <button
-                      className="euiButton euiButton--primary euiButton--fill"
-                      data-test-subj="createDataSourceButton"
+                      className="euiButton euiButton--primary"
+                      data-test-subj="createDataSourceButtonEmptyState"
                       disabled={false}
                       onClick={[Function]}
                       style={
@@ -527,6 +530,7 @@ exports[`DataSourceTable should get datasources successful should render normall
                   className="euiFlexItem euiFlexItem--flexGrowZero"
                 >
                   <CreateButton
+                    dataTestSubj="createDataSourceButton"
                     history={
                       Object {
                         "action": "PUSH",
@@ -701,7 +705,7 @@ exports[`DataSourceTable should get datasources successful should render normall
                 Object {
                   "dataType": "string",
                   "field": "title",
-                  "name": "Datasource",
+                  "name": "Title",
                   "render": [Function],
                   "sortable": [Function],
                 },
@@ -1021,7 +1025,7 @@ exports[`DataSourceTable should get datasources successful should render normall
                     Object {
                       "dataType": "string",
                       "field": "title",
-                      "name": "Datasource",
+                      "name": "Title",
                       "render": [Function],
                       "sortable": [Function],
                     },
@@ -1095,7 +1099,7 @@ exports[`DataSourceTable should get datasources successful should render normall
                     "allowNeutralSort": false,
                     "sort": Object {
                       "direction": "asc",
-                      "field": "Datasource",
+                      "field": "Title",
                     },
                   }
                 }
@@ -1176,7 +1180,7 @@ exports[`DataSourceTable should get datasources successful should render normall
                                         "isSortAscending": true,
                                         "isSorted": true,
                                         "key": "_data_s_title_0",
-                                        "name": "Datasource",
+                                        "name": "Title",
                                         "onSort": [Function],
                                       },
                                       Object {
@@ -1404,15 +1408,15 @@ exports[`DataSourceTable should get datasources successful should render normall
                                             values={
                                               Object {
                                                 "description": undefined,
-                                                "innerText": "Datasource",
+                                                "innerText": "Title",
                                               }
                                             }
                                           >
                                             <span
                                               className="euiTableCellContent__text"
-                                              title="Datasource"
+                                              title="Title"
                                             >
-                                              Datasource
+                                              Title
                                             </span>
                                           </EuiI18n>
                                         </EuiInnerText>
@@ -1562,7 +1566,7 @@ exports[`DataSourceTable should get datasources successful should render normall
                                   key="_data_column_title_alpha-test_0"
                                   mobileOptions={
                                     Object {
-                                      "header": "Datasource",
+                                      "header": "Title",
                                       "render": undefined,
                                     }
                                   }
@@ -1580,7 +1584,7 @@ exports[`DataSourceTable should get datasources successful should render normall
                                     <div
                                       className="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
                                     >
-                                      Datasource
+                                      Title
                                     </div>
                                     <div
                                       className="euiTableCellContent euiTableCellContent--overflowingContent"
@@ -1715,7 +1719,7 @@ exports[`DataSourceTable should get datasources successful should render normall
                                   key="_data_column_title_beta-test_0"
                                   mobileOptions={
                                     Object {
-                                      "header": "Datasource",
+                                      "header": "Title",
                                       "render": undefined,
                                     }
                                   }
@@ -1733,7 +1737,7 @@ exports[`DataSourceTable should get datasources successful should render normall
                                     <div
                                       className="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
                                     >
-                                      Datasource
+                                      Title
                                     </div>
                                     <div
                                       className="euiTableCellContent euiTableCellContent--overflowingContent"
@@ -1868,7 +1872,7 @@ exports[`DataSourceTable should get datasources successful should render normall
                                   key="_data_column_title_test_0"
                                   mobileOptions={
                                     Object {
-                                      "header": "Datasource",
+                                      "header": "Title",
                                       "render": undefined,
                                     }
                                   }
@@ -1886,7 +1890,7 @@ exports[`DataSourceTable should get datasources successful should render normall
                                     <div
                                       className="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
                                     >
-                                      Datasource
+                                      Title
                                     </div>
                                     <div
                                       className="euiTableCellContent euiTableCellContent--overflowingContent"
@@ -2021,7 +2025,7 @@ exports[`DataSourceTable should get datasources successful should render normall
                                   key="_data_column_title_test2_0"
                                   mobileOptions={
                                     Object {
-                                      "header": "Datasource",
+                                      "header": "Title",
                                       "render": undefined,
                                     }
                                   }
@@ -2039,7 +2043,7 @@ exports[`DataSourceTable should get datasources successful should render normall
                                     <div
                                       className="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
                                     >
-                                      Datasource
+                                      Title
                                     </div>
                                     <div
                                       className="euiTableCellContent euiTableCellContent--overflowingContent"
diff --git a/src/plugins/data_source_management/public/components/data_source_table/data_source_table.tsx b/src/plugins/data_source_management/public/components/data_source_table/data_source_table.tsx
index 15faf57f57a2..bbb2ce5f4100 100644
--- a/src/plugins/data_source_management/public/components/data_source_table/data_source_table.tsx
+++ b/src/plugins/data_source_management/public/components/data_source_table/data_source_table.tsx
@@ -132,7 +132,7 @@ export const DataSourceTable = ({ history }: RouteComponentProps) => {
   const columns = [
     {
       field: 'title',
-      name: 'Datasource',
+      name: 'Title',
       render: (
         name: string,
         index: {
@@ -184,6 +184,7 @@ export const DataSourceTable = ({ history }: RouteComponentProps) => {
         confirmButtonText={i18n.translate('dataSourcesManagement.dataSourcesTable.delete', {
           defaultMessage: 'Delete',
         })}
+        buttonColor="danger"
         defaultFocusedButton="confirm"
       >
         <p>
@@ -249,7 +250,7 @@ export const DataSourceTable = ({ history }: RouteComponentProps) => {
   /* Toast Handlers */
 
   const handleDisplayToastMessage = ({ id, defaultMessage }: ToastMessageItem) => {
-    toasts.addWarning(
+    toasts.addDanger(
       i18n.translate(id, {
         defaultMessage,
       })
@@ -258,7 +259,14 @@ export const DataSourceTable = ({ history }: RouteComponentProps) => {
 
   /* Render Ui elements*/
   /* Create Data Source button */
-  const createButton = <CreateButton history={history} />;
+  const createButton = <CreateButton history={history} dataTestSubj="createDataSourceButton" />;
+  const createButtonEmptyState = (
+    <CreateButton
+      history={history}
+      isEmptyState={true}
+      dataTestSubj="createDataSourceButtonEmptyState"
+    />
+  );
 
   /* Render header*/
   const renderHeader = () => {
@@ -332,7 +340,7 @@ export const DataSourceTable = ({ history }: RouteComponentProps) => {
             }
           </EuiText>
           <EuiSpacer />
-          {createButton}
+          {createButtonEmptyState}
         </EuiPanel>
         <EuiSpacer size="l" />
       </>
diff --git a/src/plugins/data_source_management/public/management_app/compoenent/experimental_callout/experimental_callout.tsx b/src/plugins/data_source_management/public/management_app/compoenent/experimental_callout/experimental_callout.tsx
index 611e410e373a..23f0d45a3206 100644
--- a/src/plugins/data_source_management/public/management_app/compoenent/experimental_callout/experimental_callout.tsx
+++ b/src/plugins/data_source_management/public/management_app/compoenent/experimental_callout/experimental_callout.tsx
@@ -23,7 +23,7 @@ export const ExperimentalCallout = ({ docLinks }: { docLinks: DocLinksStart }) =
           {
             <FormattedMessage
               id="dataSourcesManagement.experimentalFeatureCallout.description"
-              defaultMessage="The feature is experimental and should not be used in a production environment. Any index patterns, visualization, and observability panels will be impacted if the feature is deactivated. For more information see "
+              defaultMessage="This feature is experimental and should not be used in a production environment. Any index patterns, visualization, and observability panels will be impacted if the feature is deactivated. For more information see "
             />
           }
           <EuiLink href={docLinks.links.noDocumentation.indexPatterns.introduction} target="_blank">
@@ -44,7 +44,7 @@ export const ExperimentalCallout = ({ docLinks }: { docLinks: DocLinksStart }) =
             {
               <FormattedMessage
                 id="dataSourcesManagement.experimentalFeatureCallout.openForumText"
-                defaultMessage="OpenSearch Forum"
+                defaultMessage="forum.opensearch.org"
               />
             }
           </EuiLink>

From 8d5e504041ce808c0c897a32485de5f8eed30d2a Mon Sep 17 00:00:00 2001
From: "Qingyang(Abby) Hu" <abigailhu2000@gmail.com>
Date: Thu, 20 Oct 2022 13:45:19 -0700
Subject: [PATCH 3/3] Rename wizard to visBuilder in i18n id and formatted
 message id (#2635)

Signed-off-by: abbyhu2000 <abigailhu2000@gmail.com>

Signed-off-by: abbyhu2000 <abigailhu2000@gmail.com>
---
 CHANGELOG.md                                         |  1 +
 .../application/components/data_source_select.tsx    |  2 +-
 .../application/components/data_tab/field_search.tsx |  2 +-
 .../application/components/experimental_info.tsx     |  4 ++--
 .../public/application/components/right_nav.tsx      |  8 ++++----
 .../public/application/utils/breadcrumbs.ts          |  6 +++---
 .../public/application/utils/get_top_nav_config.tsx  | 12 ++++++------
 .../public/application/utils/use/use_can_save.ts     |  2 +-
 .../public/embeddable/disabled_visualization.tsx     |  4 ++--
 .../embeddable/vis_builder_embeddable_factory.tsx    |  2 +-
 src/plugins/vis_builder/public/plugin.ts             |  4 ++--
 11 files changed, 24 insertions(+), 23 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index e3135bd2d397..c7e8507a964b 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -25,6 +25,7 @@ Inspired from [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 * [Vis Builder] Change classname prefix wiz to vb ([#2581](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/2581/files))
 * [Vis Builder] Change wizard to vis_builder in file names and paths ([#2587](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/2587))
 * [Multi DataSource] Address UX comments on Data source list and create page ([#2625](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/2625))
+* [Vis Builder] Rename wizard to visBuilder in i18n id and formatted message id ([#2635](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/2635))
 
 ### 🐛 Bug Fixes
 * [Vis Builder] Fixes auto bounds for timeseries bar chart visualization ([2401](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/2401))
diff --git a/src/plugins/vis_builder/public/application/components/data_source_select.tsx b/src/plugins/vis_builder/public/application/components/data_source_select.tsx
index c51aa40a08e2..36638e0cb63b 100644
--- a/src/plugins/vis_builder/public/application/components/data_source_select.tsx
+++ b/src/plugins/vis_builder/public/application/components/data_source_select.tsx
@@ -39,7 +39,7 @@ export const DataSourceSelect = () => {
           dispatch(setIndexPattern(foundOption.id));
         }
       }}
-      prepend={i18n.translate('wizard.nav.dataSource.selector.title', {
+      prepend={i18n.translate('visBuilder.nav.dataSource.selector.title', {
         defaultMessage: 'Data Source',
       })}
       error={error}
diff --git a/src/plugins/vis_builder/public/application/components/data_tab/field_search.tsx b/src/plugins/vis_builder/public/application/components/data_tab/field_search.tsx
index 62dcf2c2b953..a2dec9156dba 100644
--- a/src/plugins/vis_builder/public/application/components/data_tab/field_search.tsx
+++ b/src/plugins/vis_builder/public/application/components/data_tab/field_search.tsx
@@ -21,7 +21,7 @@ export interface Props {
  * Additionally there's a button displayed that allows the user to show/hide more filter fields
  */
 export function FieldSearch({ value }: Props) {
-  const searchPlaceholder = i18n.translate('wizard.fieldChooser.searchPlaceHolder', {
+  const searchPlaceholder = i18n.translate('visBuilder.fieldChooser.searchPlaceHolder', {
     defaultMessage: 'Search field names',
   });
 
diff --git a/src/plugins/vis_builder/public/application/components/experimental_info.tsx b/src/plugins/vis_builder/public/application/components/experimental_info.tsx
index 35ea235c1ba3..ea341e1e8873 100644
--- a/src/plugins/vis_builder/public/application/components/experimental_info.tsx
+++ b/src/plugins/vis_builder/public/application/components/experimental_info.tsx
@@ -14,13 +14,13 @@ export const InfoComponent = () => {
       className="hide-for-sharing"
       data-test-subj="experimentalVisInfo"
       size="s"
-      title={i18n.translate('wizard.experimentalInfoTitle', {
+      title={i18n.translate('visBuilder.experimentalInfoTitle', {
         defaultMessage: 'This editor is experimental and should not be used in production',
       })}
       iconType="beaker"
     >
       <FormattedMessage
-        id="wizard.experimentalInfoText"
+        id="visBuilder.experimentalInfoText"
         defaultMessage="We want to hear from you about how we can improve your experience. Leave feedback in {githubLink}."
         values={{
           githubLink: (
diff --git a/src/plugins/vis_builder/public/application/components/right_nav.tsx b/src/plugins/vis_builder/public/application/components/right_nav.tsx
index 74a88b3ab534..fad0ac29f20a 100644
--- a/src/plugins/vis_builder/public/application/components/right_nav.tsx
+++ b/src/plugins/vis_builder/public/application/components/right_nav.tsx
@@ -53,13 +53,13 @@ export const RightNav = () => {
       </div>
       {newVisType && (
         <EuiConfirmModal
-          title={i18n.translate('wizard.rightNav.changeVisType.modalTitle', {
+          title={i18n.translate('visBuilder.rightNav.changeVisType.modalTitle', {
             defaultMessage: 'Change visualization type',
           })}
-          confirmButtonText={i18n.translate('wizard.rightNav.changeVisType.confirmText', {
+          confirmButtonText={i18n.translate('visBuilder.rightNav.changeVisType.confirmText', {
             defaultMessage: 'Change type',
           })}
-          cancelButtonText={i18n.translate('wizard.rightNav.changeVisType.cancelText', {
+          cancelButtonText={i18n.translate('visBuilder.rightNav.changeVisType.cancelText', {
             defaultMessage: 'Cancel',
           })}
           onCancel={() => setNewVisType(undefined)}
@@ -78,7 +78,7 @@ export const RightNav = () => {
         >
           <p>
             <FormattedMessage
-              id="wizard.rightNav.changeVisType.modalDescription"
+              id="visBuilder.rightNav.changeVisType.modalDescription"
               defaultMessage="Changing the visualization type will reset all field selections. Do you want to continue?"
             />
           </p>
diff --git a/src/plugins/vis_builder/public/application/utils/breadcrumbs.ts b/src/plugins/vis_builder/public/application/utils/breadcrumbs.ts
index 7bdb41075f35..1f5d15a93382 100644
--- a/src/plugins/vis_builder/public/application/utils/breadcrumbs.ts
+++ b/src/plugins/vis_builder/public/application/utils/breadcrumbs.ts
@@ -6,14 +6,14 @@
 import { i18n } from '@osd/i18n';
 import { VISUALIZE_ID } from '../../../common';
 
-const defaultEditText = i18n.translate('wizard.editor.defaultEditBreadcrumbText', {
+const defaultEditText = i18n.translate('visBuilder.editor.defaultEditBreadcrumbText', {
   defaultMessage: 'Edit',
 });
 
 export function getVisualizeLandingBreadcrumbs(navigateToApp) {
   return [
     {
-      text: i18n.translate('wizard.listing.breadcrumb', {
+      text: i18n.translate('visBuilder.listing.breadcrumb', {
         defaultMessage: 'Visualize',
       }),
       onClick: () => navigateToApp(VISUALIZE_ID),
@@ -25,7 +25,7 @@ export function getCreateBreadcrumbs(navigateToApp) {
   return [
     ...getVisualizeLandingBreadcrumbs(navigateToApp),
     {
-      text: i18n.translate('wizard.editor.createBreadcrumb', {
+      text: i18n.translate('visBuilder.editor.createBreadcrumb', {
         defaultMessage: 'Create',
       }),
     },
diff --git a/src/plugins/vis_builder/public/application/utils/get_top_nav_config.tsx b/src/plugins/vis_builder/public/application/utils/get_top_nav_config.tsx
index 965357e84158..fcf5a20f7dbf 100644
--- a/src/plugins/vis_builder/public/application/utils/get_top_nav_config.tsx
+++ b/src/plugins/vis_builder/public/application/utils/get_top_nav_config.tsx
@@ -69,16 +69,16 @@ export const getTopNavConfig = (
       id: 'save',
       iconType: savedWizardVis?.id && originatingApp ? undefined : ('save' as const),
       emphasize: savedWizardVis && !savedWizardVis.id,
-      description: i18n.translate('wizard.topNavMenu.saveVisualizationButtonAriaLabel', {
+      description: i18n.translate('visBuilder.topNavMenu.saveVisualizationButtonAriaLabel', {
         defaultMessage: 'Save Visualization',
       }),
       className: savedWizardVis?.id && originatingApp ? 'saveAsButton' : '',
       label:
         savedWizardVis?.id && originatingApp
-          ? i18n.translate('wizard.topNavMenu.saveVisualizationAsButtonLabel', {
+          ? i18n.translate('visBuilder.topNavMenu.saveVisualizationAsButtonLabel', {
               defaultMessage: 'save as',
             })
-          : i18n.translate('wizard.topNavMenu.saveVisualizationButtonLabel', {
+          : i18n.translate('visBuilder.topNavMenu.saveVisualizationButtonLabel', {
               defaultMessage: 'save',
             }),
       testId: 'wizardSaveButton',
@@ -115,7 +115,7 @@ export const getTopNavConfig = (
             emphasize: true,
             iconType: 'checkInCircleFilled' as const,
             description: i18n.translate(
-              'wizard.topNavMenu.saveAndReturnVisualizationButtonAriaLabel',
+              'visBuilder.topNavMenu.saveAndReturnVisualizationButtonAriaLabel',
               {
                 defaultMessage: 'Finish editing wizard and return to the last app',
               }
@@ -193,7 +193,7 @@ export const getOnSave = (
 
       if (id) {
         toastNotifications.addSuccess({
-          title: i18n.translate('wizard.topNavMenu.saveVisualization.successNotificationText', {
+          title: i18n.translate('visBuilder.topNavMenu.saveVisualization.successNotificationText', {
             defaultMessage: `Saved '{visTitle}'`,
             values: {
               visTitle: savedWizardVis.title,
@@ -236,7 +236,7 @@ export const getOnSave = (
       console.error(error);
 
       toastNotifications.addDanger({
-        title: i18n.translate('wizard.topNavMenu.saveVisualization.failureNotificationText', {
+        title: i18n.translate('visBuilder.topNavMenu.saveVisualization.failureNotificationText', {
           defaultMessage: `Error on saving '{visTitle}'`,
           values: {
             visTitle: newTitle,
diff --git a/src/plugins/vis_builder/public/application/utils/use/use_can_save.ts b/src/plugins/vis_builder/public/application/utils/use/use_can_save.ts
index adfb15c03e48..7da320d266f3 100644
--- a/src/plugins/vis_builder/public/application/utils/use/use_can_save.ts
+++ b/src/plugins/vis_builder/public/application/utils/use/use_can_save.ts
@@ -22,7 +22,7 @@ export const useCanSave = () => {
 // TODO: Need to finalize the error messages
 const getErrorMsg = (isEmpty, hasNoChange, hasDraftAgg) => {
   const i18nTranslate = (key: string, defaultMessage: string) =>
-    i18n.translate(`wizard.saveVisualizationTooltip.${key}`, {
+    i18n.translate(`visBuilder.saveVisualizationTooltip.${key}`, {
       defaultMessage,
     });
 
diff --git a/src/plugins/vis_builder/public/embeddable/disabled_visualization.tsx b/src/plugins/vis_builder/public/embeddable/disabled_visualization.tsx
index be6072c105af..30b5dd5ffa3f 100644
--- a/src/plugins/vis_builder/public/embeddable/disabled_visualization.tsx
+++ b/src/plugins/vis_builder/public/embeddable/disabled_visualization.tsx
@@ -15,14 +15,14 @@ export function DisabledVisualization({ title }: { title: string }) {
       <EuiIcon type="beaker" size="xl" />
       <div>
         <FormattedMessage
-          id="wizard.disabledVisualizationTitle"
+          id="visBuilder.disabledVisualizationTitle"
           defaultMessage="{title} is an experimental visualization."
           values={{ title: <em className="visDisabledLabVisualization__title">{title}</em> }}
         />
       </div>
       <div>
         <FormattedMessage
-          id="wizard.disabledVisualizationMessage"
+          id="visBuilder.disabledVisualizationMessage"
           defaultMessage="Please turn on lab-mode in the advanced settings to see these visualizations."
         />
       </div>
diff --git a/src/plugins/vis_builder/public/embeddable/vis_builder_embeddable_factory.tsx b/src/plugins/vis_builder/public/embeddable/vis_builder_embeddable_factory.tsx
index c200efee0d2d..81990d61f2a4 100644
--- a/src/plugins/vis_builder/public/embeddable/vis_builder_embeddable_factory.tsx
+++ b/src/plugins/vis_builder/public/embeddable/vis_builder_embeddable_factory.tsx
@@ -106,7 +106,7 @@ export class WizardEmbeddableFactoryDefinition
   }
 
   public getDisplayName() {
-    return i18n.translate('wizard.displayName', {
+    return i18n.translate('visBuilder.displayName', {
       defaultMessage: PLUGIN_ID,
     });
   }
diff --git a/src/plugins/vis_builder/public/plugin.ts b/src/plugins/vis_builder/public/plugin.ts
index 7b0e983c4a83..d3e37b8220d8 100644
--- a/src/plugins/vis_builder/public/plugin.ts
+++ b/src/plugins/vis_builder/public/plugin.ts
@@ -110,8 +110,8 @@ export class WizardPlugin
     visualizations.registerAlias({
       name: PLUGIN_ID,
       title: PLUGIN_NAME,
-      description: i18n.translate('wizard.visPicker.description', {
-        defaultMessage: 'Create visualizations using the new Drag & Drop experience',
+      description: i18n.translate('visBuilder.visPicker.description', {
+        defaultMessage: 'Create visualizations using the new Visualization Builder',
       }),
       icon: wizardIconSecondaryFill,
       stage: 'experimental',