ibm-streams/src/webviews/cloudPakForDataJob/resources/components/edit/AppBundleContainer.js

IBM Streams Support for Visual Studio Code

import Button from 'carbon-components-react/es/components/Button';
import FormLabel from 'carbon-components-react/es/components/FormLabel';
import {
  StructuredListBody,
  StructuredListCell,
  StructuredListRow,
  StructuredListWrapper
} from 'carbon-components-react/es/components/StructuredList';
import TextInput from 'carbon-components-react/es/components/TextInput';
import PropTypes from 'prop-types';
import React, { useEffect, useRef } from 'react';
import { Property } from '.';
import HelpTooltip from '../../../../commonComponents/HelpTooltip';
import MessageHandler from '../../../../message.ts';
import { useDispatch, useState } from '../../context';
import { Action } from '../../reducers/editReducer';
import Utils from '../../utils';

const APP_BUNDLE_DOC_URL =
  'https://www.ibm.com/support/knowledgecenter/en/SSCRJU_5.3/com.ibm.streams.dev.doc/doc/streaming_applications.html';

const APP_BUNDLE_FILE_PATH_LABEL = 'Application bundle file path (optional)';
const APP_BUNDLE_FILE_PATH_TOOLTIP_TEXT = (
  <p>
    A Streams application is compiled into an executable file called a Streams
    application bundle. The application bundle file contains all elements,
    including Streams toolkit artifacts, that are required to execute an
    application. The application bundle file has a file extension of
    <code>.sab</code>.
  </p>
);
const APP_BUNDLE_FILE_PATH_PLACEHOLDER = 'Enter the file path';

const AppBundleContainer = ({ messageHandler }) => {
  const dispatch = useDispatch();
  const {
    existingAppBundle,
    existingRawSubmissionTimeParams,
    existingInitialSubmissionTimeParams,
    appBundleFilePath,
    appBundleFilePathError,
    existingJobConfigOverlay
  } = useState();
  const isInitialMount = useRef(true);

  // Validate the application bundle file path value
  useEffect(() => {
    if (isInitialMount.current) {
      isInitialMount.current = false;
    } else {
      const checkIfFileExists = async () => {
        let fileError = null;
        let rawParams = existingRawSubmissionTimeParams;
        let initialParams = existingInitialSubmissionTimeParams;
        const fileExists = await messageHandler.postMessage({
          command: 'check-if-sab-file-is-valid',
          args: { filePath: appBundleFilePath }
        });
        if (fileExists) {
          dispatch({
            type: Action.SET_IS_LOADING_SUBMISSION_TIME_PARAMS,
            payload: true
          });
          const bundleParams = await messageHandler.postMessage({
            command: 'get-submission-time-parameters',
            args: { filePath: appBundleFilePath }
          });
          if (bundleParams) {
            rawParams = bundleParams;
            initialParams = Utils.processSubmissionTimeParams(bundleParams);
            dispatch({
              type: Action.SET_SUBMISSION_TIME_PARAMS_IN_JOB_CONFIG_OVERLAY,
              payload: initialParams
            });
          }
          dispatch({
            type: Action.SET_IS_LOADING_SUBMISSION_TIME_PARAMS,
            payload: false
          });
        } else {
          fileError = 'This file does not exist or is not valid.';
        }
        dispatch({
          type: Action.SET_APP_BUNDLE_FILE_PATH_ERROR,
          payload: fileError
        });
        if (fileError && existingJobConfigOverlay) {
          dispatch({
            type: Action.SET_JOB_CONFIG_OVERLAY,
            payload: existingJobConfigOverlay
          });
        }
        dispatch({
          type: Action.SET_RAW_SUBMISSION_TIME_PARAMS,
          payload: rawParams
        });
        dispatch({
          type: Action.SET_INITIAL_SUBMISSION_TIME_PARAMS,
          payload: initialParams
        });
      };
      if (appBundleFilePath !== '') {
        checkIfFileExists();
      } else {
        dispatch({
          type: Action.SET_APP_BUNDLE_FILE_PATH_ERROR,
          payload: false
        });
        dispatch({
          type: Action.SET_RAW_SUBMISSION_TIME_PARAMS,
          payload: existingRawSubmissionTimeParams
        });
        dispatch({
          type: Action.SET_INITIAL_SUBMISSION_TIME_PARAMS,
          payload: existingInitialSubmissionTimeParams
        });
        if (existingJobConfigOverlay) {
          dispatch({
            type: Action.SET_JOB_CONFIG_OVERLAY,
            payload: existingJobConfigOverlay
          });
        }
      }
    }
  }, [appBundleFilePath]);

  const onBrowse = async () => {
    const path = await messageHandler.postMessage({
      command: 'browse-for-file',
      args: { filters: { SAB: ['sab'] } }
    });
    if (path) {
      dispatch({
        type: Action.SET_APP_BUNDLE_FILE_PATH,
        payload: path
      });
    }
  };

  const appBundleStructuredListData = existingAppBundle
    ? [
        {
          label: 'Name',
          value: existingAppBundle.name
        },
        {
          label: 'Last modified',
          value: existingAppBundle.lastModified
        }
      ]
    : [];
  const existingAppBundleComponent = appBundleStructuredListData.length ? (
    <StructuredListWrapper className="main-container__structured-list">
      <StructuredListBody>
        {appBundleStructuredListData.map((item) => (
          <StructuredListRow className="structured-row" key={item.label}>
            <StructuredListCell noWrap>{item.label}</StructuredListCell>
            <StructuredListCell>{item.value}</StructuredListCell>
          </StructuredListRow>
        ))}
      </StructuredListBody>
    </StructuredListWrapper>
  ) : (
    <p className="main-container__info">
      An application is not associated with this job.
    </p>
  );

  return (
    <section>
      <div className="main-container__form-item">
        <FormLabel>Current application bundle</FormLabel>
        {existingAppBundleComponent}
      </div>
      <div className="main-container__form-item main-container__form-item--flex">
        <TextInput
          type="text"
          id={Property.APP_BUNDLE_FILE_PATH}
          labelText={
            <HelpTooltip
              label={APP_BUNDLE_FILE_PATH_LABEL}
              tooltipText={APP_BUNDLE_FILE_PATH_TOOLTIP_TEXT}
              buttonUrl={APP_BUNDLE_DOC_URL}
            />
          }
          value={appBundleFilePath}
          invalid={!!appBundleFilePathError}
          invalidText={appBundleFilePathError || null}
          onChange={(e) =>
            dispatch({
              type: Action.SET_APP_BUNDLE_FILE_PATH,
              payload: e.target.value
            })
          }
          placeholder={APP_BUNDLE_FILE_PATH_PLACEHOLDER}
        />
        <Button
          kind="tertiary"
          size="field"
          onClick={onBrowse}
          className="main-container__browse-button"
        >
          Browse...
        </Button>
      </div>
    </section>
  );
};

AppBundleContainer.propTypes = {
  messageHandler: PropTypes.instanceOf(MessageHandler).isRequired
};

export default AppBundleContainer;