[Backport 2.x] [Workspace] Refactor data source association panel

changelogs/fragments/8383.yml

@@ -0,0 +1,2 @@
+feat:
+- Refactor data source association panel ([#8383](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/8383))

src/plugins/workspace/public/components/workspace_creator/workspace_creator_form.tsx

@@ -4,7 +4,15 @@
  */
 
 import React, { useCallback, useRef } from 'react';
-import { EuiSpacer, EuiTitle, EuiForm, EuiText, EuiFlexItem, EuiFlexGroup } from '@elastic/eui';
+import {
+  EuiSpacer,
+  EuiTitle,
+  EuiForm,
+  EuiText,
+  EuiFlexItem,
+  EuiFlexGroup,
+  EuiPanel,
+} from '@elastic/eui';
 import { i18n } from '@osd/i18n';
 import {
   useWorkspaceForm,
@@ -108,29 +116,31 @@ export const WorkspaceCreatorForm = (props: WorkspaceCreatorFormProps) => {
           {/* SelectDataSourcePanel is only visible for dashboard admin and when data source is enabled*/}
           {isDashboardAdmin && isDataSourceEnabled && (
             <>
-              <EuiTitle
-                {...generateRightSidebarScrollProps(RightSidebarScrollField.DataSource)}
-                size="s"
-              >
-                <h3>
-                  {i18n.translate('workspace.creator.form.associateDataSourceTitle', {
-                    defaultMessage: 'Associate data sources',
+              <EuiPanel>
+                <EuiText
+                  {...generateRightSidebarScrollProps(RightSidebarScrollField.DataSource)}
+                  size="s"
+                >
+                  <h2>
+                    {i18n.translate('workspace.creator.form.associateDataSourceTitle', {
+                      defaultMessage: 'Associate data sources',
+                    })}
+                  </h2>
+                </EuiText>
+                <EuiText size="xs">
+                  {i18n.translate('workspace.creator.form.associateDataSourceDescription', {
+                    defaultMessage:
+                      'Add at least one data source that will be available in the workspace. If a selected OpenSearch connection has related Direct Query connections, they will also be available in the workspace.',
                   })}
-                </h3>
-              </EuiTitle>
-              <EuiText size="xs">
-                {i18n.translate('workspace.creator.form.associateDataSourceDescription', {
-                  defaultMessage:
-                    'Add data sources that will be available in the workspace. If a selected OpenSearch connection has embedded Direct Query connection, they will also be available in the workspace.',
-                })}
-              </EuiText>
-              <SelectDataSourcePanel
-                onChange={setSelectedDataSourceConnections}
-                savedObjects={savedObjects}
-                assignedDataSourceConnections={formData.selectedDataSourceConnections}
-                data-test-subj={`workspaceForm-dataSourcePanel`}
-                showDataSourceManagement={true}
-              />
+                </EuiText>
+                <SelectDataSourcePanel
+                  onChange={setSelectedDataSourceConnections}
+                  savedObjects={savedObjects}
+                  assignedDataSourceConnections={formData.selectedDataSourceConnections}
+                  data-test-subj={`workspaceForm-dataSourcePanel`}
+                  showDataSourceManagement={true}
+                />
+              </EuiPanel>
               <EuiSpacer size="s" />
               <EuiSpacer size="s" />
             </>

src/plugins/workspace/public/components/workspace_form/select_data_source_panel.tsx

@@ -79,7 +79,7 @@ export const SelectDataSourcePanel = ({
       data-test-subj="workspace-creator-dataSources-assign-button"
     >
       {i18n.translate('workspace.form.selectDataSourcePanel.addNew', {
-        defaultMessage: 'Add OpenSearch connections',
+        defaultMessage: 'Associate OpenSearch connections',
       })}
     </EuiSmallButton>
   );
@@ -94,7 +94,7 @@ export const SelectDataSourcePanel = ({
       data-test-subj="workspace-creator-dqc-assign-button"
     >
       {i18n.translate('workspace.form.selectDataSourcePanel.addNewDQCs', {
-        defaultMessage: 'Add direct query connections',
+        defaultMessage: 'Associate direct query connections',
       })}
     </EuiSmallButton>
   );
@@ -130,10 +130,8 @@ export const SelectDataSourcePanel = ({
           <EuiFlexItem grow={false}>{addDirectQueryConnectionsButton}</EuiFlexItem>
         )}
       </EuiFlexGroup>
-      <EuiSpacer size="m" />
-      <EuiFlexItem style={{ maxWidth: 768 }}>
-        {assignedDataSourceConnections.length > 0 && renderTableContent()}
-      </EuiFlexItem>
+      {assignedDataSourceConnections.length > 0 && <EuiSpacer size="m" />}
+      {assignedDataSourceConnections.length > 0 && renderTableContent()}
       {modalVisible && chrome && (
         <AssociationDataSourceModal
           savedObjects={savedObjects}