console: new "add remote schema" page (with GQL customization)

PR-URL: hasura/graphql-engine-mono#4428
GitOrigin-RevId: d8f82ffe86fd59abb43afa195b40c2fdafabb847

Author: vijayprasanna13

CHANGELOG.md

@@ -17,6 +17,7 @@
 - console: add remote database relationships for views
 - console: bug fixes for RS-to-RS relationships
 - console: allow users to remove prefix / suffix / root field namespace from a remote schema
+- console: new "add remote schema" page (with GQL customization)
 - cli: avoid exporting hasura-specific schemas during hasura init (#8352)
 - cli: fix performance regression in `migrate status` command (fix #8398)
 

console/package-lock.json

@@ -88,6 +88,7 @@
     "less": "3.11.1",
     "lodash.get": "4.4.2",
     "lodash.merge": "4.6.2",
+    "lodash.pickby": "^4.6.0",
     "moment": "^2.26.0",
     "piping": "0.3.2",
     "prop-types": "15.7.2",
@@ -170,6 +171,7 @@
     "@types/jwt-decode": "2.2.1",
     "@types/lodash": "^4.14.159",
     "@types/lodash.merge": "^4.6.6",
+    "@types/lodash.pickby": "^4.6.7",
     "@types/mini-css-extract-plugin": "0.9.1",
     "@types/optimize-css-assets-webpack-plugin": "5.0.1",
     "@types/react": "17.0.39",

console/package.json

@@ -1,52 +1,75 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import Common from '../Common/Common';
 
 import { addRemoteSchema, RESET } from './addRemoteSchemaReducer';
 import Helmet from 'react-helmet';
 import Button from '../../../Common/Button/Button';
+import { RemoteSchema } from '@/features/RemoteSchema';
+import { appPrefix, pageTitle } from '../constants';
+import {
+  availableFeatureFlagIds,
+  FeatureFlagToast,
+  useIsFeatureFlagEnabled,
+} from '@/features/FeatureFlags';
+import { exportMetadata } from '@/metadata/actions';
+import _push from '../../Data/push';
 
-import { pageTitle } from '../constants';
+const Add = ({ isRequesting, dispatch, ...props }) => {
+  const styles = require('../RemoteSchema.scss');
 
-class Add extends React.Component {
-  componentWillUnmount() {
-    this.props.dispatch({ type: RESET });
-  }
+  useEffect(() => {
+    return () => {
+      dispatch({ type: RESET });
+    };
+  }, []);
 
-  render() {
-    const styles = require('../RemoteSchema.scss');
+  const { isLoading, enabled } = useIsFeatureFlagEnabled(
+    availableFeatureFlagIds.addRemoteSchemaId
+  );
 
-    const { isRequesting, dispatch } = this.props;
+  if (isLoading) {
+    return 'Loading...';
+  }
 
+  if (enabled) {
     return (
-      <div className={styles.addWrapper}>
-        <Helmet title={`Add ${pageTitle} - ${pageTitle}s | Hasura`} />
-        <div className={styles.heading_text}>Add a new remote schema</div>
-        <form
-          onSubmit={e => {
-            e.preventDefault();
-            dispatch(addRemoteSchema());
-          }}
-        >
-          <Common isNew {...this.props} />
-          <div className={styles.commonBtn}>
-            <Button
-              type="submit"
-              color="yellow"
-              size="sm"
-              // disabled={isRequesting} // TODO
-              data-test="add-remote-schema-submit"
-            >
-              {isRequesting ? 'Adding...' : 'Add Remote Schema'}
-            </Button>
-            {/*
-            <button className={styles.default_button}>Cancel</button>
-            */}
-          </div>
-        </form>
-      </div>
+      <RemoteSchema.Create
+        onSuccess={remoteSchemaName => {
+          // This only exists right now because the sidebar is reading from redux state
+          dispatch(exportMetadata()).then(() => {
+            dispatch(_push(`${appPrefix}/manage/${remoteSchemaName}/details`));
+          });
+        }}
+      />
     );
   }
-}
+
+  return (
+    <div className={styles.addWrapper}>
+      <Helmet title={`Add ${pageTitle} - ${pageTitle}s | Hasura`} />
+      <div className={styles.heading_text}>Add a new remote schema</div>
+      <form
+        onSubmit={e => {
+          e.preventDefault();
+          dispatch(addRemoteSchema());
+        }}
+      >
+        <Common isNew {...props} dispatch={dispatch} />
+        <div className={styles.commonBtn}>
+          <Button
+            type="submit"
+            color="yellow"
+            size="sm"
+            data-test="add-remote-schema-submit"
+          >
+            {isRequesting ? 'Adding...' : 'Add Remote Schema'}
+          </Button>
+        </div>
+      </form>
+      <FeatureFlagToast flagId={availableFeatureFlagIds.addRemoteSchemaId} />
+    </div>
+  );
+};
 
 const mapStateToProps = state => {
   return {

console/src/components/Services/RemoteSchema/Add/Add.js

@@ -1,9 +1,11 @@
 import { FeatureFlagDefinition } from './types';
 
 const relationshipTabTablesId = '0bea35ff-d3e9-45e9-af1b-59923bf82fa9';
+const addRemoteSchemaId = 'bf57c2ba-cab2-11ec-9d64-0242ac120002';
 
 export const availableFeatureFlagIds = {
   relationshipTabTablesId,
+  addRemoteSchemaId,
 };
 
 export const availableFeatureFlags: FeatureFlagDefinition[] = [
@@ -18,4 +20,14 @@ export const availableFeatureFlags: FeatureFlagDefinition[] = [
   //   defaultValue: false,
   //   discussionUrl: '',
   // },
+  {
+    id: addRemoteSchemaId,
+    title: 'New create remote schema page',
+    description:
+      'Try out the new Add Remote Schema page that supports GraphQL customization',
+    section: 'remote schemas',
+    status: 'alpha',
+    defaultValue: false,
+    discussionUrl: '',
+  },
 ];

console/src/features/FeatureFlags/availableFeatureFlags.ts

@@ -35,6 +35,7 @@ export const allowedMetadataTypesArr = [
   'create_remote_schema_remote_relationship',
   'update_remote_schema_remote_relationship',
   'delete_remote_schema_remote_relationship',
+  'add_remote_schema',
   'bulk',
 ] as const;
 

console/src/features/MetadataAPI/types.ts

@@ -0,0 +1,93 @@
+import React, { useReducer } from 'react';
+import { ReactQueryDecorator } from '@/storybook/decorators/react-query';
+import { ComponentMeta, Story } from '@storybook/react';
+import { RemoteSchema } from '@/features/RemoteSchema';
+import { ReduxDecorator } from '@/storybook/decorators/redux-decorator';
+import { within, userEvent } from '@storybook/testing-library';
+import { expect } from '@storybook/jest';
+import { handlers } from './mocks/handlers.mock';
+
+export default {
+  title: 'RemoteSchema/components/Create',
+  component: RemoteSchema.Create,
+  decorators: [ReactQueryDecorator(), ReduxDecorator({})],
+  parameters: {
+    msw: handlers(),
+  },
+} as ComponentMeta<typeof RemoteSchema.Create>;
+
+export const Playground: Story = () => {
+  const [formSuccess, toggle] = useReducer(s => !s, false);
+  return (
+    <>
+      <RemoteSchema.Create onSuccess={() => toggle()} />
+      {formSuccess ? (
+        <p data-testid="form-result">Form saved succesfully!</p>
+      ) : null}
+    </>
+  );
+};
+
+Playground.play = async ({ canvasElement }) => {
+  const canvas = within(canvasElement);
+
+  userEvent.click(await canvas.findByTestId('submit'));
+
+  // expect error messages
+  expect(
+    await canvas.findByText('Remote Schema name is a required field!')
+  ).toBeInTheDocument();
+  expect(await canvas.findByText('Invalid url')).toBeInTheDocument();
+
+  // Fill up the fields
+  // const nameInput = await canvas.findByLabelText('Name');
+  userEvent.type(await canvas.findByTestId('name'), 'test');
+  userEvent.type(await canvas.findByTestId('url'), 'http://example.com');
+  userEvent.type(await canvas.findByTestId('timeout_seconds'), '180');
+  userEvent.click(await canvas.findByTestId('forward_client_headers'));
+
+  userEvent.click(await canvas.findByTestId('open_customization'));
+
+  userEvent.type(
+    await canvas.findByTestId('customization.root_fields_namespace'),
+    'root_field_namespace_example'
+  );
+  userEvent.type(
+    await canvas.findByTestId('customization.type_prefix'),
+    'type_prefix_example_'
+  );
+  userEvent.type(
+    await canvas.findByTestId('customization.type_suffix'),
+    '_type_suffix_example'
+  );
+  userEvent.type(
+    await canvas.findByTestId('customization.query_root.parent_type'),
+    'query_root_parent_type_example_'
+  );
+  userEvent.type(
+    await canvas.findByTestId('customization.query_root.prefix'),
+    'query_root_prefix_example_'
+  );
+  userEvent.type(
+    await canvas.findByTestId('customization.query_root.suffix'),
+    '_query_root_suffix_example'
+  );
+  userEvent.type(
+    await canvas.findByTestId('customization.mutation_root.parent_type'),
+    'mutation_root_parent_type_example_'
+  );
+  userEvent.type(
+    await canvas.findByTestId('customization.mutation_root.prefix'),
+    'mutation_root_prefix_example_'
+  );
+  userEvent.type(
+    await canvas.findByTestId('customization.mutation_root.suffix'),
+    '_mutation_root_suffix_example'
+  );
+
+  userEvent.click(await canvas.findByTestId('submit'));
+
+  expect(
+    await canvas.findByText('Form saved succesfully!')
+  ).toBeInTheDocument();
+};