console: add details button to the success notification to see inserted row

Closes: https://github.com/hasura/graphql-engine/issues/6362

Description:

Add a `detail` button on the success notification while inserting row. We can see row added on clicking `detail` button.
![Screenshot from 2021-03-26 17-37-45](https://user-images.githubusercontent.com/68095256/112629281-1c6c6a00-8e5a-11eb-962a-42143d9501fe.png)

<img width="1051" alt="Screenshot 2021-04-08 at 14 14 10" src="https://user-images.githubusercontent.com/9019397/114024775-bda0ea80-9874-11eb-9ae7-f3ce90e4492e.png">

Effected components:

[x] - Console

Co-authored-by: Aleksandra Sikora <9019397+beerose@users.noreply.github.com>
GitOrigin-RevId: 88257687a2c989369b62115c238aa318ea9780ca

CHANGELOG.md

@@ -37,6 +37,7 @@ In the future, we will probably offer a way to explicitly choose which behaviour
 (Add entries here in the order of: server, console, cli, docs, others)
 
 - console: add custom_column_names to track_table request with replaced invalid characters (#992)
+- console: add details button to the success notification to see inserted row
 
 ## v2.0.0-alpha.7
 

console/src/components/Services/Common/Notification.tsx

@@ -55,7 +55,7 @@ export const showNotification = (
   };
 };
 
-const getNotificationDetails = (
+export const getNotificationDetails = (
   detailsJson: Json,
   children: React.ReactNode
 ) => {

console/src/components/Services/Data/TableInsertItem/InsertActions.js

@@ -4,7 +4,7 @@ import { Reals } from '../constants';
 
 import {
   showErrorNotification,
-  showSuccessNotification,
+  showNotification,
 } from '../../Common/Notification';
 import dataHeaders from '../Common/Headers';
 import { getEnumColumnMappings, dataSource } from '../../../../dataSources';
@@ -16,6 +16,7 @@ import {
 import { isStringArray } from '../../../Common/utils/jsUtils';
 import { makeMigrationCall } from '../DataActions';
 import { removeAll } from 'react-notification-system-redux';
+import { getNotificationDetails } from '../../Common/Notification';
 
 const I_SET_CLONE = 'InsertItem/I_SET_CLONE';
 const I_RESET = 'InsertItem/I_RESET';
@@ -151,10 +152,7 @@ const insertItem = (tableName, colValues, isMigration = false) => {
         error: { message: 'Not valid JSON' },
       });
     }
-    let returning = [];
-    if (isMigration) {
-      returning = columns.map(col => col.column_name);
-    }
+    const returning = columns.map(col => col.column_name);
     const reqBody = {
       type: 'insert',
       args: {
@@ -171,12 +169,35 @@ const insertItem = (tableName, colValues, isMigration = false) => {
       body: JSON.stringify(reqBody),
     };
     const url = Endpoints.query;
-    const migrationSuccessCB = affectedRows => {
+
+    const migrationSuccessCB = (affectedRows, returnedFields) => {
+      const detailsAction = {
+        label: 'Details',
+        callback: () => {
+          dispatch(
+            showNotification(
+              {
+                position: 'br',
+                title: 'Inserted data!',
+                message: `Affected rows: ${affectedRows}`,
+                dismissible: 'button',
+                autoDismiss: 0,
+                children: getNotificationDetails(returnedFields),
+              },
+              'success'
+            )
+          );
+        },
+      };
+
       dispatch(
-        showSuccessNotification(
-          'Inserted data!',
-          `Affected rows: ${affectedRows}`,
-          true
+        showNotification(
+          {
+            title: 'Inserted data!',
+            message: `Affected rows: ${affectedRows}`,
+            action: detailsAction,
+          },
+          'success'
         )
       );
     };
@@ -192,13 +213,14 @@ const insertItem = (tableName, colValues, isMigration = false) => {
               data.returning[0],
               currentTableInfo.primary_key,
               columns,
-              () => migrationSuccessCB(affectedRows)
+              () => migrationSuccessCB(affectedRows, data.returning[0])
             )
           );
         } else {
-          migrationSuccessCB(affectedRows);
+          migrationSuccessCB(affectedRows, data.returning[0]);
         }
       },
+
       err => {
         dispatch(removeAll());
         dispatch(showErrorNotification('Insert failed!', err.error, err));