[Search] Move create button into a more clean UI (elastic#178546)

## Summary

Summarize your PR. If it involves visual changes include a screenshot or
gif.



https://github.com/elastic/kibana/assets/1410658/c9af49f6-9290-4086-8848-8eda6923f37e

Move Create button to more clean UI as requested by feedback.

### Checklist

Delete any items that are not applicable to this PR.

- [x] Any text added follows [EUI's writing
guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses
sentence case text and includes [i18n
support](https://github.com/elastic/kibana/blob/main/packages/kbn-i18n/README.md)
- [ ]
[Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html)
was added for features that require explanation or tutorials
- [ ] [Unit or functional
tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)
were updated or added to match the most common scenarios
- [ ] [Flaky Test
Runner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1) was
used on any tests changed
- [x] Any UI touched in this PR is usable by keyboard only (learn more
about [keyboard accessibility](https://webaim.org/techniques/keyboard/))
- [x] Any UI touched in this PR does not create any new axe failures
(run axe in browser:
[FF](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/),
[Chrome](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US))
- [ ] If a plugin configuration key changed, check if it needs to be
allowlisted in the cloud and added to the [docker
list](https://github.com/elastic/kibana/blob/main/src/dev/build/tasks/os_packages/docker_generator/resources/base/bin/kibana-docker)
- [x] This renders correctly on smaller devices using a responsive
layout. (You can test this [in your
browser](https://www.browserstack.com/guide/responsive-testing-on-local-server))
- [ ] This was checked for [cross-browser
compatibility](https://www.elastic.co/support/matrix#matrix_browsers)

x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/connector_detail/attach_index_box.tsx

@@ -17,6 +17,7 @@ import {
   EuiFlexGroup,
   EuiFlexItem,
   EuiFormRow,
+  EuiHorizontalRule,
   EuiPanel,
   EuiSpacer,
   EuiText,
@@ -236,34 +237,6 @@ export const AttachIndexBox: React.FC<AttachIndexBoxProps> = ({ connector }) =>
       </EuiFlexGroup>
       <EuiSpacer />
       <EuiFlexGroup>
-        {!connector.index_name && (
-          <EuiFlexItem grow={false}>
-            <EuiButton
-              color="primary"
-              fill
-              onClick={() => {
-                createIndex({ indexName: connector.name, language: null });
-              }}
-              isLoading={isSaveLoading || isExistLoading}
-              disabled={indexExists[connector.name]}
-            >
-              {i18n.translate('xpack.enterpriseSearch.attachIndexBox.createSameIndexButtonLabel', {
-                defaultMessage: 'Create and attach an index named {indexName}',
-                values: { indexName: connector.name },
-              })}
-            </EuiButton>
-            {indexExists[connector.name] ? (
-              <EuiText size="xs">
-                {i18n.translate('xpack.enterpriseSearch.attachIndexBox.indexNameExistsError', {
-                  defaultMessage: 'Index with name {indexName} already exists',
-                  values: { indexName: connector.name },
-                })}
-              </EuiText>
-            ) : (
-              <></>
-            )}
-          </EuiFlexItem>
-        )}
         <EuiFlexItem grow={false}>
           <EuiButton
             onClick={() => onSave()}
@@ -276,6 +249,61 @@ export const AttachIndexBox: React.FC<AttachIndexBoxProps> = ({ connector }) =>
           </EuiButton>
         </EuiFlexItem>
       </EuiFlexGroup>
+
+      {!connector.index_name && (
+        <>
+          <EuiSpacer size="m" />
+          <EuiFlexGroup responsive={false} justifyContent="center" alignItems="center">
+            <EuiFlexItem>
+              <EuiHorizontalRule size="full" />
+            </EuiFlexItem>
+            <EuiText>
+              <p>
+                {i18n.translate('xpack.enterpriseSearch.attachIndexBox.orPanelLabel', {
+                  defaultMessage: 'OR',
+                })}
+              </p>
+            </EuiText>
+            <EuiFlexItem>
+              <EuiHorizontalRule size="full" />
+            </EuiFlexItem>
+          </EuiFlexGroup>
+          <EuiSpacer size="m" />
+          <EuiFlexGroup justifyContent="center">
+            <EuiFlexItem grow={false}>
+              <EuiButton
+                iconType="sparkles"
+                color="primary"
+                fill
+                onClick={() => {
+                  createIndex({ indexName: connector.name, language: null });
+                  setSelectedIndex({ label: connector.name });
+                }}
+                isLoading={isSaveLoading || isExistLoading}
+                disabled={indexExists[connector.name]}
+              >
+                {i18n.translate(
+                  'xpack.enterpriseSearch.attachIndexBox.createSameIndexButtonLabel',
+                  {
+                    defaultMessage: 'Create and attach an index named {indexName}',
+                    values: { indexName: connector.name },
+                  }
+                )}
+              </EuiButton>
+              {indexExists[connector.name] ? (
+                <EuiText size="xs">
+                  {i18n.translate('xpack.enterpriseSearch.attachIndexBox.indexNameExistsError', {
+                    defaultMessage: 'Index with name {indexName} already exists',
+                    values: { indexName: connector.name },
+                  })}
+                </EuiText>
+              ) : (
+                <></>
+              )}
+            </EuiFlexItem>
+          </EuiFlexGroup>
+        </>
+      )}
     </EuiPanel>
   );
 };