[ML] Transforms: Fix tab ids for expanded row. (#80666) (#80934)

We based the IDs to identify expanded row tabs on the transform ID. This could break the page because the transform ID could include characters (e.g. dots) not supported by EUI's tabbed content component. This fixes the issue by using the stringHash() utility to create the IDs.

x-pack/plugins/transform/public/app/sections/transform_management/components/transform_list/expanded_row.tsx

@@ -26,6 +26,23 @@ function getItemDescription(value: any) {
  return value.toString();
 }
 
+/**
+ * Creates a deterministic number based hash out of a string.
+ */
+export function stringHash(str: string): number {
+ let hash = 0;
+ let chr = 0;
+ if (str.length === 0) {
+ return hash;
+ }
+ for (let i = 0; i < str.length; i++) {
+ chr = str.charCodeAt(i);
+ hash = (hash << 5) - hash + chr; // eslint-disable-line no-bitwise
+ hash |= 0; // eslint-disable-line no-bitwise
+ }
+ return hash < 0 ? hash * -2 : hash;
+}
+
 interface Item {
  title: string;
  description: any;
@@ -162,9 +179,11 @@ export const ExpandedRow: FC<Props> = ({ item }) => {
  position: 'left',
  };
 
+ const tabId = stringHash(item.id);
+
  const tabs = [
  {
- id: `transform-details-tab-${item.id}`,
+ id: `transform-details-tab-${tabId}`,
  'data-test-subj': 'transformDetailsTab',
  name: i18n.translate(
  'xpack.transform.transformList.transformDetails.tabs.transformDetailsLabel',
@@ -175,7 +194,7 @@ export const ExpandedRow: FC<Props> = ({ item }) => {
  content: <ExpandedRowDetailsPane sections={[general, state, checkpointing]} />,
  },
  {
- id: `transform-stats-tab-${item.id}`,
+ id: `transform-stats-tab-${tabId}`,
  'data-test-subj': 'transformStatsTab',
  name: i18n.translate(
  'xpack.transform.transformList.transformDetails.tabs.transformStatsLabel',
@@ -186,13 +205,13 @@ export const ExpandedRow: FC<Props> = ({ item }) => {
  content: <ExpandedRowDetailsPane sections={[stats]} />,
  },
  {
- id: `transform-json-tab-${item.id}`,
+ id: `transform-json-tab-${tabId}`,
  'data-test-subj': 'transformJsonTab',
  name: 'JSON',
  content: <ExpandedRowJsonPane json={item.config} />,
  },
  {
- id: `transform-messages-tab-${item.id}`,
+ id: `transform-messages-tab-${tabId}`,
  'data-test-subj': 'transformMessagesTab',
  name: i18n.translate(
  'xpack.transform.transformList.transformDetails.tabs.transformMessagesLabel',
@@ -203,7 +222,7 @@ export const ExpandedRow: FC<Props> = ({ item }) => {
  content: <ExpandedRowMessagesPane transformId={item.id} />,
  },
  {
- id: `transform-preview-tab-${item.id}`,
+ id: `transform-preview-tab-${tabId}`,
  'data-test-subj': 'transformPreviewTab',
  name: i18n.translate(
  'xpack.transform.transformList.transformDetails.tabs.transformPreviewLabel',