Added QuickCreate component to support Quick links in wss portal (#305)

Co-authored-by: manasa <[email protected]>

Author: 4manasa

src/bridge/react_pconnect.jsx

@@ -54,6 +54,7 @@ import SemanticLink from '../components/forms/SemanticLink';
 import UserReference from '../components/forms/UserReference';
 import Confirmation from '../components/templates/Confirmation';
 import BannerPage from '../components/templates/BannerPage';
+import QuickCreate from '../components/widgets/QuickCreate';
 
 const connectRedux = (component, c11nEnv) => {
 
@@ -336,6 +337,10 @@ const getComponent = (c11nEnv, declarative) => {
         component = SemanticLink;
         break;
 
+      case "QuickCreate":
+        component = QuickCreate;
+        break;
+
       default:
         // eslint-disable-next-line no-console
         console.log( `getComponent doesn't have an entry for type ${type}`);

src/components/designSystemExtensions/Banner/index.tsx

@@ -6,7 +6,7 @@ export default function Banner(props) {
   const { a, b, banner } = props;
   const { title, message, backgroundImage } = banner;
   return (
-    <div>
+    <div style={{ marginBottom: '2rem' }}>
       <div
         className='background-image-style'
         style={{ backgroundImage: `url(${backgroundImage})` }}

src/components/designSystemExtensions/WssQuickCreate/WssQuickCreate.css

@@ -0,0 +1,36 @@
+.quick-link-ul-list {
+  list-style: none;
+  padding: 0;
+  grid-template-columns: repeat(3, 1fr);
+  display: grid;
+  gap: calc(1rem);
+}
+
+.quick-link-list {
+  background-color: #3f51b5;
+  color: white;
+  border-radius: 8px;
+}
+
+.quick-link-button {
+  text-transform: capitalize !important;
+  font-size: 16px !important;
+  color: white !important;
+  padding: calc(0.5rem * 2) !important;
+  height: 6rem;
+  width: 100%;
+  justify-content: start !important;
+}
+
+.quick-link-icon {
+  width: 1em;
+  height: 1em;
+  flex-shrink: 0;
+  filter: invert(100%);
+}
+
+.quick-link-button-span {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+ }

src/components/designSystemExtensions/WssQuickCreate/index.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { Button } from '@material-ui/core';
+import './WssQuickCreate.css';
+
+export default function WssQuickCreate(props) {
+  const { heading, actions } = props;
+
+  return (
+    <div>
+      <h1>{heading}</h1>
+      <ul className='quick-link-ul-list'>
+        {actions &&
+          actions.map(element => {
+            return (
+            <li className='quick-link-list' key={element.label}>
+              <Button className='quick-link-button' onClick={element.onClick}>
+                <span className='quick-link-button-span'>
+                  {element.icon && <img className='quick-link-icon' src={element.icon}/>}
+                  <span>{element.label}</span>
+                </span>
+              </Button>
+            </li>
+            );
+          })}
+      </ul>
+    </div>
+  );
+}

src/components/templates/AppShell/index.tsx

@@ -23,7 +23,6 @@ const useStyles = makeStyles(theme => ({
   wsscontent: {
     flexGrow: 1,
     height: '100vh',
-    overflow: 'auto',
     marginLeft: theme.spacing(1),
     marginRight: theme.spacing(1)
   }

src/components/templates/WssNavBar/WssNavBar.css

@@ -3,3 +3,9 @@
   text-transform: capitalize !important;
   font-size: 1rem !important;
 }
+
+.nav-bar {
+  position: sticky;
+  inset-block-start: 0;
+  z-index: 100;
+}

src/components/templates/WssNavBar/index.tsx

@@ -56,7 +56,7 @@ export default function WssNavBar(props) {
   };
 
   return (
-    <div id='NavBar'>
+    <div id='NavBar' className='nav-bar'>
       <AppBar position='static' color='primary'>
         <Container maxWidth='xl'>
           <Toolbar disableGutters>

src/components/widgets/QuickCreate/index.tsx

@@ -0,0 +1,54 @@
+import React from "react";
+import WssQuickCreate from '../../designSystemExtensions/WssQuickCreate';
+import { Utils } from '../../../helpers/utils';
+
+declare const PCore: any;
+
+export default function QuickCreate(props) {
+  const { getPConnect, heading, showCaseIcons, classFilter } = props;
+  const pConn = getPConnect();
+  const createCase = (className) => {
+    pConn
+      .getActionsApi()
+      .createWork(className, {})
+      .catch((error) => {
+        // eslint-disable-next-line no-console
+        console.log('Error in case creation: ', error?.message)
+      });
+  };
+
+  const cases: any = [];
+  const envInfo = PCore.getEnvironmentInfo();
+  if (
+    classFilter &&
+    envInfo.environmentInfoObject &&
+    envInfo.environmentInfoObject.pyCaseTypeList &&
+    envInfo.environmentInfoObject.pyCaseTypeList.length > 0
+  ) {
+    classFilter.forEach((item) => {
+      let icon = Utils.getImageSrc('polaris-solid', PCore.getAssetLoader().getStaticServerUrl());
+      let label = '';
+      envInfo.environmentInfoObject.pyCaseTypeList.forEach((casetype) => {
+        if (casetype.pyWorkTypeImplementationClassName === item) {
+          icon = casetype.pxIcon && Utils.getImageSrc(casetype?.pxIcon, PCore.getAssetLoader().getStaticServerUrl());
+          label = casetype.pyWorkTypeName ?? '';
+        }
+      });
+      if (label !== '') {
+        cases.push({
+          label,
+          onClick: () => {
+            createCase(item);
+          },
+          ...(showCaseIcons && { icon })
+        });
+      }
+    });
+  }
+
+  return (
+      <div>
+        <WssQuickCreate heading={heading} actions={cases}></WssQuickCreate>
+      </div>
+    );
+}