Added a new type of UIComponent to allow for backward compatibility of UQI forms

app/client/src/api/PluginApi.ts

@@ -8,13 +8,20 @@ export type PluginId = string;
 export type PluginPackageName = string;
 export type GenerateCRUDEnabledPluginMap = Record<PluginId, PluginPackageName>;
 
+export enum UIComponentTypes {
+  DbEditorForm = "DbEditorForm",
+  UQIDbEditorForm = "UQIDbEditorForm",
+  ApiEditorForm = "ApiEditorForm",
+  RapidApiEditorForm = "RapidApiEditorForm",
+}
+
 export interface Plugin {
   id: string;
   name: string;
   type: PluginType;
   packageName: string;
   iconLocation?: string;
-  uiComponent: "ApiEditorForm" | "RapidApiEditorForm" | "DbEditorForm";
+  uiComponent: UIComponentTypes;
   datasourceComponent: "RestAPIDatasourceForm" | "AutoForm";
   allowUserDatasources?: boolean;
   templates: Record<string, string>;

app/client/src/pages/Editor/QueryEditor/EditorJSONtoForm.tsx

@@ -63,7 +63,8 @@ import { thinScrollbar } from "constants/DefaultTheme";
 import ActionRightPane from "components/editorComponents/ActionRightPane";
 import { SuggestedWidget } from "api/ActionAPI";
 import { getActionTabsInitialIndex } from "selectors/editorSelectors";
-import TooltipComponent from "components/ads/Tooltip";
+import { UIComponentTypes } from "../../../api/PluginApi";
+import TooltipComponent from "../../../components/ads/Tooltip";
 
 const QueryFormContainer = styled.form`
   display: flex;
@@ -365,6 +366,7 @@ type QueryFormProps = {
   isRunning: boolean;
   dataSources: Datasource[];
   DATASOURCES_OPTIONS: any;
+  uiComponent: UIComponentTypes;
   executedQueryData?: {
     body: any;
     isExecutionSuccess?: boolean;

app/client/src/pages/Editor/QueryEditor/index.tsx

@@ -14,7 +14,7 @@ import { deleteAction, runActionInit } from "actions/actionActions";
 import { AppState } from "reducers";
 import { getIsEditorInitialized } from "selectors/editorSelectors";
 import { QUERY_EDITOR_FORM_NAME } from "constants/forms";
-import { Plugin } from "api/PluginApi";
+import { Plugin, UIComponentTypes } from "api/PluginApi";
 import { Datasource } from "entities/Datasource";
 import {
   getPluginIdsOfPackageNames,
@@ -23,6 +23,7 @@ import {
   getDBDatasources,
   getAction,
   getActionResponses,
+  getUIComponent,
 } from "selectors/entitiesSelector";
 import { PLUGIN_PACKAGE_DBS } from "constants/QueryEditorConstants";
 import { QueryAction } from "entities/Action";
@@ -64,6 +65,7 @@ type ReduxStateProps = {
   editorConfig: any;
   settingConfig: any;
   isEditorInitialized: boolean;
+  uiComponent: UIComponentTypes;
 };
 
 type StateAndRouteProps = RouteComponentProps<QueryEditorRouteParams>;
@@ -123,6 +125,7 @@ class QueryEditor extends React.Component<Props> {
       responses,
       runErrorMessage,
       settingConfig,
+      uiComponent,
     } = this.props;
     const { applicationId, pageId } = this.props.match.params;
 
@@ -165,6 +168,7 @@ class QueryEditor extends React.Component<Props> {
         onRunClick={this.handleRunClick}
         runErrorMessage={runErrorMessage[queryId]}
         settingConfig={settingConfig}
+        uiComponent={uiComponent}
       />
     );
   }
@@ -196,9 +200,12 @@ const mapStateToProps = (state: AppState, props: any): ReduxStateProps => {
     settingConfig = settingConfigs[pluginId];
   }
 
+  const allPlugins = getPlugins(state);
+  const uiComponent = getUIComponent(state, formData.pluginId, allPlugins);
+
   return {
     pluginImages: getPluginImages(state),
-    plugins: getPlugins(state),
+    plugins: allPlugins,
     runErrorMessage,
     pluginIds: getPluginIdsOfPackageNames(state, PLUGIN_PACKAGE_DBS),
     dataSources: getDBDatasources(state),
@@ -210,6 +217,7 @@ const mapStateToProps = (state: AppState, props: any): ReduxStateProps => {
     settingConfig,
     isCreating: state.ui.apiPane.isCreating,
     isEditorInitialized: getIsEditorInitialized(state),
+    uiComponent,
   };
 };
 

app/client/src/selectors/entitiesSelector.ts

@@ -16,8 +16,10 @@ import ImageAlt from "assets/images/placeholder-image.svg";
 import { CanvasWidgetsReduxState } from "../reducers/entityReducers/canvasWidgetsReducer";
 import { MAIN_CONTAINER_WIDGET_ID } from "constants/WidgetConstants";
 import { AppStoreState } from "reducers/entityReducers/appReducer";
-import { GenerateCRUDEnabledPluginMap } from "../api/PluginApi";
-
+import {
+  GenerateCRUDEnabledPluginMap,
+  UIComponentTypes,
+} from "../api/PluginApi";
 import { APP_MODE } from "entities/App";
 
 export const getEntities = (state: AppState): AppState["entities"] =>
@@ -303,6 +305,24 @@ export const getAction = (
   return action ? action.config : undefined;
 };
 
+export const getUIComponent = (
+  state: AppState,
+  pluginId: string,
+  allPlugins: any,
+) => {
+  // Adding uiComponent field to switch form type to UQI or allow for backward compatibility
+  const plugin = allPlugins.find((plugin: any) =>
+    !!pluginId ? plugin.id === pluginId : false,
+  );
+  // Defaults to old value, new value can be DBEditorForm or UQIDBEditorForm
+  let uiComponent = UIComponentTypes.DbEditorForm;
+  if (plugin) {
+    uiComponent = plugin.uiComponent;
+  }
+
+  return uiComponent;
+};
+
 export function getCurrentPageNameByActionId(
   state: AppState,
   actionId: string,