Fix Output creation on the Stream details page (#25552)

* fix Stream details output creation

* add changlog

* fix linter

---------

Co-authored-by: Mohamed OULD HOCINE <106236152+gally47@users.noreply.github.com>

Author: ousmaneo

changelog/unreleased/pr-25552.toml

@@ -0,0 +1,5 @@
+type = "fixed"
+message = "Fix creating output from Data Routing page for Stream results in empty output configuration."
+
+issues = ["23793"]
+pulls = ["25552"]

graylog2-web-interface/src/components/outputs/OutputsComponent.tsx

@@ -26,7 +26,7 @@ import StreamsStore from 'stores/streams/StreamsStore';
 import { TELEMETRY_EVENT_TYPE } from 'logic/telemetry/Constants';
 import useSendTelemetry from 'logic/telemetry/useSendTelemetry';
 import { isPermitted } from 'util/PermissionsMixin';
-import useAvailableOutputTypes from 'components/streams/useAvailableOutputTypes';
+import useAvailableOutputTypes, { getOutputTypeDefinition } from 'components/streams/useAvailableOutputTypes';
 import useOutputs from 'hooks/useOutputs';
 import useStreamOutputs from 'hooks/useStreamOutputs';
 import useOutputMutations from 'hooks/useOutputMutations';
@@ -72,8 +72,10 @@ const OutputsComponent = ({ streamId = undefined, permissions }: Props) => {
 
   const getTypeDefinition = useCallback(
     (typeName: string, callback: (def: any) => void) => {
-      if (types?.[typeName]) {
-        callback(types[typeName]);
+      const typeDefinition = getOutputTypeDefinition(types, typeName);
+
+      if (typeDefinition) {
+        callback(typeDefinition);
       }
     },
     [types],

graylog2-web-interface/src/components/streams/StreamDetails/routing-destination/AddOutputButton.tsx

@@ -30,13 +30,17 @@ import { TELEMETRY_EVENT_TYPE } from 'logic/telemetry/Constants';
 import useStreamOutputMutation from 'hooks/useStreamOutputMutations';
 import type {
   AvailableOutputRequestedConfiguration,
+  AvailableOutputSummary,
   AvailableOutputTypes,
 } from 'components/streams/useAvailableOutputTypes';
 import { Icon } from 'components/common';
 
 type Props = {
   stream: Stream;
-  getTypeDefinition: (type: string) => AvailableOutputRequestedConfiguration;
+  getTypeDefinition: (
+    type: string,
+    callback?: (available: AvailableOutputSummary) => void,
+  ) => AvailableOutputRequestedConfiguration | undefined;
   availableOutputTypes: AvailableOutputTypes;
   assignableOutputs: Array<Output>;
 };

graylog2-web-interface/src/components/streams/StreamDetails/routing-destination/DestinationOutputs.test.tsx

@@ -0,0 +1,107 @@
+/*
+ * Copyright (C) 2020 Graylog, Inc.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the Server Side Public License, version 1,
+ * as published by MongoDB, Inc.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * Server Side Public License for more details.
+ *
+ * You should have received a copy of the Server Side Public License
+ * along with this program. If not, see
+ * <http://www.mongodb.com/licensing/server-side-public-license>.
+ */
+import * as React from 'react';
+import { render } from 'wrappedTestingLibrary';
+
+import type { ConfigurationField } from 'components/configurationforms';
+import { asMock } from 'helpers/mocking';
+import useOutputs from 'hooks/useOutputs';
+import useStreamOutputs from 'hooks/useStreamOutputs';
+import useAvailableOutputTypes from 'components/streams/useAvailableOutputTypes';
+import type { AvailableOutputTypes } from 'components/streams/useAvailableOutputTypes';
+import AddOutputButton from 'components/streams/StreamDetails/routing-destination/AddOutputButton';
+import OutputsList from 'components/streams/StreamDetails/routing-destination/OutputsList';
+
+import DestinationOutputs from './DestinationOutputs';
+
+jest.mock('hooks/useOutputs');
+jest.mock('hooks/useStreamOutputs');
+jest.mock('components/streams/useAvailableOutputTypes', () => {
+  const actual = jest.requireActual('components/streams/useAvailableOutputTypes');
+
+  return {
+    __esModule: true,
+    ...actual,
+    default: jest.fn(),
+  };
+});
+jest.mock('components/streams/StreamDetails/routing-destination/AddOutputButton', () => jest.fn(() => <div>add output button</div>));
+jest.mock('components/streams/StreamDetails/routing-destination/OutputsList', () => jest.fn(() => <div>outputs list</div>));
+
+describe('DestinationOutputs', () => {
+  const streamOutput = { id: 'output-id', title: 'Existing output', type: 'enterprise-output', configuration: {} };
+  const hostField: ConfigurationField = {
+    type: 'text',
+    human_name: 'Host',
+    additional_info: {},
+    attributes: [],
+    default_value: '',
+    description: 'Host to connect to',
+    is_encrypted: false,
+    is_optional: false,
+    position: 0,
+  };
+  const availableOutputTypes: AvailableOutputTypes = {
+    'enterprise-output': {
+      type: 'enterprise-output',
+      name: 'Enterprise output',
+      human_name: 'Enterprise output',
+      link_to_docs: '',
+      requested_configuration: {
+        host: hostField,
+      },
+    },
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+
+    asMock(useStreamOutputs).mockReturnValue({
+      data: { outputs: [streamOutput], total: 1 },
+      refetch: jest.fn(),
+      isInitialLoading: false,
+      isError: false,
+    });
+    asMock(useOutputs).mockReturnValue({
+      data: { outputs: [streamOutput], total: 1 },
+      refetch: jest.fn(),
+      isInitialLoading: false,
+    });
+    asMock(useAvailableOutputTypes).mockReturnValue({
+      data: availableOutputTypes,
+      refetch: jest.fn(),
+      isInitialLoading: false,
+    });
+  });
+
+  it('uses flat available output types map to resolve requested configuration for create and edit paths', () => {
+    render(<DestinationOutputs stream={{ id: 'stream-1' } as any} />);
+
+    const addOutputButtonProps = asMock(AddOutputButton).mock.calls[0][0];
+    const callback = jest.fn();
+    const requestedConfiguration = addOutputButtonProps.getTypeDefinition('enterprise-output', callback);
+
+    expect(addOutputButtonProps.availableOutputTypes).toEqual(availableOutputTypes);
+    expect(callback).toHaveBeenCalledWith(availableOutputTypes['enterprise-output']);
+    expect(requestedConfiguration).toEqual(availableOutputTypes['enterprise-output'].requested_configuration);
+
+    const outputsListProps = asMock(OutputsList).mock.calls[0][0];
+    expect(outputsListProps.getTypeDefinition('enterprise-output')).toEqual(
+      availableOutputTypes['enterprise-output'].requested_configuration,
+    );
+  });
+});

graylog2-web-interface/src/components/streams/StreamDetails/routing-destination/DestinationOutputs.tsx

@@ -21,7 +21,10 @@ import { IfPermitted, Section, Spinner } from 'components/common';
 import type { Stream } from 'stores/streams/StreamsStore';
 import useStreamOutputs from 'hooks/useStreamOutputs';
 import type { AvailableOutputSummary } from 'components/streams/useAvailableOutputTypes';
-import useAvailableOutputTypes from 'components/streams/useAvailableOutputTypes';
+import useAvailableOutputTypes, {
+  getOutputTypeDefinition,
+  getRequestedOutputConfiguration,
+} from 'components/streams/useAvailableOutputTypes';
 import SectionCountLabel from 'components/streams/StreamDetails/SectionCountLabel';
 import AddOutputButton from 'components/streams/StreamDetails/routing-destination/AddOutputButton';
 import OutputsList from 'components/streams/StreamDetails/routing-destination/OutputsList';
@@ -37,13 +40,13 @@ const DestinationOutputs = ({ stream }: Props) => {
   const { data: availableOutputTypes, isInitialLoading: isLoadingOutputTypes } = useAvailableOutputTypes();
 
   const getTypeDefinition = (type: string, callback?: (available: AvailableOutputSummary) => void) => {
-    const definitition = availableOutputTypes.types[type];
+    const definition = getOutputTypeDefinition(availableOutputTypes, type);
 
-    if (callback && definitition) {
-      callback(definitition);
+    if (callback && definition) {
+      callback(definition);
     }
 
-    return definitition?.requested_configuration;
+    return getRequestedOutputConfiguration(availableOutputTypes, type);
   };
 
   if (isInitialLoading || isLoadingOutput || isLoadingOutputTypes) {

graylog2-web-interface/src/components/streams/useAvailableOutputTypes.test.ts

@@ -0,0 +1,64 @@
+/*
+ * Copyright (C) 2020 Graylog, Inc.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the Server Side Public License, version 1,
+ * as published by MongoDB, Inc.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * Server Side Public License for more details.
+ *
+ * You should have received a copy of the Server Side Public License
+ * along with this program. If not, see
+ * <http://www.mongodb.com/licensing/server-side-public-license>.
+ */
+
+import {
+  getOutputTypeDefinition,
+  getRequestedOutputConfiguration,
+  type AvailableOutputTypes,
+} from 'components/streams/useAvailableOutputTypes';
+import type { ConfigurationField } from 'components/configurationforms';
+
+describe('useAvailableOutputTypes helpers', () => {
+  const hostField: ConfigurationField = {
+    type: 'text',
+    human_name: 'Host',
+    additional_info: {},
+    attributes: [],
+    default_value: '',
+    description: 'Host to connect to',
+    is_encrypted: false,
+    is_optional: false,
+    position: 0,
+  };
+
+  const outputTypes: AvailableOutputTypes = {
+    'enterprise-output': {
+      type: 'enterprise-output',
+      name: 'Enterprise output',
+      human_name: 'Enterprise output',
+      link_to_docs: '',
+      requested_configuration: {
+        host: hostField,
+      },
+    },
+  };
+
+  it('returns output definition for a known output type', () => {
+    expect(getOutputTypeDefinition(outputTypes, 'enterprise-output')).toEqual(outputTypes['enterprise-output']);
+  });
+
+  it('returns requested configuration from the flat output types map', () => {
+    expect(getRequestedOutputConfiguration(outputTypes, 'enterprise-output')).toEqual(
+      outputTypes['enterprise-output'].requested_configuration,
+    );
+  });
+
+  it('returns undefined for unknown type or missing map', () => {
+    expect(getOutputTypeDefinition(outputTypes, 'missing-output')).toBeUndefined();
+    expect(getRequestedOutputConfiguration(undefined, 'enterprise-output')).toBeUndefined();
+  });
+});

graylog2-web-interface/src/components/streams/useAvailableOutputTypes.ts

@@ -40,6 +40,16 @@ export type AvailableOutputTypes = {
   [_key: string]: AvailableOutputSummary;
 };
 
+export const getOutputTypeDefinition = (
+  outputTypes: AvailableOutputTypes | undefined,
+  outputType: string,
+): AvailableOutputSummary | undefined => outputTypes?.[outputType];
+
+export const getRequestedOutputConfiguration = (
+  outputTypes: AvailableOutputTypes | undefined,
+  outputType: string,
+): AvailableOutputRequestedConfiguration | undefined => getOutputTypeDefinition(outputTypes, outputType)?.requested_configuration;
+
 export const fetchOutputsTypes = () => {
   const url = qualifyUrl(ApiRoutes.OutputsApiController.availableTypes().url);