sfccdevops / sfcc_developers_core Goto Github PK

Overview:

Revert the folder structure back to what is originally was.

Acceptance Criteria:

Issue will be considered complete when the following criteria are met:

• Original Folder Structure was ./cartridges/rvw_dev_console
• Revert Webpack build paths
• Update README instructions

Description
In SFRA version I get the following:
Wrapped com.demandware.beehive.core.internal.template.ServletAbortException: Requested template 'dev_console/index' not found! (rvw_dev_console/cartridge/controllers/Console.js#25)

In SiteGenesis version,
I get the following error:
An Error Occurred!
We're sorry that your order could not be placed. This probably happened due to a very high order volume or temporary connection errors. Please wait a few minutes and resubmit your order. We won't process your payment until your order is placed successfully. If you have further questions, please contact us via [email protected]

To Reproduce
Steps to reproduce the behavior:

1. Follow the steps to add the cartridge to the sandbox
2. Upload the code
3. Hit the URL with Console-Show in the browser window
4. See error

Expected behavior
Console Window Editor should open

Is there an existing issue for this?

• I have searched the existing issues

Describe the Bug

Storefronts that have a CSS selector targetting all a tags with a text-decoration:underline can inadvertently add an underline to the Open Info icon in the toolbar.

Steps To Reproduce

Add the following CSS to observe the issue:

a {
    text-decoration: underline;
}

Expected Behavior

An underline is not visible for the Open Info icon in the toolbar

Screenshots

No response

Environment

No response

Additional Context

No response

Is there an existing issue for this?

• I have searched the existing issues

Describe the Bug

Downloading any of the files listed in the Assets section of a release results in an archive that is missing package.json. package.json is required to appropriately register the hooks needed to collect and render the toolbar and it's contents.

its

Steps To Reproduce

Clicking on the download button in the README takes you to the following page

https://github.com/sfccdevops/sfcc_developers_core/releases/tag/v1.3.0

Download either of the files listed under "Assets". The resulting archive will be missing the following file:

sfcc_developers_core/cartridges/sfcc_dev_tools/package.json

Expected Behavior

The following file is part of the downloaded archive:

sfcc_developers_core/cartridges/sfcc_dev_tools/package.json

Screenshots

No response

Environment

No response

Additional Context

No response

Overview:

Next to the Theme Selection, it would be nice to have a way to switch the layout to whatever mode is needed. Currently we are Split Screen 100% of the time, but it would be nice to be able to also choose to just see the Editor, or the Results panels ONLY. This becomes super helpful for long lines of text that get hard to read when there is a bunch of line wrapping, or in Raw JSON layout, no wrapping at all, and a LOT of scrolling is required.

Acceptance Criteria:

Issue will be considered complete when the following criteria are met:

• New Button Group with Three Button Options for Layout ( LEFT, SPLIT, RIGHT )
• Button to Switch to Current Layout with Adjustable Split Pane
• Button to Switch to 100% Code Editor
• Button to Switch to 100% Results
• When switching back to Split Pane, also restore the location of wherever the user previous had the split bar before switching layout modes

Documentation:

Screenshots, Attachments, Linked GitHub Issues, etc

So this is kind of what I was thinking layout wise... icons like this. Where we show a split, and maybe the left and right ones just have like super thin slivers for the side we plan on collapsing. If these were in a row next to the theme switcher, with the split screen in the center, this would be super sweet to change with ease.

Overview:

It would be sweet to get a basic code linter setup on this project to make sure we are putting out consistent code quality.

Acceptance Criteria:

Issue will be considered complete when the following criteria are met:

• Add eslint to the project
• Update npm test to run linter

Is there an existing issue for this?

• I have searched the existing issues

Describe the Bug

The SFCC Dev Tools cartridge was previously installed on our system and was updated to the latest release (v1.4.0). Proper installation steps were taken, yet when the upgrade was deployed to our development environment, there appears to be no benchmark data shown (see screenshot below).

Further testing on local Sandbox & deployed Staging environments appear to show the Benchmark feature working as expected with the default route & remote-include calls being properly benchmarked. This appears to be the same case for custom benchmarks as well. There are no errors being thrown on page load, nor warnings that indicate any issue with the cartridge.

In order to diagnose the issue, we have already taken the following steps after upgrading:

• Checked user permissions to ensure access to Dev Console
• Restarted Dev Environment
• Enabled/Disabled Caching

Given that the feature appears to only be broken in the Development environment, we believe that this is likely a configuration issue, preventing default calls to be benchmarked. Any steps or insight into what might be the source of this behavior would be appreciated.

Steps To Reproduce

N/A - Unable to fail benchmarks purposefully in non-Development environments without making changes to the cartridge itself.

Expected Behavior

Default benchmarks are shown and recorded

Screenshots

Image of Development environment w/ Benchmarks not shown

Environment

- Node:16.19.0
- npm:8.19.3

Additional Context

No response

Overview:

It would be nice to be able to support more than one tab at a time so you can have multiple files open, and switch between them, without being forced to close one file you might be working on just so you can open another.

Acceptance Criteria:

Issue will be considered complete when the following criteria are met:

• Ability to open more than one tab
• Each tab should have file modification indicator
• Update favicon if any tab has unsaved changes
• If there are more tabs open that space available to show tabs, provide solution to handle overflow
• Make sure tab layout adapts to different screen sizes ( mobile, tablet & desktop )
• Make sure tab layout adapts to changing layout ( Left, Right, 50/50 Split & Manually Adjusted Split to min/max00 )

Dev & QA Notes:

Any additional notes from developers or QA required to complete this issue.

Here is an existing example for the editor we are using and how they handle multiple tabs. While it does handle switching content, etc, it does not cover tracking file modification, nor does it handle size / layout requirements we have. So mostly just a good jumping off point.

I think it is 100% OK to leave this out as a requirement for a v1.0.0 release. I think it is fine if this comes after our first public release.

const server = require('server');

Any reason why server module is being used? For such a simple controller you could've used the "raw" SFCC APIs. This would've made the cartridge work anywhere, be standalone and not be dependent of SFRA anymore.

The translated controller would be something like this:

"use strict";

/**
 * Display development console template
 */
function Show() {
    var URLUtils = require("dw/web/URLUtils");
    var System = require("dw/system/System");
    var ISML = require("dw/template/ISML");

    if (!request.isHttpSecure()) {
        response.redirect(URLUtils.https("Console-Show"));
        return;
    }

    // We only allow on DEVELOPMENT_SYSTEM and disallow on STAGING_SYSTEM as well
    // since that is just as sensitive as PROD (due to data replication)
    if (System.getInstanceType() !== System.DEVELOPMENT_SYSTEM) {
        response.setStatus(418);
        response.getWriter().print("I'm a teapot!");
        return;
    }

    ISML.renderTemplate("dev_console/index", {
        urlPath: URLUtils.https("").toString() + "/default",
        staticPath: URLUtils.staticURL("/").toString(),
    });
}

module.exports.Show = Show;
module.exports.Show.public = true;

/**
 * Run the script and return the response
 */
function Run() {
    var URLUtils = require("dw/web/URLUtils");
    var System = require("dw/system/System");

    if (!request.isHttpSecure()) {
        response.redirect(URLUtils.https("Console-Show"));
        return;
    }

    // We only allow on DEVELOPMENT_SYSTEM and disallow on STAGING_SYSTEM as well
    // since that is just as sensitive as PROD (due to data replication)
    if (System.getInstanceType() !== System.DEVELOPMENT_SYSTEM) {
        response.setStatus(403);
        response.setContentType("application/json");
        response.getWriter().print(
            JSON.stringify({
                error: true,
                message: "Only available in SIG environments",
            })
        );
        return;
    }

    const code = request.getHttpParameterMap().get("code").getStringValue("");
    const maxDepth = request.getHttpParameterMap().get("maxDepth").getStringValue("");

    if (!code || !maxDepth) {
        response.setStatus(418);
        response.setContentType("application/json");
        response.getWriter().print(
            JSON.stringify({
                error: true,
                message: "I'm a teapot!",
            })
        );
        return;
    }

    let result = null;

    try {
        const myFunc = new Function("code", code);
        result = myFunc();
    } catch (e) {
        result = e;
    }

    const serializer = require("../scripts/serializer");
    result = serializer.serialize(result, maxDepth);

    if (typeof result === "string" || typeof result === "boolean" || typeof result === "number") {
        response.setContentType("application/json");
        response.getWriter().print(JSON.stringify([result]));
        return;
    }

    response.setContentType("application/json");
    response.getWriter().print(JSON.stringify(result || {}));
}

module.exports.Run = Run;
module.exports.Run.public = true;

Overview:

There appears to be a weird bug with Scrolling on the Results Pane. The JSON layout has one Scroll and the Tree view has another, and they do not seem to play well together on Windows. End result is that in Tree view, you see TWO vertical scrollbars.

Details:

Info about the Environment:

• Browser: Chrome
• Device: Desktop
• Operating System: Windows

Acceptance Criteria:

Issue will be considered complete when the following criteria are met:

• There should only be one scrollbar on the right pane

Steps to Duplicate:

A step by step guide written for a person who might be looking at this for the first time:

1. Use Chrome Browser on a Windows Desktop Device
2. Run return session or something that generates a LOT of output
3. Switch between Tree and JSON renderings

Overview:

On Windows Chrome, the Theme Selection ( and likely the Max Depth ) select lists have a White Font on a light colored background. On MacOS, this does not happen.

Details:

Info about the Environment:

• Browser: Chrome
• Device: Desktop
• Operating System: Windows

Acceptance Criteria:

Issue will be considered complete when the following criteria are met:

• Select Menu should have proper contrast between background color and font

Overview:

Currently, if you click a file in the file menu, the code is automatically executed. While initially that seemed like a good idea to me, @z1haze reminded me that most of the time, these files will be template code that require editing before they are run.

Acceptance Criteria:

Issue will be considered complete when the following criteria are met:

• Selecting a File from the File Menu should not trigger its execution
• Selecting a File should Clear the Results Panel
• Selecting a File should Load File Contents into Editor

Steps to Duplicate:

A step by step guide written for a person who might be looking at this for the first time:

1. Open File Menu
2. Select a File
3. View that code is current executed on File Load

Overview:

Before this gets used by too many people, it's probably best to make sure we have some sort of basic authentication that prevents anyone that does not have access to the sandbox Business Manager to run code on that instance.

Acceptance Criteria:

Issue will be considered complete when the following criteria are met:

• Only people that have permission to access Business Manager should be able to execute code
• Unauthenticated users that access the Console-Show should be redirected to login to Business Manager first
• Unauthenticated users that attempt to execute code on the Console-Run endpoints should receive either a 401 or 403 error message

Describe the Problem

SFCC does not have a super easy way to benchmark existing code partials.

Describe the Solution

Add a new Benchmark Tab to the Dev Tools Drawer that outputs benchmarking metrics.

Initial support would be ideal to have:

• Profile existing SFCC Events ( route:Start to route:Complete etc )
• Profile existing SFCC Hooks ( dw.system.request.onRequest etc )
• Add ability to wrap code blocks with benchmark code
• Benchmarking should use profiling metrics: name, parent, type, start and duration *

* Summary of each metric:

• name - Custom name for profiler use to track progress
• parent - Use the name of another profile to make this a sub profile
• type - Used for Grouping Benchmark
• start - Time in milliseconds profiling started
• duration - Total time in milliseconds it took to complete profile

Alternatives

No response

Additional Context

No response

Is there an existing issue for this?

• I have searched the existing issues

Describe the Bug

Benchmark labels that contain a long number of query parameters cause display issues

Steps To Reproduce

1. In your ISML template create a remote include that adds a lot of data to the query string, e.g.

<isinclude url="${URLUtils.url('ConsentTracking-Check',
        'lorem', 'lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ornare, mauris sit amet fringilla commodo, neque ex accumsan enim',
        'lorem2', 'lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ornare, mauris sit amet fringilla commodo, neque ex accumsan enim',
        'lorem3', 'lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ornare, mauris sit amet fringilla commodo, neque ex accumsan enim'

)}"/>

2. Load the page and navigate to the Benchmarks section of the toolbar.

Expected Behavior

The Benchmark label is truncated or otherwise contained so that other table columns are visible

Screenshots

Environment

No response

Additional Context

No response

Overview:

Currently there are a LOT of ["function"] properties being returned in the serializer. Mainly because I misunderstood what @z1haze was requesting when removing a checkbox that toggled this feature.

Acceptance Criteria:

Issue will be considered complete when the following criteria are met:

• ["functions"] should be removed from Serializer Output

Describe the bug
OOTB SFRA session forms values are not showing up

To Reproduce
Steps to reproduce the behavior:

1. Have registered account with the saved address
2. Login into this account and add the random product to the cart
3. Go to checkout and pick the shipment
4. Go to the billing page and validate values from the Dev Tools

Expected behavior
It should show values behind form session values

Screenshots

Desktop (please complete the following information):

• OS: macOS Big Sure
• Browser Chrome
• Version Version 94.0.4606.61 (Official Build) (x86_64)

Additional context
Investigating bug that in the SFRA country and state is wiped out after adding new payment method and hitting CheckoutServices-SubmitPayment found out that plugin was not able to support me and show form values from the session on the page load.

The following part of the documentation is not clear:

Add the Dev Tools Drawer and/or Dev Tools Console to your Storefront

Also those links are not directing to any section of the documentation
https://github.com/redvanworkshop/rvw_developers_core/tree/develop/cartridges/rvw_dev_tools#dev-tools-drawer
https://github.com/redvanworkshop/rvw_developers_core/tree/develop/cartridges/rvw_dev_tools#dev-tools-console

Overview:

Currently if you create a New File, any time you run the code in the editor, it updates the code in the file you have selected. Initially this was so you could create a new file, edit the code, and as soon as you ran it, it was saving the file to local storage. Future edits to the file also seemed like they would need to be updated. However, @z1haze correctly pointed out that most of these files should be acting as templates, and update them on run is not idea for these use cases.

Acceptance Criteria:

Issue will be considered complete when the following criteria are met:

• Creating a New File will require a Solution to Manually Save the File
• Editing an Existing File should NOT update the file when the RUN button is pressed
• It should probably be possible to EDIT a file via opening an existing file and having a new option to SAVE that file
• New SAVE button that becomes active if the Editor Code is different than the code saved in Local Storage
• New Indicator that reflects the state of the file ( new, unsaved, edited, etc ... possibly just copy how other IDEs do this )

Steps to Duplicate:

A step by step guide written for a person who might be looking at this for the first time:

1. Create a New File
2. Edit that File with some content
3. Run the Code
4. Reload the browser
5. Edit & Run the Code again
6. Reload the browser ( and see that the file contains the latest changes )

How data is populated on this screen? Is it from SFRA models or is it's hardcoded list of options from script API?
If for example I'm extending the account model in SFRA and wish to see my loyalty object here on the page I'm loaded from the code bellow, can I do it somehow?