[Search] Fix State not reset while navigating different connectors (e…

…lastic#177465)

## Summary

Fixes state not resetting while navigating in between connectors.



https://github.com/elastic/kibana/assets/1410658/1fb7a67d-2e87-480f-8c7b-98c634eb90b6


Also moved Attach index box to bottom to comply with designs.

### Checklist

Delete any items that are not applicable to this PR.

- [ ] [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] 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))
- [x] 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/connector_configuration.tsx

@@ -89,12 +89,6 @@ export const ConnectorConfiguration: React.FC = () => {
       <EuiFlexGroup>
         <EuiFlexItem grow={2}>
           <EuiPanel hasShadow={false} hasBorder>
-            {!connector.index_name && (
-              <>
-                <AttachIndexBox connector={connector} />
-                <EuiSpacer />
-              </>
-            )}
             <EuiSteps
               steps={[
                 {
@@ -324,6 +318,12 @@ export const ConnectorConfiguration: React.FC = () => {
               ]}
             />
           </EuiPanel>
+          {!connector.index_name && (
+            <>
+              <EuiSpacer />
+              <AttachIndexBox connector={connector} />
+            </>
+          )}
         </EuiFlexItem>
         <EuiFlexItem grow={1}>
           <EuiFlexGroup direction="column">

x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/connector_detail/connector_view_logic.ts

@@ -29,9 +29,11 @@ import { IndexNameActions, IndexNameLogic } from '../search_index/index_name_log
 export interface ConnectorViewActions {
   fetchConnector: FetchConnectorByIdApiLogicActions['makeRequest'];
   fetchConnectorApiError: FetchConnectorByIdApiLogicActions['apiError'];
+  fetchConnectorApiReset: FetchConnectorByIdApiLogicActions['apiReset'];
   fetchConnectorApiSuccess: FetchConnectorByIdApiLogicActions['apiSuccess'];
   fetchIndex: FetchIndexActions['makeRequest'];
   fetchIndexApiError: FetchIndexActions['apiError'];
+  fetchIndexApiReset: FetchIndexActions['apiReset'];
   fetchIndexApiSuccess: FetchIndexActions['apiSuccess'];
   setIndexName: IndexNameActions['setIndexName'];
 }
@@ -77,12 +79,14 @@ export const ConnectorViewLogic = kea<MakeLogicType<ConnectorViewValues, Connect
         'makeRequest as fetchConnector',
         'apiSuccess as fetchConnectorApiSuccess',
         'apiError as fetchConnectorApiError',
+        'apiReset as fetchConnectorApiReset',
       ],
       FetchIndexApiLogic,
       [
         'makeRequest as fetchIndex',
         'apiSuccess as fetchIndexApiSuccess',
         'apiError as fetchIndexApiError',
+        'apiReset as fetchIndexApiReset',
       ],
     ],
     values: [
@@ -92,6 +96,16 @@ export const ConnectorViewLogic = kea<MakeLogicType<ConnectorViewValues, Connect
       ['data as index', 'status as fetchIndexApiStatus'],
     ],
   },
+  events: ({ actions }) => ({
+    beforeMount: () => {
+      actions.fetchConnectorApiReset();
+      actions.fetchIndexApiReset();
+    },
+    beforeUnmount: () => {
+      actions.fetchConnectorApiReset();
+      actions.fetchIndexApiReset();
+    },
+  }),
   listeners: ({ actions, values }) => ({
     fetchConnectorApiSuccess: () => {
       if (values.indexName) {