Skip to content

Commit

Permalink
Workspace API Recipes (#890)
Browse files Browse the repository at this point in the history 
* Add Workspace API examples

* Add tests

* Create tab launcher and reorder recipes
  • Loading branch information
@albarivas
albarivas authored Jan 10, 2024
1 parent 040189f commit d4d21e0
Show file tree
Hide file tree
Showing 49 changed files with 1,302 additions and 1 deletion.
95 changes: 95 additions & 0 deletions force-app/main/default/applications/LWC_Recipes_Console_App.app-meta.xml
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,95 @@
<?xml version="1.0" encoding="UTF-8" ?>
<CustomApplication xmlns="http://soap.sforce.com/2006/04/metadata">
<brand>
<headerColor>#0070D2</headerColor>
<shouldOverrideOrgTheme>false</shouldOverrideOrgTheme>
</brand>
<formFactors>Small</formFactors>
<formFactors>Large</formFactors>
<isNavAutoTempTabsDisabled>false</isNavAutoTempTabsDisabled>
<isNavPersonalizationDisabled>false</isNavPersonalizationDisabled>
<isNavTabPersistenceDisabled>false</isNavTabPersistenceDisabled>
<label>LWC Recipes Console App</label>
<navType>Console</navType>
<tabs>Hello</tabs>
<tabs>Datatable</tabs>
<tabs>Apex</tabs>
<tabs>standard-Contact</tabs>
<tabs>Composition</tabs>
<tabs>Events</tabs>
<tabs>Parent_to_Child</tabs>
<tabs>Message_Service</tabs>
<tabs>Refresh_View</tabs>
<tabs>Light_DOM</tabs>
<tabs>Dynamic_Interactions</tabs>
<tabs>Aura_Interoperability</tabs>
<tabs>Wire</tabs>
<tabs>GraphQL</tabs>
<tabs>Navigation</tabs>
<tabs>Record_Picker</tabs>
<tabs>Misc_Techniques</tabs>
<tabs>X3rd_Party_Libs</tabs>
<tabs>Workspace_API_Tab_Launcher</tabs>
<uiType>Lightning</uiType>
<utilityBar>LWC_Recipes_Console_App_UtilityBar</utilityBar>
<workspaceConfig>
<mappings>
<tab>Apex</tab>
</mappings>
<mappings>
<tab>Aura_Interoperability</tab>
</mappings>
<mappings>
<tab>Composition</tab>
</mappings>
<mappings>
<tab>Datatable</tab>
</mappings>
<mappings>
<tab>Dynamic_Interactions</tab>
</mappings>
<mappings>
<tab>Events</tab>
</mappings>
<mappings>
<tab>GraphQL</tab>
</mappings>
<mappings>
<tab>Hello</tab>
</mappings>
<mappings>
<tab>Light_DOM</tab>
</mappings>
<mappings>
<tab>Message_Service</tab>
</mappings>
<mappings>
<tab>Misc_Techniques</tab>
</mappings>
<mappings>
<tab>Navigation</tab>
</mappings>
<mappings>
<tab>Parent_to_Child</tab>
</mappings>
<mappings>
<tab>Record_Picker</tab>
</mappings>
<mappings>
<tab>Refresh_View</tab>
</mappings>
<mappings>
<tab>Wire</tab>
</mappings>
<mappings>
<tab>Workspace_API_Tab_Launcher</tab>
</mappings>
<mappings>
<tab>X3rd_Party_Libs</tab>
</mappings>
<mappings>
<fieldName>AccountId</fieldName>
<tab>standard-Contact</tab>
</mappings>
</workspaceConfig>
</CustomApplication>
56 changes: 56 additions & 0 deletions force-app/main/default/flexipages/LWC_Recipes_Console_App_UtilityBar.flexipage-meta.xml
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
<?xml version="1.0" encoding="UTF-8" ?>
<FlexiPage xmlns="http://soap.sforce.com/2006/04/metadata">
<flexiPageRegions>
<itemInstances>
<componentInstance>
<componentInstanceProperties>
<name>eager</name>
<type>decorator</type>
<value>false</value>
</componentInstanceProperties>
<componentInstanceProperties>
<name>height</name>
<type>decorator</type>
<value>480</value>
</componentInstanceProperties>
<componentInstanceProperties>
<name>icon</name>
<type>decorator</type>
<value>fallback</value>
</componentInstanceProperties>
<componentInstanceProperties>
<name>label</name>
<type>decorator</type>
<value>workspaceAPICloseTab</value>
</componentInstanceProperties>
<componentInstanceProperties>
<name>scrollable</name>
<type>decorator</type>
<value>true</value>
</componentInstanceProperties>
<componentInstanceProperties>
<name>width</name>
<type>decorator</type>
<value>340</value>
</componentInstanceProperties>
<componentName>workspaceAPICloseTab</componentName>
<identifier>workspaceAPICloseTab</identifier>
</componentInstance>
</itemInstances>
<name>utilityItems</name>
<type>Region</type>
</flexiPageRegions>
<flexiPageRegions>
<name>backgroundComponents</name>
<type>Background</type>
</flexiPageRegions>
<masterLabel>LWC Recipes Console App UtilityBar</masterLabel>
<template>
<name>one:utilityBarTemplateDesktop</name>
<properties>
<name>isLeftAligned</name>
<value>true</value>
</properties>
</template>
<type>UtilityBar</type>
</FlexiPage>
62 changes: 62 additions & 0 deletions force-app/main/default/flexipages/Workspace_API.flexipage-meta.xml
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,62 @@
<?xml version="1.0" encoding="UTF-8" ?>
<FlexiPage xmlns="http://soap.sforce.com/2006/04/metadata">
<flexiPageRegions>
<itemInstances>
<componentInstance>
<componentName>workspaceAPIOpenTab</componentName>
<identifier>c_workspaceAPIOpenTab</identifier>
</componentInstance>
</itemInstances>
<itemInstances>
<componentInstance>
<componentName>workspaceAPISetTabIcon</componentName>
<identifier>c_workspaceAPISetTabIcon</identifier>
</componentInstance>
</itemInstances>
<itemInstances>
<componentInstance>
<componentName>workspaceAPIDisableTabClose</componentName>
<identifier>c_workspaceAPIDisableTabClose</identifier>
</componentInstance>
</itemInstances>
<name>region1</name>
<type>Region</type>
</flexiPageRegions>
<flexiPageRegions>
<itemInstances>
<componentInstance>
<componentName>workspaceAPIOpenSubtab</componentName>
<identifier>c_workspaceAPIOpenSubtab</identifier>
</componentInstance>
</itemInstances>
<itemInstances>
<componentInstance>
<componentName>workspaceAPIHighlightTab</componentName>
<identifier>c_workspaceAPIHighlightTab</identifier>
</componentInstance>
</itemInstances>
<name>region2</name>
<type>Region</type>
</flexiPageRegions>
<flexiPageRegions>
<itemInstances>
<componentInstance>
<componentName>workspaceAPISetTabLabel</componentName>
<identifier>c_workspaceAPISetTabLabel</identifier>
</componentInstance>
</itemInstances>
<itemInstances>
<componentInstance>
<componentName>workspaceAPIFocusTab</componentName>
<identifier>c_workspaceAPIFocusTab</identifier>
</componentInstance>
</itemInstances>
<name>region3</name>
<type>Region</type>
</flexiPageRegions>
<masterLabel>Workspace API</masterLabel>
<template>
<name>flexipage:appHomeTemplateThreeColumns</name>
</template>
<type>AppPage</type>
</FlexiPage>
18 changes: 18 additions & 0 deletions force-app/main/default/flexipages/Workspace_API_Tab_Launcher.flexipage-meta.xml
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
<?xml version="1.0" encoding="UTF-8" ?>
<FlexiPage xmlns="http://soap.sforce.com/2006/04/metadata">
<flexiPageRegions>
<itemInstances>
<componentInstance>
<componentName>workspaceAPI</componentName>
<identifier>c_workspaceAPI</identifier>
</componentInstance>
</itemInstances>
<name>region1</name>
<type>Region</type>
</flexiPageRegions>
<masterLabel>Workspace API</masterLabel>
<template>
<name>flexipage:appHomeTemplateThreeColumns</name>
</template>
<type>AppPage</type>
</FlexiPage>
45 changes: 45 additions & 0 deletions force-app/main/default/lwc/workspaceAPI/__tests__/workspaceAPI.test.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
import { createElement } from 'lwc';
import WorkspaceAPI from 'c/workspaceAPI';
import { getNavigateCalledWith } from 'lightning/navigation';

describe('c-workspace-api', () => {
afterEach(() => {
// The jsdom instance is shared across test cases in a single file so reset the DOM
while (document.body.firstChild) {
document.body.removeChild(document.body.firstChild);
}
// Prevent data saved on mocks from leaking between tests
jest.clearAllMocks();
});

it('navigates to Workspace API page when Take me there! button clicked', async () => {
const API_NAME = 'Workspace_API';
const INPUT_TYPE = 'standard__navItemPage';

// Create component
const element = createElement('c-workspace-api', {
is: WorkspaceAPI
});
document.body.appendChild(element);

// Click button
const buttonEl = element.shadowRoot.querySelector('lightning-button');
buttonEl.click();

// Verify the component under test called the correct navigate event
// type and sent the expected recordId defined above
const { pageReference } = getNavigateCalledWith();
expect(pageReference.type).toBe(INPUT_TYPE);
expect(pageReference.attributes.apiName).toBe(API_NAME);
});

it('is accessible', async () => {
const element = createElement('c-workspace-api', {
is: WorkspaceAPI
});
document.body.appendChild(element);

// Check accessibility
await expect(element).toBeAccessible();
});
});
18 changes: 18 additions & 0 deletions force-app/main/default/lwc/workspaceAPI/workspaceAPI.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
<template>
<lightning-card
title="Workspace API"
icon-name="standard:scheduling_workspace"
>
<div class="slds-text-align_center slds-var-m-around_medium">
To see the Workspace API examples in action, you'll need to open the
"LWC Recipes Console App". If you are already there, open the
Workspace API examples on a tab by clicking on this button.
<p class="slds-var-m-around_medium">
<lightning-button
label="Take me there!"
onclick={navigateToWorkspaceAPIExamples}
></lightning-button>
</p>
</div>
</lightning-card>
</template>
16 changes: 16 additions & 0 deletions force-app/main/default/lwc/workspaceAPI/workspaceAPI.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
import { LightningElement, wire } from 'lwc';
import { NavigationMixin } from 'lightning/navigation';
import getSingleContact from '@salesforce/apex/ContactController.getSingleContact';

export default class Lds extends NavigationMixin(LightningElement) {
@wire(getSingleContact) contact;

navigateToWorkspaceAPIExamples() {
this[NavigationMixin.Navigate]({
type: 'standard__navItemPage',
attributes: {
apiName: 'Workspace_API'
}
});
}
}
10 changes: 10 additions & 0 deletions force-app/main/default/lwc/workspaceAPI/workspaceAPI.js-meta.xml
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
<?xml version="1.0" encoding="UTF-8" ?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
<apiVersion>59.0</apiVersion>
<isExposed>true</isExposed>
<targets>
<target>lightning__AppPage</target>
<target>lightning__RecordPage</target>
<target>lightning__HomePage</target>
</targets>
</LightningComponentBundle>
54 changes: 54 additions & 0 deletions force-app/main/default/lwc/workspaceAPICloseTab/__tests__/workspaceAPICloseTab.test.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,54 @@
import { createElement } from 'lwc';
import {
IsConsoleNavigation,
getFocusedTabInfo,
closeTab,
FOCUSED_TAB
} from 'lightning/platformWorkspaceApi';
import WorkspaceAPICloseTab from 'c/workspaceAPICloseTab';

describe('c-workspace-api-close-tab', () => {
afterEach(() => {
// The jsdom instance is shared across test cases in a single file so reset the DOM
while (document.body.firstChild) {
document.body.removeChild(document.body.firstChild);
}
});

// Helper function to wait until the microtask queue is empty. This is needed for promise
// timing when calling async functions
async function flushPromises() {
return Promise.resolve();
}

it('Calls the related platformWorkspaceApi methods', async () => {
// Create component
const element = createElement('c-workspace-api-close-tab', {
is: WorkspaceAPICloseTab
});
document.body.appendChild(element);

IsConsoleNavigation.emit(true);

// Query lightning-button component element
const buttonEl = element.shadowRoot.querySelector('lightning-button');
buttonEl.click();

await flushPromises();

// Compare if related platformWorkspaceApi functions have been called
expect(getFocusedTabInfo).toHaveBeenCalled();
expect(closeTab).toHaveBeenCalledWith(FOCUSED_TAB);
});

it('is accessible', async () => {
// Create component
const element = createElement('c-workspace-api-close-tab', {
is: WorkspaceAPICloseTab
});
document.body.appendChild(element);

// Check accessibility
await expect(element).toBeAccessible();
});
});
14 changes: 14 additions & 0 deletions force-app/main/default/lwc/workspaceAPICloseTab/workspaceAPICloseTab.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
<template>
<lightning-card
title="WorkspaceAPICloseTab"
icon-name="standard:scheduling_workspace"
>
<div class="slds-m-around_medium">
<lightning-button label="Close Focused Tab" onclick={closeTab}>
</lightning-button>
</div>
<c-view-source source="lwc/workspaceAPICloseTab" slot="footer">
Close a tab.
</c-view-source>
</lightning-card>
</template>
Loading

0 comments on commit d4d21e0

Please sign in to comment.