Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Workspace API Recipes #890

Merged
merged 3 commits into from
Jan 10, 2024
Merged

Workspace API Recipes #890

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
8051c83
Add Workspace API examples
albarivas Dec 27, 2023
5c71bc9
Add tests
albarivas Jan 3, 2024
637ec00
Create tab launcher and reorder recipes
albarivas Jan 9, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
95 changes: 95 additions & 0 deletions force-app/main/default/applications/LWC_Recipes_Console_App.app-meta.xml
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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