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

* Added QuickCreate component to support Quick links in wss portal

Author: 4manasa

packages/react-sdk-components/src/components/designSystemExtension/Banner/Banner.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})` }}

packages/react-sdk-components/src/components/designSystemExtension/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;
+ }

packages/react-sdk-components/src/components/designSystemExtension/WssQuickCreate/WssQuickCreate.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>
+  );
+}

packages/react-sdk-components/src/components/designSystemExtension/WssQuickCreate/index.tsx

@@ -0,0 +1 @@
+export { default } from './WssQuickCreate';

packages/react-sdk-components/src/components/template/AppShell/AppShell.tsx

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

packages/react-sdk-components/src/components/template/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;
+}

packages/react-sdk-components/src/components/template/WssNavBar/WssNavBar.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>

packages/react-sdk-components/src/components/widget/QuickCreate/QuickCreate.tsx

@@ -0,0 +1,54 @@
+import React from "react";
+import WssQuickCreate from '../../designSystemExtension/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>
+    );
+}

packages/react-sdk-components/src/components/widget/QuickCreate/index.tsx

@@ -0,0 +1 @@
+export { default } from './QuickCreate';

packages/react-sdk-components/src/sdk-pega-component-map.js

@@ -62,6 +62,7 @@ import Percentage from './components/field/Percentage';
 import Phone from './components/field/Phone/Phone';
 import PromotedFilters from './components/template/PromotedFilters';
 import Pulse from './components/designSystemExtension/Pulse';
+import QuickCreate from './components/widget/QuickCreate';
 import RadioButtons from './components/field/RadioButtons';
 import Reference from './components/infra/Reference/Reference';
 import Region from './components/infra/Region/Region';
@@ -93,6 +94,7 @@ import WideNarrowDetails from './components/template/WideNarrow/WideNarrowDetail
 import WideNarrowForm from './components/template/WideNarrow/WideNarrowForm';
 import WideNarrowPage from './components/template/WideNarrow/WideNarrowPage';
 import WssNavBar from './components/template/WssNavBar/WssNavBar';
+import WssQuickCreate from './components/designSystemExtension/WssQuickCreate';
 
 // pegaSdkComponentMap is the JSON object where we'll store the components that are
 // the default implementations provided by the SDK. These will be used if there isn't
@@ -163,6 +165,7 @@ const pegaSdkComponentMap = {
   'Phone': Phone,
   'PromotedFilters': PromotedFilters,
   'Pulse': Pulse,
+  'QuickCreate': QuickCreate,
   'reference': Reference,
   'RadioButtons': RadioButtons,
   'Region': Region,
@@ -193,7 +196,8 @@ const pegaSdkComponentMap = {
   'WideNarrowDetails': WideNarrowDetails,
   'WideNarrowForm': WideNarrowForm,
   'WideNarrowPage': WideNarrowPage,
-  'WssNavBar': WssNavBar
+  'WssNavBar': WssNavBar,
+  'WssQuickcreate': WssQuickCreate
 };
 
 export default pegaSdkComponentMap;