Merge pull request #41 from pegasystems/feature/shortcuts

Enhancement for shortcuts to render as a list of categories

src/components/Pega_Extensions_Shortcuts/Docs.mdx

@@ -5,7 +5,9 @@ import * as DemoStories from './demo.stories';
 
 # Overview
 
-The Shortcuts utility renders a list of links inside a card - Each link will open a page inside your application or could open an external URL
+The Shortcuts utility renders a list of links inside a card - Each link will open a page inside your application or could open an external URL.
+
+The widget can render the links on a single row (displayType = 'simple') or group them by category. When using the 'grouped' displayType, a JSON object must be passed as a string.
 
 <Primary />
 

src/components/Pega_Extensions_Shortcuts/config.json

@@ -10,20 +10,45 @@
   "type": "Widget",
   "subtype": ["PAGE", "CASE"],
   "properties": [
+    {
+      "name": "displayType",
+      "label": "displayType",
+      "format": "SELECT",
+      "defaultValue": "simple",
+      "source": [
+        {
+          "key": "simple",
+          "value": "simple"
+        },
+        {
+          "key": "grouped",
+          "value": "grouped"
+        }
+      ]
+    },
     {
       "name": "heading",
       "label": "Heading",
-      "format": "TEXT"
+      "format": "TEXT",
+      "visibility": "$this.displayType == 'simple'"
     },
     {
       "name": "names",
-      "label": "Label of each shortcut (comma-separated)",
-      "format": "TEXT"
+      "label": "Label of each page (comma-separated)",
+      "format": "TEXT",
+      "visibility": "$this.displayType == 'simple'"
     },
     {
       "name": "pages",
       "label": "Name of each page with the class (e.g. Data-Portal.SearchPage), comma-separated list",
-      "format": "TEXT"
+      "format": "TEXT",
+      "visibility": "$this.displayType == 'simple'"
+    },
+    {
+      "name": "pageJSON",
+      "label": "JSON of the categories and pages",
+      "format": "TEXT",
+      "visibility": "$this.displayType == 'grouped'"
     }
   ],
   "defaultConfig": {

src/components/Pega_Extensions_Shortcuts/demo.stories.tsx

@@ -4,6 +4,10 @@ import PegaExtensionsShortcuts from './index';
 export default {
   title: 'Widgets/Shortcuts',
   argTypes: {
+    heading: { control: 'text', if: { arg: 'displayType', eq: 'simple' } },
+    names: { control: 'text', if: { arg: 'displayType', eq: 'simple' } },
+    pages: { control: 'text', if: { arg: 'displayType', eq: 'simple' } },
+    pageJSON: { control: 'text', if: { arg: 'displayType', neq: 'simple' } },
     getPConnect: {
       table: {
         disable: true
@@ -57,8 +61,11 @@ export const Default: Story = {
     return <PegaExtensionsShortcuts {...props} />;
   },
   args: {
+    displayType: 'simple',
     heading: 'Shortcuts',
     names: 'Welcome,Information,Help,My Search',
-    pages: 'Data-Portal.Page1,Data-Portal.Page2,Work-.Page3,https://www.pega.com'
+    pages: 'Data-Portal.Page1,Data-Portal.Page2,Work-.Page3,https://www.pega.com',
+    pageJSON:
+      '{"categories": [{ "heading": "Category1", "links" : [{ "name": "Page1" , "page": "Data-Portal.Page1"}, { "name": "Page2" , "page": "Data-Portal.Page2"},{ "name": "Page3" , "page": "Data-Portal.Page3"}]},{ "heading": "Category2", "links" : [{ "name": "Page4" , "page": "Data-Portal.Page4"}, { "name": "Page5" , "page": "Data-Portal.Page5"},{ "name": "Page6" , "page": "Data-Portal.Page6"}]},{ "heading": "Category3", "links" : [{ "name": "Welcome" , "page": "Data-Portal.Page1"}, { "name": "Information" , "page": "Data-Portal.Page2"},{ "name": "Help" , "page": "Data-Portal.Page3"}]}]}'
   }
 };

src/components/Pega_Extensions_Shortcuts/index.tsx

@@ -1,41 +1,68 @@
-import { useState, useEffect, type MouseEvent } from 'react';
-import { Card, CardHeader, CardContent, Text, Link, Configuration } from '@pega/cosmos-react-core';
-import MainContent from './styles';
+import { type MouseEvent, useCallback } from 'react';
+import {
+  Card,
+  CardHeader,
+  CardContent,
+  Text,
+  Link,
+  Configuration,
+  Flex
+} from '@pega/cosmos-react-core';
+import { SimpleContent, GroupedContent } from './styles';
 
 type ShortcutsProps = {
+  /** Display type of rendering
+   * @default simple
+   */
+  displayType: 'simple' | 'grouped';
+  /** Heading for the card - only used if displayType is simple
+   * @default Shortcuts
+   */
   heading?: string;
+  /** Label of each page (comma-separated) - only used if displayType is simple */
   names?: string;
+  /** Name of each page with the class (e.g. Data-Portal.SearchPage), comma-separated list - only used if displayType is simple */
   pages?: string;
+  /** JSON object passed a string - only used if displayType is grouped */
+  pageJSON?: string;
   getPConnect: any;
 };
 
 export default function PegaExtensionsShortcuts(props: ShortcutsProps) {
-  const { heading = 'List of objects', names = '', pages = '', getPConnect } = props;
-  const [objects, setObjects] = useState<Array<any>>([]);
+  const {
+    heading = 'Shortcuts',
+    displayType = 'simple',
+    names = '',
+    pages = '',
+    pageJSON = '',
+    getPConnect
+  } = props;
+  const { ACTION_SHOWVIEW } = (window as any).PCore.getSemanticUrlUtils().getActions();
 
-  useEffect(() => {
-    const tmpObjects: any = [];
-    const { ACTION_SHOWVIEW } = (window as any).PCore.getSemanticUrlUtils().getActions();
-    const labels = names.split(',');
-    pages.split(',').forEach((name: string, index: number) => {
-      const linkLabel = labels[index]?.trim();
-      if (!linkLabel) return;
-      const isURL = name.trim().indexOf('https://');
+  const generateLink = useCallback(
+    (name: string, page: string) => {
+      if (!name) return null;
+      const isURL = page.trim().indexOf('https://');
       if (isURL === 0) {
-        tmpObjects.push(<Link href={name.trim()}>{linkLabel}</Link>);
-        return;
+        return (
+          <Link key={name} href={page.trim()}>
+            {name}
+          </Link>
+        );
       }
-      const delimiter = name.indexOf('.');
-      if (delimiter === -1) return;
-      const pageClass = name.substring(0, delimiter).trim();
-      const pageName = name.substring(delimiter + 1).trim();
+      const delimiter = page.indexOf('.');
+      if (delimiter === -1) return null;
+
+      const pageClass = page.substring(0, delimiter).trim();
+      const pageName = page.substring(delimiter + 1).trim();
       const linkRef = (window as any).PCore.getSemanticUrlUtils().getResolvedSemanticURL(
         ACTION_SHOWVIEW,
         { page: pageName },
         ''
       );
-      tmpObjects.push(
+      return (
         <Link
+          key={name}
           href={linkRef}
           onClick={(e: MouseEvent<HTMLButtonElement>) => {
             /* for links - need to set onClick for spa to avoid full reload - (cmd | ctrl) + click for opening in new tab */
@@ -45,24 +72,56 @@ export default function PegaExtensionsShortcuts(props: ShortcutsProps) {
             }
           }}
         >
-          {linkLabel}
+          {name}
         </Link>
       );
-    });
-    setObjects(tmpObjects);
-  }, [names, pages, getPConnect]);
-
-  if (!names || !pages) return null;
-  return (
-    <Configuration>
-      <Card>
-        <CardHeader>
-          <Text variant='h2'>{heading}</Text>
-        </CardHeader>
-        <CardContent>
-          <MainContent>{objects.map((object: any) => object)}</MainContent>
-        </CardContent>
-      </Card>
-    </Configuration>
+    },
+    [ACTION_SHOWVIEW, getPConnect]
   );
+
+  if (displayType === 'simple') {
+    const objects: any = [];
+    const namesArray = names.split(',');
+    pages.split(',').forEach((page: string, index: number) => {
+      const name = namesArray[index]?.trim();
+      const linkEl = generateLink(name, page);
+      if (linkEl) objects.push(linkEl);
+    });
+    if (objects.length === 0) return null;
+    return (
+      <Configuration>
+        <Card>
+          <CardHeader>
+            <Text variant='h2'>{heading}</Text>
+          </CardHeader>
+          <CardContent>
+            <SimpleContent>{objects?.map((object: any) => object)}</SimpleContent>
+          </CardContent>
+        </Card>
+      </Configuration>
+    );
+  }
+  try {
+    const pageObj = JSON.parse(pageJSON);
+    const obj = pageObj.categories;
+    return (
+      <Configuration>
+        <Card>
+          <CardContent>
+            <GroupedContent>
+              {obj?.map((object: any) => (
+                <Flex container={{ direction: 'column' }}>
+                  <Text variant='h2'>{object.heading}</Text>
+                  {object.links?.map((link: any) => {
+                    return generateLink(link.name, link.page);
+                  })}
+                </Flex>
+              ))}
+            </GroupedContent>
+          </CardContent>
+        </Card>
+      </Configuration>
+    );
+  } catch (e) {}
+  return null;
 }

src/components/Pega_Extensions_Shortcuts/styles.ts

@@ -1,13 +1,26 @@
 import styled, { css } from 'styled-components';
 
-export default styled.div(() => {
+export const SimpleContent = styled.div(() => {
   return css`
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(20ch, 1fr));
     grid-gap: 1rem;
     grid-template-rows: repeat(1, 1fr);
-    & > a {
+    & a {
       margin-inline-start: 0 !important;
     }
   `;
 });
+
+export const GroupedContent = styled.div(() => {
+  return css`
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(30ch, 1fr));
+    grid-gap: 1rem;
+    grid-template-rows: repeat(1, 1fr);
+    & a {
+      margin-inline-start: 0 !important;
+      padding-top: 0.5rem;
+    }
+  `;
+});