Skip to content

Workspaces Template Explorer OZ Options Restore #5946

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

Open
wants to merge 4 commits into
base: master
Choose a base branch
from
+161 −84
Open

Workspaces Template Explorer OZ Options Restore #5946

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
b24a56b
fix template selection to have oZ options
joeizang Apr 9, 2025
cb68e7c
Merge branch 'master' into oztemplates-contract-depsfix
joeizang Apr 9, 2025
f374386
Fix e2e
joeizang Apr 10, 2025
5a98b70
Merge branch 'master' into oztemplates-contract-depsfix
joeizang Apr 14, 2025
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
10 changes: 8 additions & 2 deletions apps/remix-ide-e2e/src/tests/workspace.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -320,9 +320,15 @@ module.exports = {
browser
.click('*[data-id="workspacesMenuDropdown"]')
.click('*[data-id="workspacecreate"]')
.waitForElementPresent(`*[data-id='create-ozerc1155{"upgradeable":"uups","mintable":true,"burnable":true,"pausable":true}']`)
.scrollAndClick(`*[data-id='create-ozerc1155{"upgradeable":"uups","mintable":true,"burnable":true,"pausable":true}']`)
// .waitForElementPresent(`*[data-id='create-ozerc1155{"upgradeable":"uups","mintable":true,"burnable":true,"pausable":true}']`)
// .scrollAndClick(`*[data-id='create-ozerc1155{"upgradeable":"uups","mintable":true,"burnable":true,"pausable":true}']`)
.waitForElementPresent('*[data-id="create-ozerc1155"]')
.scrollAndClick('*[data-id="create-ozerc1155"]')
.waitForElementVisible('*[data-id="modalDialogCustomPromptTextCreate"]')
.click('*[data-id="featureTypeMintable"]')
.click('*[data-id="featureTypeBurnable"]')
.click('*[data-id="featureTypePausable"]')
.click('*[data-id="upgradeTypeUups"]')
.modalFooterOKClick('TemplatesSelection')
.pause(100)
.waitForElementVisible('*[data-id="treeViewLitreeViewItemcontracts"]')
Expand Down
235 changes: 153 additions & 82 deletions apps/remix-ide/src/app/plugins/templates-selection/templates-selection-plugin.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@

import React from 'react'
import { FormattedMessage, useIntl } from 'react-intl'
import { FormattedMessage } from 'react-intl'
import { CustomTooltip } from "@remix-ui/helper"
import { AppModal } from '@remix-ui/app'
import { ViewPlugin } from '@remixproject/engine-web'
Expand Down Expand Up @@ -29,6 +29,8 @@ const profile = {
export class TemplatesSelectionPlugin extends ViewPlugin {
templates: Array<TemplateGroup>
dispatch: React.Dispatch<any> = () => { }
opts: any = {}

constructor() {
super(profile)
}
Expand Down Expand Up @@ -69,22 +71,24 @@ export class TemplatesSelectionPlugin extends ViewPlugin {
}

updateComponent() {
/*
This represents the different options available from the openzeppelin library.
const opts = {
// @ts-ignore: Object is possibly 'null'.
mintable: mintableCheckboxRef.current.checked,
// @ts-ignore: Object is possibly 'null'.
burnable: burnableCheckboxRef.current.checked,
// @ts-ignore: Object is possibly 'null'.
pausable: pausableCheckboxRef.current.checked,
// @ts-ignore: Object is possibly 'null'.
upgradeable: transparentRadioRef.current.checked ? transparentRadioRef.current.value : uupsRadioRef.current.checked ? uupsRadioRef.current.value : false

const errorCallback = async (error, data) => {
if (error) {
const modal: AppModal = {
id: 'TemplatesSelection',
title: window._intl.formatMessage({ id: !isElectron() ? 'filePanel.workspace.create': 'filePanel.workspace.create.desktop' }),
message: error.message,
okLabel: window._intl.formatMessage({ id: 'filePanel.ok' }),
cancelLabel: window._intl.formatMessage({ id: 'filePanel.cancel' })
}
await this.call('notification', 'modal', modal)
console.error(error)
}

}
*/
const createWorkspace = async (item) => {
const defaultName = await this.call('filePanel', 'getAvailableWorkspaceName', item.displayName)

const createWorkspace = async (item, templateName: string) => {
const defaultName = await this.call('filePanel', 'getAvailableWorkspaceName', item.displayName)
const username = await this.call('settings', 'get', 'settings/github-user-name')
const email = await this.call('settings', 'get', 'settings/github-email')
const gitNotSet = !username || !email
Expand All @@ -93,31 +97,18 @@ export class TemplatesSelectionPlugin extends ViewPlugin {
const modal: AppModal = {
id: 'TemplatesSelection',
title: window._intl.formatMessage({ id: !isElectron() ? 'filePanel.workspace.create': 'filePanel.workspace.create.desktop' }),
message: await createModalMessage(defaultName, gitNotSet, (value) => workspaceName = value, (value) => initGit = !!value),
message: await createModalMessage(defaultName, gitNotSet, (value) => workspaceName = value, (value) => initGit = !!value, (event) => setCheckBoxRefs(event), (event) => setRadioRefs(event), templateName),
okLabel: window._intl.formatMessage({ id: !isElectron() ? 'filePanel.ok':'filePanel.selectFolder' }),
}
const modalResult = await this.call('notification', 'modal', modal)
if (!modalResult) return
_paq.push(['trackEvent', 'template-selection', 'createWorkspace', item.value])
this.emit('createWorkspaceReducerEvent', workspaceName, item.value, item.opts, false, async (e, data) => {
if (e) {
const modal: AppModal = {
id: 'TemplatesSelection',
title: window._intl.formatMessage({ id: !isElectron() ? 'filePanel.workspace.create': 'filePanel.workspace.create.desktop' }),
message: e.message,
okLabel: window._intl.formatMessage({ id: 'filePanel.ok' }),
cancelLabel: window._intl.formatMessage({ id: 'filePanel.cancel' })
}
await this.call('notification', 'modal', modal)
console.error(e)
}

}, initGit)
this.emit('createWorkspaceReducerEvent', workspaceName, item.value, this.opts, false, errorCallback, initGit)
}

const addToCurrentWorkspace = async (item) => {
_paq.push(['trackEvent', 'template-selection', 'addToCurrentWorkspace', item.value])
this.emit('addTemplateToWorkspaceReducerEvent', item.value, item.opts, false, async (e, data) => {
this.emit('addTemplateToWorkspaceReducerEvent', item.value, this.opts, false, async (e, data) => {
if (e) {
const modal: AppModal = {
id: 'TemplatesSelection',
Expand All @@ -134,6 +125,26 @@ export class TemplatesSelectionPlugin extends ViewPlugin {
})
}

const setCheckBoxRefs = (event) => {
const { value, checked } = event.target
if (value === 'mintable') {
this.opts.mintable = checked
} else if (value === 'burnable') {
this.opts.burnable = checked
} else if (value === 'pausable') {
this.opts.pausable = checked
}
}

const setRadioRefs = (event) => {
const { value } = event.target
if (value === 'transparent') {
this.opts.upgradeable = value
} else if (value === 'uups') {
this.opts.upgradeable = value
}
}

return (
<RemixUIGridView
plugin={this}
Expand Down Expand Up @@ -162,57 +173,63 @@ export class TemplatesSelectionPlugin extends ViewPlugin {
hScrollable={false}
>
{template.items.map((item, index) => {
return <RemixUIGridCell
plugin={this}
title={item.displayName}
key={item.name || index}
id={item.name}
searchKeywords={[item.displayName, item.description, template.name]}
tagList={item.tagList}
classList={'TSCellStyle'}
>
<div className='d-flex justify-content-between h-100 flex-column'>
<div className='d-flex flex-column'>
<div>
{item.description && <span className='text-dark'>{item.description}</span>}
</div>
<div className='d-flex flex-wrap mb-2'>
{(item.opts && item.opts.upgradeable && item.opts.upgradeable === 'uupds') && <span className='badgeForCell badge text-secondary'>Upgradeable-UUPS</span>}
{(item.opts && item.opts.mintable) && <span className='badgeForCell text-secondary'>mintable</span>}
{(item.opts && item.opts.burnable) && <span className='badgeForCell text-secondary'>burnable</span>}
{(item.opts && item.opts.pausable) && <span className='badgeForCell text-secondary'>pausable</span>}
</div>
</div>
<div className='align-items-center justify-content-between w-100 d-flex pt- flex-row'>
{(!template.IsArtefact || !item.isArtefact) && <CustomTooltip
placement="auto"
tooltipId={`overlay-tooltip-new${item.name}`}
tooltipText="Create a new workspace"
>
<span
data-id={`create-${item.value}${item.opts ? JSON.stringify(item.opts) : ''}`}
onClick={async () => createWorkspace(item)}
className="btn btn-sm mr-2 border border-primary"
>
if (!item.opts) {
return (
<RemixUIGridCell
plugin={this}
title={item.displayName}
key={item.name || index}
id={item.name}
searchKeywords={[item.displayName, item.description, template.name]}
tagList={item.tagList}
classList={'TSCellStyle'}
>
<div className='d-flex justify-content-between h-100 flex-column'>
<div className='d-flex flex-column'>
<div>
{item.description && <span className='text-dark'>{item.description}</span>}
</div>
<div className='d-flex flex-wrap mb-2'>
{(item.opts && item.opts.upgradeable && item.opts.upgradeable === 'uupds') && <span className='badgeForCell badge text-secondary'>Upgradeable-UUPS</span>}
{(item.opts && item.opts.mintable) && <span className='badgeForCell text-secondary'>mintable</span>}
{(item.opts && item.opts.burnable) && <span className='badgeForCell text-secondary'>burnable</span>}
{(item.opts && item.opts.pausable) && <span className='badgeForCell text-secondary'>pausable</span>}
</div>
</div>
<div className='align-items-center justify-content-between w-100 d-flex pt- flex-row'>
{(!template.IsArtefact || !item.isArtefact) && <CustomTooltip
placement="auto"
tooltipId={`overlay-tooltip-new${item.name}`}
tooltipText="Create a new workspace"
>
<span
data-id={`create-${item.value}${item.opts ? JSON.stringify(item.opts) : ''}`}
onClick={async () => {
createWorkspace(item, template.name)
}}
className="btn btn-sm mr-2 border border-primary"
>
Create
</span>
</CustomTooltip>}
<CustomTooltip
placement="auto"
tooltipId={`overlay-tooltip-add${item.name}`}
tooltipText="Add template files to current workspace"
>
<span
data-id={`add-${item.value}`}
onClick={async () => addToCurrentWorkspace(item)}
className="btn btn-sm border"
>
</span>
</CustomTooltip>}
<CustomTooltip
placement="auto"
tooltipId={`overlay-tooltip-add${item.name}`}
tooltipText="Add template files to current workspace"
>
<span
data-id={`add-${item.value}`}
onClick={async () => addToCurrentWorkspace(item)}
className="btn btn-sm border"
>
Add to current
</span>
</CustomTooltip>
</div>
</div>
</RemixUIGridCell>
</span>
</CustomTooltip>
</div>
</div>
</RemixUIGridCell>
)
}
})}
{ template.name === 'Cookbook' && <RemixUIGridCell
plugin={this}
Expand All @@ -239,8 +256,11 @@ const createModalMessage = async (
defaultName: string,
gitConfigNotSet: boolean,
onChangeTemplateName: (name: string) => void,
onChangeInitGit: (name: string) => void) => {

onChangeInitGit: (name: string) => void,
onChangeCheckBoxRefs: (event: any) => void,
onChangeRadioRefs: (event: any) => void,
templateName?: string
) => {
return (
<>
<label id="wsName" className="form-check-label" style={{ fontWeight: 'bolder' }}>
Expand All @@ -254,6 +274,57 @@ const createModalMessage = async (
onChange={(e) => onChangeTemplateName(e.target.value)}
onInput={(e) => onChangeTemplateName((e.target as any).value)}
/>
{templateName?.includes('OpenZeppelin') ? (
<div id="ozcustomization" data-id="ozCustomization" style={{ display: 'block' }} className="mb-2">
<label className="form-check-label d-block mb-2" style={{ fontWeight: 'bolder' }}>
<FormattedMessage id="filePanel.customizeTemplate" />
</label>

<label id="wsName" className="form-check-label d-block mb-1">
<FormattedMessage id="filePanel.features" />
</label>
<div className="mb-2">
<div className="d-flex ml-2 custom-control custom-checkbox">
<input className="custom-control-input" type="checkbox" name="feature" value="mintable" id="mintable" onChange={onChangeCheckBoxRefs} />
<label className="form-check-label custom-control-label" htmlFor="mintable" data-id="featureTypeMintable">
<FormattedMessage id="filePanel.mintable" />
</label>
</div>
<div className="d-flex ml-2 custom-control custom-checkbox">
<input className="custom-control-input" type="checkbox" name="feature" value="burnable" id="burnable" onChange={onChangeCheckBoxRefs} />
<label className="form-check-label custom-control-label" htmlFor="burnable" data-id="featureTypeBurnable">
<FormattedMessage id="filePanel.burnable" />
</label>
</div>
<div className="d-flex ml-2 custom-control custom-checkbox">
<input className="custom-control-input" type="checkbox" name="feature" value="pausable" id="pausable" onChange={onChangeCheckBoxRefs} />
<label className="form-check-label custom-control-label" htmlFor="pausable" data-id="featureTypePausable">
<FormattedMessage id="filePanel.pausable" />
</label>
</div>
</div>

<label id="wsName" className="form-check-label d-block mb-1">
<FormattedMessage id="filePanel.upgradeability" />
</label>
<div>
<div className="d-flex ml-2 custom-control custom-radio">
<input className="custom-control-input" type="radio" name="upgradeability" value="transparent" id="transparent" onChange={onChangeRadioRefs} />
<label className="form-check-label custom-control-label" htmlFor="transparent" data-id="upgradeTypeTransparent">
<FormattedMessage id="filePanel.transparent" />
</label>
</div>
<div className="d-flex ml-2 custom-control custom-radio">
<input className="custom-control-input" type="radio" name="upgradeability" value="uups" id="uups" onChange={onChangeRadioRefs} />
<label className="form-check-label custom-control-label" htmlFor="uups" data-id="upgradeTypeUups">
UUPS
</label>
</div>
</div>
</div>
) : (
<></>
)}
<div className="d-flex py-2 align-items-center custom-control custom-checkbox">
<input
id="initGitRepository"
Expand Down