From 551f70150bd5994fddd0159c9610b3888c29ab86 Mon Sep 17 00:00:00 2001
From: soleksy-splunk <143183665+soleksy-splunk@users.noreply.github.com>
Date: Fri, 26 Jan 2024 11:53:30 +0100
Subject: [PATCH] chore: remove unnecessary BaseFormView js copy (#1027)
BaseFormView copy of js file was left to include other already existing
changes and help to compare with ts version.
After it is not required it should be deleted.
type script version fully incorporated
---
ui/src/components/BaseFormView3.jsx | 1130 ---------------------------
1 file changed, 1130 deletions(-)
delete mode 100644 ui/src/components/BaseFormView3.jsx
diff --git a/ui/src/components/BaseFormView3.jsx b/ui/src/components/BaseFormView3.jsx
deleted file mode 100644
index e2bdecba9..000000000
--- a/ui/src/components/BaseFormView3.jsx
+++ /dev/null
@@ -1,1130 +0,0 @@
-import React, { PureComponent } from 'react';
-import PropTypes from 'prop-types';
-import update from 'immutability-helper';
-import { v4 as uuidv4 } from 'uuid';
-
-import Message from '@splunk/react-ui/Message';
-
-import ControlWrapper from './ControlWrapper';
-import Validator, { SaveValidator } from '../util/Validator';
-import { getUnifiedConfigs, generateToast } from '../util/util';
-import { MODE_CLONE, MODE_CREATE, MODE_EDIT, MODE_CONFIG } from '../constants/modes';
-import { PAGE_INPUT, PAGE_CONF } from '../constants/pages';
-import { axiosCallWrapper } from '../util/axiosCallWrapper';
-import { parseErrorMsg, getFormattedMessage } from '../util/messageUtil';
-import { getBuildDirPath } from '../util/script';
-
-import {
- ERROR_REQUEST_TIMEOUT_TRY_AGAIN,
- ERROR_REQUEST_TIMEOUT_ACCESS_TOKEN_TRY_AGAIN,
- ERROR_OCCURRED_TRY_AGAIN,
- ERROR_AUTH_PROCESS_TERMINATED_TRY_AGAIN,
- ERROR_STATE_MISSING_TRY_AGAIN,
-} from '../constants/oAuthErrorMessage';
-import TableContext from '../context/TableContext';
-import Group from './Group';
-
-function onCustomHookError(params) {
- // eslint-disable-next-line no-console
- console.error(
- `[Custom Hook] Something went wrong while calling ${params.methodName}. Error: ${params.error?.name} ${params.error?.message}`
- );
-}
-
-class BaseFormView extends PureComponent {
- static contextType = TableContext;
-
- constructor(props, context) {
- super(props);
- // flag for to render hook method for once
- this.flag = true;
- this.state = {};
- this.currentInput = {};
- const globalConfig = getUnifiedConfigs();
- this.appName = globalConfig.meta.name;
- this.groupEntities = [];
- this.endpoint =
- props.mode === MODE_EDIT || props.mode === MODE_CONFIG
- ? `${this.props.serviceName}/${encodeURIComponent(this.props.stanzaName)}`
- : `${this.props.serviceName}`;
-
- this.util = {
- setState: (callback) => {
- this.onSavePromise = new Promise((resolve) => {
- this.setState((previousState) => callback(previousState), resolve);
- });
- },
- setErrorFieldMsg: this.setErrorFieldMsg,
- clearAllErrorMsg: this.clearAllErrorMsg,
- setErrorMsg: this.setErrorMsg,
- };
-
- this.utilControlWrapper = {
- handleChange: this.handleChange,
- addCustomValidator: this.addCustomValidator,
- utilCustomFunctions: this.util,
- };
- this.customWarningMessage = '';
-
- if (props.page === PAGE_INPUT) {
- globalConfig.pages.inputs.services.forEach((service) => {
- if (service.name === props.serviceName) {
- this.groups = service.groups;
- this.entities = service.entity;
- this.updateGroupEntities();
- this.options = service.options;
- if (service.hook) {
- this.hookDeferred = this.loadHook(
- service.hook.src,
- service.hook.type,
- globalConfig
- );
- }
- if (props.mode === MODE_EDIT || props.mode === MODE_CLONE) {
- this.currentInput =
- context?.rowData?.[props.serviceName]?.[props.stanzaName];
- }
- this.customWarningMessage = service?.warning?.[props.mode] || '';
- }
- });
- } else {
- globalConfig.pages.configuration.tabs.forEach((tab) => {
- const flag = tab.table
- ? tab.name === props.serviceName
- : tab.name === props.stanzaName && props.serviceName === 'settings';
-
- if (flag) {
- this.entities = tab.entity;
- this.options = tab.options;
- this.customWarningMessage = tab?.warning?.[props.mode] || '';
- if (tab.hook) {
- this.hookDeferred = this.loadHook(
- tab.hook.src,
- tab.hook.type,
- globalConfig
- );
- }
-
- if (tab.table && (props.mode === MODE_EDIT || props.mode === MODE_CLONE)) {
- this.currentInput =
- context?.rowData?.[props.serviceName]?.[props.stanzaName];
- } else if (props.mode === MODE_CONFIG) {
- this.currentInput = props.currentServiceState;
- this.mode_config_title = tab.title;
- } else {
- this.currentInput = context?.rowData?.[props.serviceName];
- }
- }
- });
- }
- this.dependencyMap = new Map();
- this.isOAuth = false;
- this.isAuthVal = false;
- this.authMap = {};
- let temState = {};
- const temEntities = [];
-
- this.entities.forEach((e) => {
- if (e.type === 'oauth') {
- this.isOAuth = true;
- if (props.page === PAGE_CONF && props.serviceName === 'account') {
- const authType = e?.options?.auth_type;
- this.isoauthState =
- typeof e?.options?.oauth_state_enabled !== 'undefined'
- ? e?.options?.oauth_state_enabled
- : null;
-
- if (authType.length > 1) {
- this.isAuthVal = true;
- // Defining state for auth_type in case of multiple Authentication
- const tempEntity = {};
- tempEntity.value =
- typeof this.currentInput?.auth_type !== 'undefined'
- ? this.currentInput?.auth_type
- : authType[0];
-
- tempEntity.display = true;
- tempEntity.error = false;
- tempEntity.disabled = false;
- temState.auth_type = tempEntity;
-
- // Defining Entity for auth_type in entitylist of globalConfig
- const entity = {};
- entity.field = 'auth_type';
- entity.type = 'singleSelect';
- entity.label = 'Auth Type';
- const content = {
- basic: 'Basic Authentication',
- oauth: 'OAuth 2.0 Authentication',
- };
- entity.options = {};
- entity.options.hideClearBtn = true;
- entity.options.autoCompleteFields = authType.map((type) => ({
- label: content[type],
- value: type,
- }));
- temEntities.push(entity);
- } else {
- this.isSingleOauth = authType.includes('oauth');
- }
-
- // Adding State and Entity(in entitylist) for every Fields of "oauth" type
- // Iterating over everytype of Authentication under "oauth" type
- authType.forEach((type) => {
- const authfields = [];
- const fields = e?.options[type];
- if (fields) {
- // For Particaular type iterating over fields
- fields.forEach((field) => {
- // every field for auth type
- const tempEntity = {};
-
- if (props.mode === MODE_CREATE) {
- tempEntity.value =
- typeof field?.defaultValue !== 'undefined'
- ? field.defaultValue
- : null;
- } else {
- const isEncrypted =
- typeof field?.encrypted !== 'undefined'
- ? field?.encrypted
- : false;
- tempEntity.value = isEncrypted
- ? ''
- : this.currentInput?.[field.field];
- }
-
- tempEntity.display =
- typeof temState.auth_type !== 'undefined'
- ? type === temState.auth_type.value
- : true;
- tempEntity.error = false;
-
- tempEntity.disabled = field?.options?.enable === false;
-
- if (props.mode === MODE_EDIT) {
- // .disableonEdit = false do not overwrite .disabled = true
- tempEntity.disabled =
- field?.options?.disableonEdit === true ||
- tempEntity.disabled;
- }
-
- temState[field.field] = tempEntity;
- // eslint-disable-next-line no-param-reassign
- field.type =
- typeof field?.type !== 'undefined' ? field.type : 'text';
-
- // Handled special case for redirect_url
- if (field.field === 'redirect_url') {
- tempEntity.value = window.location.href
- .split('?')[0]
- .replace(
- 'configuration',
- `${this.appName.toLowerCase()}_redirect`
- );
- tempEntity.disabled = true;
- }
-
- temEntities.push(field);
- authfields.push(field.field);
- });
- this.authMap[type] = authfields;
- }
- });
- if (authType.includes('oauth')) {
- const oauthConfData = {};
- // Storing O-Auth Configuration data to class variable to use later
- oauthConfData.popupWidth = e.options.oauth_popup_width
- ? e.options.oauth_popup_width
- : 600;
- oauthConfData.popupHeight = e.options.oauth_popup_height
- ? e.options.oauth_popup_height
- : 600;
- oauthConfData.authTimeout = e.options.oauth_timeout
- ? e.options.oauth_timeout
- : 180;
- oauthConfData.authCodeEndpoint = e.options.auth_code_endpoint
- ? e.options.auth_code_endpoint
- : null;
- oauthConfData.accessTokenEndpoint = e.options.access_token_endpoint
- ? e.options.access_token_endpoint
- : null;
- oauthConfData.authEndpointAccessTokenType = e.options
- .auth_endpoint_token_access_type
- ? e.options.auth_endpoint_token_access_type
- : null;
- this.oauthConf = oauthConfData;
- }
- }
- } else {
- const tempEntity = {};
- e.encrypted = typeof e.encrypted !== 'undefined' ? e.encrypted : false;
-
- if (e.type === 'file' && this.currentInput?.[e.field]) {
- /*
- adding example name to enable possibility of removal file,
- not forcing value addition as if value is encrypted it is shared as
- string ie. ***** and it is considered a valid default value
- if value is not encrypted it is pushed correctly along with this name
- */
- tempEntity.fileNameToDisplay = 'Previous File';
- }
-
- if (props.mode === MODE_CREATE) {
- tempEntity.value =
- typeof e.defaultValue !== 'undefined' ? e.defaultValue : null;
- tempEntity.display =
- typeof e?.options?.display !== 'undefined' ? e.options.display : true;
- tempEntity.error = false;
- tempEntity.disabled = e?.options?.enable === false;
- temState[e.field] = tempEntity;
- } else if (props.mode === MODE_EDIT) {
- tempEntity.value =
- typeof this.currentInput?.[e.field] !== 'undefined'
- ? this.currentInput?.[e.field]
- : null;
- tempEntity.value = e.encrypted ? '' : tempEntity.value;
- tempEntity.display =
- typeof e?.options?.display !== 'undefined' ? e.options.display : true;
- tempEntity.error = false;
- tempEntity.disabled = e?.options?.enable === false;
- if (e.field === 'name') {
- tempEntity.disabled = true;
- } else if (typeof e?.options?.disableonEdit !== 'undefined') {
- tempEntity.disabled = e.options.disableonEdit;
- }
- temState[e.field] = tempEntity;
- } else if (props.mode === MODE_CLONE) {
- tempEntity.value =
- e.field === 'name' || e.encrypted ? '' : this.currentInput?.[e.field];
- tempEntity.display =
- typeof e?.options?.display !== 'undefined' ? e.options.display : true;
- tempEntity.error = false;
- tempEntity.disabled = e?.options?.enable === false;
- temState[e.field] = tempEntity;
- } else if (props.mode === MODE_CONFIG) {
- e.defaultValue = typeof e.defaultValue !== 'undefined' ? e.defaultValue : null;
- tempEntity.value =
- typeof this.currentInput?.[e.field] !== 'undefined'
- ? this.currentInput?.[e.field]
- : e.defaultValue;
- tempEntity.value = e.encrypted ? '' : tempEntity.value;
- tempEntity.display =
- typeof e?.options?.display !== 'undefined' ? e.options.display : true;
- tempEntity.error = false;
- tempEntity.disabled = e?.options?.enable === false;
- if (e.field === 'name') {
- tempEntity.disabled = true;
- } else if (typeof e?.options?.disableonEdit !== 'undefined') {
- tempEntity.disabled = e.options.disableonEdit;
- }
- temState[e.field] = tempEntity;
- } else {
- throw new Error('Invalid mode :', props.mode);
- }
-
- // handle dependent fields
- const fields = e.options?.dependencies;
- if (fields) {
- fields.forEach((field) => {
- const changeFields = this.dependencyMap.get(field);
- if (changeFields) {
- changeFields[e.field] = fields;
- } else {
- this.dependencyMap.set(field, {
- [e.field]: fields,
- });
- }
- });
- }
- temEntities.push(e);
- }
- });
-
- this.entities = temEntities;
-
- // flatten the dependencyMap to remove redundant iterations for resolving them
- // one-by-one in following loop
- let flattenedMap = {};
- this.dependencyMap.forEach((value) => {
- flattenedMap = { ...flattenedMap, ...value };
- });
-
- const changes = {};
- Object.keys(flattenedMap).forEach((field) => {
- const values = flattenedMap[field];
- const data = {};
- let load = true;
-
- values.forEach((dependency) => {
- const required = !!this.entities.find((e) => e.field === dependency)?.required;
-
- const currentValue = temState[dependency]?.value;
- if (required && !currentValue) {
- load = false;
- data[dependency] = null;
- } else {
- data[dependency] = currentValue;
- }
- });
-
- if (load) {
- changes[field] = {
- dependencyValues: { $set: data },
- };
- }
- });
-
- // apply dependency field changes in state
- temState = update(temState, changes);
- this.state = {
- data: temState,
- errorMsg: '',
- warningMsg: this.customWarningMessage,
- };
-
- // Hook on create method call
- if (this.hookDeferred) {
- this.hookDeferred.then(() => {
- if (typeof this.hook.onCreate === 'function') {
- try {
- this.hook.onCreate();
- } catch (error) {
- onCustomHookError({ methodName: 'onCreate', error });
- }
- }
- });
- }
- }
-
- updateGroupEntities = () => {
- if (this.groups) {
- this.groups.forEach((group) => {
- group.fields.forEach((fieldName) => this.groupEntities.push(fieldName));
- });
- }
- };
-
- // eslint-disable-next-line react/no-unused-class-component-methods
- handleSubmit = () => {
- this.clearErrorMsg();
- this.props.handleFormSubmit(/* isSubmitting */ true, /* closeEntity */ false);
-
- this.datadict = {};
-
- Object.keys(this.state.data).forEach((field) => {
- this.datadict[field] = this.state.data[field].value;
- });
-
- if (this.hook && typeof this.hook.onSave === 'function') {
- const validationPass = this.hook.onSave(this.datadict);
- if (!validationPass) {
- this.props.handleFormSubmit(/* isSubmitting */ false, /* closeEntity */ false);
- return;
- }
- }
- const executeValidationSubmit = () => {
- Object.keys(this.state.data).forEach((field) => {
- this.datadict[field] = this.state.data[field].value;
- });
-
- // validation for unique name
- if ([MODE_CREATE, MODE_CLONE].includes(this.props.mode)) {
- const isExistingName = Boolean(
- Object.values(this.context?.rowData || {}).find((val) =>
- Object.keys(val).find((name) => name === this.datadict.name)
- )
- );
-
- if (isExistingName) {
- const index = this.entities.findIndex((e) => e.field === 'name');
- this.setErrorFieldMsg(
- 'name',
- getFormattedMessage(2, [this.entities[index].label, this.datadict.name])
- );
- this.props.handleFormSubmit(/* isSubmitting */ false, /* closeEntity */ false);
- return;
- }
- }
-
- // validation condition of required fields in O-Auth
- let temEntities;
- if (this.isOAuth) {
- let reqFields = [];
- Object.keys(this.authMap).forEach((type) => {
- // `isAuthVal` is required in a case where only single auth type is provided
- if (type === this.datadict.auth_type || !this.isAuthVal) {
- reqFields = [...reqFields, ...this.authMap[type]];
- }
- });
- temEntities = this.entities.map((e) => {
- if (reqFields.includes(e.field)) {
- // All oauth fields are required except if explicitely `required` is set to `false`
- return { required: true, ...e };
- }
- return e;
- });
- } else {
- temEntities = this.entities;
- }
-
- // require elements for UI when they are visible
- temEntities = temEntities.map((entity) => {
- if (entity?.options?.requiredWhenVisible && this.state.data[entity.field].display) {
- return { required: true, ...entity };
- }
- return entity;
- });
-
- // Validation of form fields on Submit
- const validator = new Validator(temEntities);
- let error = validator.doValidation(this.datadict);
- if (error) {
- this.setErrorFieldMsg(error.errorField, error.errorMsg);
- } else if (this.options && this.options.saveValidator) {
- error = SaveValidator(this.options.saveValidator, this.datadict);
- if (error) {
- this.setErrorMsg(error.errorMsg);
- }
- }
-
- if (error) {
- this.props.handleFormSubmit(/* isSubmitting */ false, /* closeEntity */ false);
- } else if (
- this.isOAuth &&
- (this.isSingleOauth || (this.isAuthVal && this.datadict.auth_type === 'oauth'))
- ) {
- // handle oauth Authentication
- // Populate the parameter string with client_id, redirect_url and response_type
- let parameters = `?response_type=code&client_id=${this.datadict.client_id}&redirect_uri=${this.datadict.redirect_url}`;
- // Get the value for state_enabled
- const stateEnabled = this.isoauthState != null ? this.isoauthState : false;
- if (stateEnabled === 'true' || stateEnabled === true) {
- this.state_enabled = true;
- // Generating a cryptographically strong state parameter, which will be used ONLY during configuration
- this.oauth_state = uuidv4().replace(/-/g, '');
-
- // Appending the state in the headers
- parameters = `${parameters}&state=${this.oauth_state}`;
- }
-
- if (this.datadict.scope) {
- parameters = `${parameters}&scope=${this.datadict.scope}`;
- }
-
- if (this.oauthConf.authEndpointAccessTokenType) {
- parameters = `${parameters}&token_access_type=${this.oauthConf.authEndpointAccessTokenType}`;
- }
- let host = encodeURI(
- `https://${this.datadict.endpoint || this.datadict.endpoint_authorize}${
- this.oauthConf.authCodeEndpoint
- }${parameters}`
- );
- const redirectURI = new URLSearchParams(host).get('redirect_uri');
- host = host.replace(redirectURI, encodeURIComponent(redirectURI));
-
- (async () => {
- this.isCalled = false;
- this.isError = false;
- this.isResponse = false;
- // Get auth_type element from global config json
-
- // Open a popup to make auth request
- this.childWin = window.open(
- host,
- `${this.appName} OAuth`,
- `width=${this.oauthConf.popupWidth}, height=${this.oauthConf.popupHeight}`
- );
- // Callback to receive data from redirect url
- window.getMessage = (message) => {
- this.isCalled = true;
- // On Call back with Auth code this method will be called.
- this.handleOauthToken(message);
- };
- // Wait till we get auth_code from calling site through redirect url, we will wait for 3 mins
- await this.waitForAuthentication(this.oauthConf.authTimeout);
-
- if (!this.isCalled && this.childWin.closed) {
- // Add error message if the user has close the authentication window without taking any action
- this.setErrorMsg(ERROR_AUTH_PROCESS_TERMINATED_TRY_AGAIN);
- this.props.handleFormSubmit(
- /* isSubmitting */ false,
- /* closeEntity */ false
- );
- return false;
- }
-
- if (!this.isCalled) {
- // Add timeout error message
- this.setErrorMsg(ERROR_REQUEST_TIMEOUT_TRY_AGAIN);
- this.props.handleFormSubmit(
- /* isSubmitting */ false,
- /* closeEntity */ false
- );
- return false;
- }
-
- // Reset called flag as we have to wait till we get the access_token, refresh_token and instance_url
- // Wait till we get the response, here we have added wait for 30 secs
- await this.waitForBackendResponse(30);
-
- if (!this.isResponse && !this.isError) {
- // Set error message to prevent saving.
- this.isError = true;
-
- // Add timeout error message
- this.setErrorMsg(ERROR_REQUEST_TIMEOUT_ACCESS_TOKEN_TRY_AGAIN);
- this.props.handleFormSubmit(
- /* isSubmitting */ false,
- /* closeEntity */ false
- );
- return false;
- }
- return true;
- })().then(() => {
- if (!this.isError) {
- this.saveData();
- } else {
- this.props.handleFormSubmit(
- /* isSubmitting */ false,
- /* closeEntity */ false
- );
- }
- });
- } else {
- this.saveData();
- }
- };
- if (
- this.hook &&
- typeof this.hook.onSave === 'function' &&
- typeof this.onSavePromise !== 'undefined'
- ) {
- this.onSavePromise.then(() => {
- executeValidationSubmit();
- });
- } else {
- executeValidationSubmit();
- }
- };
-
- saveData = () => {
- const body = new URLSearchParams();
- Object.keys(this.datadict).forEach((key) => {
- if (this.datadict[key] != null) {
- // Custom logic for only sending file content in payload, not file name and file size.
- if (
- typeof this.datadict[key] === 'object' &&
- this.entities.find((x) => x.field === key).type === 'file'
- ) {
- body.append(key, this.datadict[key].fileContent);
- } else {
- body.append(key, this.datadict[key]);
- }
- }
- });
-
- // clear out fields of other authentication methods when using one
- if (this.isAuthVal) {
- Object.keys(this.authMap).forEach((type) => {
- if (this.datadict.auth_type !== type) {
- this.authMap[type].forEach((e) => {
- body.set(e, '');
- });
- }
- });
- }
-
- if (this.isOAuth) {
- // Prevent passing redirect_url field used in OAuth to backend conf file
- body.delete('redirect_url');
- }
- if (this.props.mode === MODE_EDIT) {
- body.delete('name');
- }
-
- axiosCallWrapper({
- serviceName: this.endpoint,
- body,
- customHeaders: { 'Content-Type': 'application/x-www-form-urlencoded' },
- method: 'post',
- handleError: false,
- })
- .then((response) => {
- const val = response?.data?.entry[0];
- if (this.props.mode !== MODE_CONFIG) {
- const tmpObj = {};
-
- tmpObj[val.name] = {
- // ADDON-38581: `datadict` provides fallback values if rh skips
- ...this.datadict,
- ...val.content,
- id: val.id,
- name: val.name,
- serviceName: this.props.serviceName,
- };
-
- this.context.setRowData(
- update(this.context?.rowData, {
- [this.props.serviceName]: { $merge: tmpObj },
- })
- );
- }
- if (this.hook && typeof this.hook.onSaveSuccess === 'function') {
- this.hook.onSaveSuccess();
- }
- if (this.props.mode === MODE_EDIT) {
- generateToast(`Updated "${val.name}"`, 'success');
- } else if (this.props.mode === MODE_CONFIG) {
- generateToast(
- `Updated "${this.mode_config_title ? this.mode_config_title : val.name}"`,
- 'success'
- );
- } else {
- generateToast(`Created "${val.name}"`, 'success');
- }
- this.props.handleFormSubmit(/* isSubmitting */ false, /* closeEntity */ true);
- })
- .catch((err) => {
- const errorSubmitMsg = parseErrorMsg(err);
- this.setState({ errorMsg: errorSubmitMsg });
- if (this.hook && typeof this.hook.onSaveFail === 'function') {
- this.hook.onSaveFail();
- }
- this.props.handleFormSubmit(/* isSubmitting */ false, /* closeEntity */ false);
- });
- };
-
- handleChange = (field, targetValue) => {
- this.setState((prevState) => {
- const changes = {};
- if (field === 'auth_type') {
- Object.keys(this.authMap).forEach((type) => {
- if (type === targetValue) {
- this.authMap[type].forEach((e) => {
- changes[e] = { display: { $set: true } };
- });
- } else {
- this.authMap[type].forEach((e) => {
- changes[e] = { display: { $set: false } };
- });
- }
- });
- }
-
- if (this.dependencyMap.has(field)) {
- const value = this.dependencyMap.get(field);
- Object.keys(value).forEach((loadField) => {
- const data = {};
- let load = true;
-
- value[loadField].forEach((dependency) => {
- const required = !!this.entities.find((e) => e.field === dependency)
- ?.required;
-
- const currentValue =
- dependency === field ? targetValue : prevState.data[dependency]?.value;
- if (required && !currentValue) {
- load = false;
- data[dependency] = null;
- } else {
- data[dependency] = currentValue;
- }
- });
-
- if (load) {
- changes[loadField] = {
- dependencyValues: { $set: data },
- value: { $set: null },
- };
- }
- });
- }
-
- changes[field] = { value: { $set: targetValue } };
-
- const newFields = update(prevState, { data: changes });
- const tempState = this.clearAllErrorMsg(newFields);
-
- if (this.hookDeferred) {
- this.hookDeferred.then(() => {
- if (typeof this.hook.onChange === 'function') {
- this.hook.onChange(field, targetValue, tempState);
- }
- });
- }
-
- return tempState;
- });
- };
-
- addCustomValidator = (field, validatorFunc) => {
- const index = this.entities.findIndex((x) => x.field === field);
- const validator = [{ type: 'custom', validatorFunc }];
- this.entities[index].validators = validator;
- };
-
- // Set error message to display and set error in perticular field
- setErrorFieldMsg = (field, msg) => {
- this.setState((previousState) => {
- const newFields = update(previousState, {
- data: { [field]: { error: { $set: true } } },
- });
- newFields.errorMsg = msg;
- return newFields;
- });
- };
-
- // Set error in perticular field
- // eslint-disable-next-line react/no-unused-class-component-methods
- setErrorField = (field) => {
- this.setState((previousState) =>
- update(previousState, { data: { [field]: { error: { $set: true } } } })
- );
- };
-
- // Clear error message
- clearErrorMsg = () => {
- if (this.state.errorMsg) {
- this.setState((previousState) => ({ ...previousState, errorMsg: '' }));
- }
- };
-
- // Set error message
- setErrorMsg = (msg) => {
- this.setState((previousState) => ({ ...previousState, errorMsg: msg }));
- };
-
- // Clear error/warning message and errors from fields
- clearAllErrorMsg = (State) => {
- const newFields = State ? { ...State } : { ...this.state };
- newFields.errorMsg = '';
- newFields.warningMsg = this.customWarningMessage || '';
- const newData = State ? { ...State.data } : { ...this.state.data };
- const temData = {};
- Object.keys(newData).forEach((key) => {
- if (newData[key].error) {
- temData[key] = { ...newData[key], error: false };
- } else {
- temData[key] = newData[key];
- }
- });
- newFields.data = temData;
- return State ? newFields : null;
- };
-
- // Display error message
- generateErrorMessage = () => {
- if (this.state.errorMsg) {
- return (
-
- {this.state.errorMsg}
-
- );
- }
- return null;
- };
-
- generateWarningMessage = () => {
- if (this.state.warningMsg) {
- return (
-
- {this.state.warningMsg}
-
- );
- }
- return null;
- };
-
- // generatesubmitMessage
- loadHook = (module, type, globalConfig) => {
- const myPromise = new Promise((resolve) => {
- if (type === 'external') {
- import(/* webpackIgnore: true */ `${getBuildDirPath()}/custom/${module}.js`).then(
- (external) => {
- const Hook = external.default;
- this.hook = new Hook(
- globalConfig,
- this.props.serviceName,
- this.state,
- this.props.mode,
- this.util,
- this.props.groupName
- );
- resolve(Hook);
- }
- );
- } else {
- __non_webpack_require__(
- [`app/${this.appName}/js/build/custom/${module}`],
- (Hook) => {
- this.hook = new Hook(
- globalConfig,
- this.props.serviceName,
- this.state,
- this.props.mode,
- this.util
- );
- resolve(Hook);
- }
- );
- }
- });
- return myPromise;
- };
-
- /*
- * Function to get access token, refresh token and instance url
- * using rest call once oauth code received from child window
- */
- // eslint-disable-next-line consistent-return
- handleOauthToken = (message) => {
- // Check message for error. If error show error message.
- if (!message || (message && message.error) || message.code === undefined) {
- this.setErrorMsg(ERROR_OCCURRED_TRY_AGAIN);
- this.isError = true;
- this.isResponse = true;
- return false;
- }
- const stateResponse = message.state;
-
- if (this.state_enabled === true && this.oauth_state !== stateResponse) {
- this.setErrorMsg(ERROR_STATE_MISSING_TRY_AGAIN);
- this.isError = true;
- this.isResponse = true;
- return false;
- }
-
- const code = decodeURIComponent(message.code);
- const data = {
- method: 'POST',
- url: `https://${this.datadict.endpoint || this.datadict.endpoint_token}${
- this.oauthConf.accessTokenEndpoint
- }`,
- grant_type: 'authorization_code',
- client_id: this.datadict.client_id,
- client_secret: this.datadict.client_secret,
- code,
- redirect_uri: this.datadict.redirect_url,
- };
-
- if (this.datadict.scope) {
- data.scope = this.datadict.scope;
- }
-
- const body = new URLSearchParams();
- Object.keys(data).forEach((key) => {
- body.append(key, data[key]);
- });
-
- const OAuthEndpoint = `${this.appName}_oauth/oauth`;
- // Internal handler call to get the access token and other values
- axiosCallWrapper({
- endpointUrl: OAuthEndpoint,
- body,
- customHeaders: { 'Content-Type': 'application/x-www-form-urlencoded' },
- method: 'post',
- handleError: false,
- })
- .then((response) => {
- if (response.data.entry[0].content.error === undefined) {
- const accessToken = response.data.entry[0].content.access_token;
- const instanceUrl = response.data.entry[0].content.instance_url;
- const refreshToken = response.data.entry[0].content.refresh_token;
-
- this.datadict.instance_url = instanceUrl;
- this.datadict.refresh_token = refreshToken;
- this.datadict.access_token = accessToken;
- this.isResponse = true;
- return true;
- }
- this.setErrorMsg(response.data.entry[0].content.error);
- this.isError = true;
- this.isResponse = true;
- return false;
- })
- .catch(() => {
- this.setErrorMsg(ERROR_OCCURRED_TRY_AGAIN);
- this.isError = true;
- this.isResponse = true;
- return false;
- });
- };
-
- // Function to wait for authentication call back in child window.
- // eslint-disable-next-line consistent-return
- waitForAuthentication = async (count) => {
- // eslint-disable-next-line no-param-reassign
- count -= 1;
- // Check if callback function called if called then exit from wait
- if (this.isCalled === true) {
- return true;
- }
- // If callback function is not called and count is not reached to 180 then return error for timeout
- if (count === 0 || this.childWin.closed) {
- this.isError = true;
- return false;
- }
- // else call sleep and recall the same function
- await this.sleep(this.waitForAuthentication, count);
- };
-
- // Function to wait for backend call get response from backend
-
- // eslint-disable-next-line consistent-return
- waitForBackendResponse = async (count) => {
- // eslint-disable-next-line no-param-reassign
- count += 1;
- // Check if callback function called if called then exit from wait
- if (this.isResponse === true) {
- return true;
- }
- // If callback function is not called and count is not reached to 60 then return error for timeout
- if (count === 60) {
- return false;
- }
- // else call sleep and recall the same function
- await this.sleep(this.waitForBackendResponse, count);
- };
-
- /*
- * This function first add sleep for 1 secs and the call the function passed in argument
- */
- sleep = async (fn, ...args) => {
- await this.timeout(1000);
- return fn(...args);
- };
-
- /*
- * This function will resolve the promise once the provided timeout occurs
- */
- // eslint-disable-next-line class-methods-use-this
- timeout = (ms) => new Promise((resolve) => setTimeout(resolve, ms)); // eslint-disable-line no-promise-executor-return
-
- renderGroupElements = () => {
- let el = null;
- if (this.groups && this.groups.length) {
- el = this.groups.map((group) => {
- const collapsibleElement =
- group.fields?.length &&
- group.fields.map((fieldName) =>
- this.entities.map((e) => {
- if (e.field === fieldName) {
- const temState = this.state.data[e.field];
- return (
-
- );
- }
- return null;
- })
- );
-
- return (
-
- {collapsibleElement}
-
- );
- });
- }
- return el;
- };
-
- render() {
- // onRender method of Hook
- if (this.flag) {
- if (this.hookDeferred) {
- this.hookDeferred.then(() => {
- if (typeof this.hook.onRender === 'function') {
- try {
- this.hook.onRender();
- } catch (error) {
- onCustomHookError({ methodName: 'onRender', error });
- }
- }
- });
- }
-
- if (this.props.mode === MODE_EDIT) {
- if (this.hookDeferred) {
- this.hookDeferred.then(() => {
- if (typeof this.hook.onEditLoad === 'function') {
- try {
- this.hook.onEditLoad();
- } catch (error) {
- onCustomHookError({ methodName: 'onEditLoad', error });
- }
- }
- });
- }
- }
- this.flag = false;
- }
- return (
-
-
-
- );
- }
-}
-
-BaseFormView.propTypes = {
- page: PropTypes.string,
- serviceName: PropTypes.string,
- stanzaName: PropTypes.string,
- currentServiceState: PropTypes.object,
- mode: PropTypes.string,
- handleFormSubmit: PropTypes.func,
- groupName: PropTypes.string,
-};
-
-export default BaseFormView;