Update createdAt and updatedAt fields with defaults for Sessions type

Convert session sharing components to use PatternFly React

Author: gurbirkalsi

config/router.config.js

@@ -75,9 +75,9 @@ module.exports = [
         component: './Search',
       },
       {
-        path: '/explore',
-        name: 'explore',
-        component: './Explore',
+        path: '/sessions',
+        name: 'sessions',
+        component: './Sessions',
       },
       {
         path: '/private',

mock/api.js

@@ -106,10 +106,12 @@ export const mockSearch = {
   },
 };
 
-export const mockSessionUrl = {
+export const mockSession = {
   data: {
-    createUrl: {
-      id: 'test_id',
+    createSession: {
+      id: '1',
+      config: '{}',
+      description: 'test_description',
     },
   },
 };

prisma/datamodel.prisma

@@ -6,10 +6,10 @@ type User {
   password: String!
 }
 
-type Url {
+type Session {
   id: ID! @id
-  created: DateTime!
-  updated: DateTime!
+  createdAt: DateTime! @createdAt
+  updatedAt: DateTime! @updatedAt
   config: String!
   description: String
 }

prisma/src/resolvers.js

@@ -59,14 +59,14 @@ const resolvers = {
       });
       return user;
     },
-    createUrl: async (parent, { created, updated, config, description }, ctx) => {
-      const url = await ctx.prisma.createUrl({
-        created,
-        updated,
+    createSession: async (parent, { createdAt, updatedAt, config, description }, ctx) => {
+      const session = await ctx.prisma.createSession({
+        createdAt,
+        updatedAt,
         config,
         description,
       });
-      return url;
+      return session;
     },
   },
 };

prisma/src/typeDefs.js

@@ -10,10 +10,10 @@ const typeDefs = gql`
     username: String!
   }
 
-  type Url {
+  type Session {
     id: ID!
-    created: DateTime!
-    updated: DateTime!
+    createdAt: DateTime!
+    updatedAt: DateTime!
     config: String!
     description: String
   }
@@ -25,7 +25,12 @@ const typeDefs = gql`
   type Mutation {
     register(firstName: String!, lastName: String!, username: String!, password: String!): User!
     login(username: String!, password: String!): LoginResponse!
-    createUrl(created: DateTime!, updated: DateTime!, config: String!, description: String!): Url!
+    createSession(
+      createdAt: DateTime!
+      updatedAt: DateTime!
+      config: String!
+      description: String
+    ): Session!
   }
 
   type LoginResponse {

src/common/menu.js

@@ -3,7 +3,6 @@ import { isUrl } from '../utils/utils';
 const menuData = [
   {
     name: 'Dashboard',
-    icon: 'dashboard',
     path: '/private',
     routes: [
       {
@@ -30,13 +29,11 @@ const menuData = [
   },
   {
     name: 'Search',
-    icon: 'search',
     path: '/search',
   },
   {
-    name: 'Explore',
-    icon: 'global',
-    path: '/explore',
+    name: 'Sessions',
+    path: '/sessions',
   },
 ];
 

src/components/GlobalHeader/index.js

@@ -13,14 +13,12 @@ import {
   DropdownToggle,
 } from '@patternfly/react-core';
 import { SearchIcon } from '@patternfly/react-icons';
-import { Alert, Badge } from 'antd';
 import { connect } from 'dva';
 import pbenchLogo from '../../assets/pbench_logo.svg';
 import imgAvatar from '../../assets/avatar.svg';
 import SessionModal from '../SessionModal';
 
-@connect(({ store, auth }) => ({
-  store,
+@connect(({ auth }) => ({
   auth: auth.auth,
 }))
 class GlobalHeader extends Component {
@@ -38,22 +36,7 @@ class GlobalHeader extends Component {
     });
   };
 
-  exitUserSession = () => {
-    const { dispatch } = this.props;
-    const sessionConfig = window.localStorage.getItem('persist:session');
-
-    dispatch({
-      type: 'global/exitUserSession',
-    });
-    dispatch({
-      type: 'global/rehydrateSession',
-      payload: JSON.parse(sessionConfig),
-    });
-    window.localStorage.removeItem('persist:session');
-    dispatch(routerRedux.push('/'));
-  };
-
-  logoutSession = () => {
+  logoutUser = () => {
     const { dispatch } = this.props;
     dispatch({
       type: 'auth/logoutUser',
@@ -72,36 +55,17 @@ class GlobalHeader extends Component {
   };
 
   render() {
-    const {
-      savingSession,
-      sessionBannerVisible,
-      sessionDescription,
-      sessionId,
-      dispatch,
-      store,
-      auth,
-    } = this.props;
+    const { savingSession, dispatch, auth } = this.props;
     const { isProfileDropdownOpen } = this.state;
 
     const profileDropdownItems = [
       <DropdownItem onClick={() => this.navigateToProfile()}>Profile</DropdownItem>,
-      <DropdownItem onClick={() => this.logoutSession()}>Logout</DropdownItem>,
+      <DropdownItem onClick={() => this.logoutUser()}>Logout</DropdownItem>,
     ];
 
     const PageToolbar = (
       <PageHeaderTools>
-        {sessionBannerVisible && (
-          <Alert
-            message={sessionDescription}
-            type="info"
-            description={`Session ID: ${sessionId}`}
-            closeText="Exit Session"
-            icon={<Badge status="processing" />}
-            onClose={this.exitUserSession}
-            banner
-          />
-        )}
-        <SessionModal savingSession={savingSession} sessionConfig={store} dispatch={dispatch} />
+        <SessionModal savingSession={savingSession} dispatch={dispatch} />
         <PageHeaderToolsGroup>
           <PageHeaderToolsItem>
             <Button

src/components/SessionModal/index.js

@@ -1,120 +1,148 @@
 import React, { Component } from 'react';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
-import { Modal, Form, Input, message } from 'antd';
-import { ToolbarItem, Button } from '@patternfly/react-core';
+import {
+  Alert,
+  AlertGroup,
+  Modal,
+  ModalVariant,
+  Form,
+  FormGroup,
+  TextArea,
+  TextInput,
+  ToolbarItem,
+  Button,
+} from '@patternfly/react-core';
 import { ShareAltIcon } from '@patternfly/react-icons';
 
-const { TextArea } = Input;
-
 class SessionModal extends Component {
   constructor(props) {
     super(props);
 
     this.state = {
       description: '',
-      visible: false,
+      shareModalVisible: false,
+      successModalVisible: false,
+      copyLinkAlertVisible: false,
       sessionUrl: '',
     };
   }
 
-  showSuccess = () => {
-    const { sessionUrl } = this.state;
-
-    Modal.success({
-      title: 'Generated session link',
-      content: (
-        <div style={{ display: 'flex', flex: 1, flexDirection: 'row' }}>
-          <Input value={sessionUrl} />
-          <CopyToClipboard text={sessionUrl}>
-            <Button style={{ marginLeft: 8 }} onClick={this.copyLink}>
-              Copy Link
-            </Button>
-          </CopyToClipboard>
-        </div>
-      ),
-    });
-  };
+  toggleShareModal = () => {
+    const { shareModalVisible } = this.state;
 
-  handleCancel = () => {
     this.setState({
-      visible: false,
+      shareModalVisible: !shareModalVisible,
     });
   };
 
-  showModal = () => {
+  toggleSuccessModal = () => {
+    const { successModalVisible } = this.state;
+
     this.setState({
-      visible: true,
+      successModalVisible: !successModalVisible,
     });
   };
 
-  onGenerate = () => {
+  onGenerateUrl = () => {
     const { dispatch } = this.props;
-    let { sessionConfig } = this.props;
     const { description } = this.state;
-    sessionConfig = JSON.stringify(sessionConfig);
+
+    // eslint-disable-next-line no-underscore-dangle
+    const { routing, global, dashboard, search } = window.g_app._store.getState();
+    const sessionConfig = JSON.stringify({ routing, global, dashboard, search });
 
     dispatch({
-      type: 'global/saveUserSession',
+      type: 'sessions/saveSession',
       payload: {
         sessionConfig,
         description,
       },
     }).then(result => {
       this.setState({
-        visible: false,
-        sessionUrl: `${window.location.origin}/#/dashboard/share/${result.data.createUrl.id}`,
+        shareModalVisible: false,
+        sessionUrl: `${window.location.origin}/dashboard/share/${result.data.createSession.id}`,
       });
-      this.showSuccess();
+      this.toggleSuccessModal();
     });
   };
 
   copyLink = () => {
-    const { sessionUrl } = this.state;
-    message.success(`Copied the link: ${sessionUrl}`);
+    this.setState({ copyLinkAlertVisible: true });
   };
 
-  changeDescription = e => {
+  updateDescription = value => {
     this.setState({
-      description: e.target.value,
+      description: value,
     });
   };
 
   render() {
-    const { visible, description } = this.state;
+    const {
+      shareModalVisible,
+      successModalVisible,
+      copyLinkAlertVisible,
+      description,
+      sessionUrl,
+    } = this.state;
     const { savingSession } = this.props;
 
     return (
       <span>
         <ToolbarItem>
-          <Button onClick={this.showModal} variant="plain">
+          <Button onClick={this.toggleShareModal} variant="plain">
             <ShareAltIcon />
           </Button>
         </ToolbarItem>
         <Modal
+          variant={ModalVariant.small}
           title="Share Session Link"
-          visible={visible}
-          onOk={this.onGenerate}
-          onCancel={this.handleCancel}
-          footer={[
-            <Button key="back" onClick={this.handleCancel}>
-              Cancel
-            </Button>,
-            <Button key="submit" type="primary" onClick={this.onGenerate} loading={savingSession}>
+          isOpen={shareModalVisible}
+          onClose={this.toggleShareModal}
+          actions={[
+            <Button
+              key="submit"
+              type="primary"
+              onClick={this.onGenerateUrl}
+              loading={savingSession}
+            >
               Save
             </Button>,
+            <Button key="back" variant="link" onClick={this.toggleShareModal}>
+              Cancel
+            </Button>,
           ]}
         >
-          <Form layout="vertical">
-            <Form.Item label="Description">
+          <Form>
+            <FormGroup label="Description">
               <TextArea
-                rows={2}
                 id="description"
-                placeholder={description}
-                onChange={this.changeDescription}
+                name="description"
+                value={description}
+                onChange={this.updateDescription}
               />
-            </Form.Item>
+            </FormGroup>
           </Form>
         </Modal>
+        <Modal
+          variant={ModalVariant.small}
+          title="Generated session link"
+          isOpen={successModalVisible}
+          onClose={this.toggleSuccessModal}
+        >
+          {copyLinkAlertVisible && (
+            <AlertGroup isToast>
+              <Alert title={`Copied the link: ${sessionUrl}`} />
+            </AlertGroup>
+          )}
+          <div style={{ display: 'flex', flexDirection: 'row' }}>
+            <TextInput value={sessionUrl} />
+            <CopyToClipboard text={sessionUrl}>
+              <Button style={{ marginLeft: 8 }} onClick={this.copyLink}>
+                Copy Link
+              </Button>
+            </CopyToClipboard>
+          </div>
+        </Modal>
       </span>
     );
   }