platformsh / demo-project Goto Github PK

Make it easier to update design, commands, views across states.

Description:

• Add notch effect to About block
• Move "show more" toggle inline with step title
• Change Redis code block color
• Add copy icon within code snippets

Currently: each push to PR going into main

Suggestions:

• when label is added
• only on this repo id (no forks)
• only delete project if previous steps succeed?

Currently the frontend build includes npm WARN deprecated. Address this:

Processing activity: Chad Carlson pushed to Default-v2
    Found 233 commits

    Building application 'frontend' (runtime type: nodejs:18, tree: 8758b3d)
      Generating runtime configuration.
      
      Executing build hook...
        W: npm WARN deprecated [email protected]: Use your platform's native performance.now() and performance.timeOrigin.
        W: npm WARN deprecated [email protected]: Modern JS already guarantees Array#sort() is a stable sort, so this library is deprecated. See the compatibility table on MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#browser_compatibility
        W: npm WARN deprecated [email protected]: Please use @jridgewell/sourcemap-codec instead
        W: npm WARN deprecated [email protected]: This package has been deprecated and is no longer maintained. Please use @rollup/plugin-terser
        W: npm WARN deprecated [email protected]: [email protected]
        W: npm WARN deprecated @babel/[email protected]: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-private-methods instead.
        W: npm WARN deprecated @babel/[email protected]: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-optional-chaining instead.
        W: npm WARN deprecated @babel/[email protected]: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-private-property-in-object instead.
        W: npm WARN deprecated @babel/[email protected]: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-numeric-separator instead.
        W: npm WARN deprecated @babel/[email protected]: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-object-rest-spread instead.
        W: npm WARN deprecated @babel/[email protected]: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-nullish-coalescing-operator instead.
        W: npm WARN deprecated @babel/[email protected]: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-class-properties instead.
        
        added 1613 packages, and audited 1614 packages in 31s
        
        286 packages are looking for funding
          run `npm fund` for details
        
        3 moderate severity vulnerabilities
        
        To address all issues (including breaking changes), run:
          npm audit fix --force
        
        Run `npm audit` for details.
        W: npm notice 
        W: npm notice New major version of npm available! 9.6.7 -> 10.2.3
        W: npm notice Changelog: https://github.com/npm/cli/releases/tag/v10.2.3
        W: npm notice Run npm install -g [email protected] to update!
        W: npm notice 
        
        > [email protected] build
        > react-scripts build
        
        Creating an optimized production build...
        Compiled with warnings.
        
        [eslint] 
        src/utility/api.ts
          Line 30:17:  Expected '===' and instead saw '=='  eqeqeq
          Line 32:24:  Expected '===' and instead saw '=='  eqeqeq
          Line 34:31:  Expected '===' and instead saw '=='  eqeqeq
          Line 39:31:  Expected '===' and instead saw '=='  eqeqeq
          Line 44:31:  Expected '===' and instead saw '=='  eqeqeq
          Line 49:31:  Expected '===' and instead saw '=='  eqeqeq
        
        Search for the keywords to learn more about each warning.
        To ignore, add // eslint-disable-next-line to the line before.

Otherwise it be ugly

Occasionally, the workflow fails because the bot user does not have the appropriate permissions to the project that they've created.

The backend app has defined a relationship but the PLATFORM_RELATIONSHIPS variable is empty after deployment

When the workflow has ended

https://platformsh.slack.com/archives/C05RZU4ES8G/p1695636311390549

Issue description

Following the demo project, after creating the staging branch via upsun branch staging and visiting the new staging URL, steps 3 (add Redis) and 4 (merge to production) are already marked as finished. However, I haven't done anything other than creating the new branch.

Steps to reproduce the issue

1. Start a new project.
2. Choose demo up.
3. Follow all the steps for initial setup.
4. Create a new staging branch.
5. Visit the frontend page.

Expected Result

• Introduction on how to add Redis and merge to production should be visible.

Actual Result

• Introduction on how to add Redis and merge to production are not visible.

There should be a way to retrieve the current estimate/usage data for a project at each step.

Create a test on each step change that ensures that the trial spend is not exceeded.

This can be restored once we have an organic way of getting this information.

Complete vendorization, updated instructions, and coming soon aspects of demo project intstructions that will be public.

With Git 24, there will be default resources on push. This changes the demo path step instructions, but also opens questions of what we can/cannot yet track.

Proposed Demo Steps to Review

• Step 1: Launch Demo
  • Remove resources:init from console OR sub with demo command
• Step 2: Create preview environment
• Step 3: Add Redis to preview environment
• Step 4: Merge preview environment into production
  • Will fail: Need to allocate resources to redis in production environment
  • should we consider polling for the updated state of production so that no page refresh is required
• Step 5: Set “default”? Redis resources
• Step 6: Scale Redis -> Down to min?
  • ?? Show user how to scale up OR down
  • we couldn’t detect this with polling today—so a manual page refresh would be required
• Celebrate: (Do no show as a step until all steps have been completed?)

Questions: can /run/config.json be used to detect step completion?

Something a user can also grok + use themselves

Since these projects are meant to be temporary and are owned by individual organizations, the security risks are quite low.

Let's suppress the NPM install warnings. I believe we can use --loglevel=error for this.

We've hidden the content areas because they are much longer than originally designed. This is because we do not have the demo:start command ready yet.

The impact of this is that it throws off the original design and the user cannot see the previous commands that they ran.

• console not yet providing resources:set or url --primary commands
• no link to project yet, or reference to that view
• step 1 registering as scale, even though just starting
• Update README as a potential in-console fallback

If a keybind is used in an IDE to uncomment the relationships and services, the relationships are not properly aligned. We need to fix this.

Some IDEs may not highlight the error and it will be tricky for the developer to troubleshoot.

When REACT_APP_ENABLE_DESIGN_DEBUG is set the API should not set the values as they are being set by the debugger.

Once the upsun scale command has been released, we need to update the readme.md to utilize it as opposed to the ./upsun e:curl command.

npm audit finds 6 moderate vulnerabilities. Address.

To reduce the noise here and highlight that commands are easy to remember, we could simply remove the project ID from the command. It's fairly low risk as the user will be prompted to select the project they want to delete if they do not provide one. Additionally, if the command is run from within the project directory, the command will default to the current project.

There are a few actions in both the staging and production steps that can be automatically detected when a new deployment has been received. We could use polling to auto-proceed to next steps when possible.

Test files are weird to have at the project level. Move into .github.

Leverage the API to go through the entire process on a new pull request to verify path. Include cleanup. Maybe even VR tests as a follow-up.

https://github.com/platformsh/demo-project/actions/runs/6771741648/job/18402796760?pr=84

Perhaps use the pr name (currently used for project name) instead

The upsun demo command will walk the user through enabling Redis.

We want to disable it via comments so that the user walking through the guide can easily uncomment it.

#66 added frontend/src/commands.json. The goal there is to ensure that:

• commands presented to users and commands tested are identical (or the slight differences between them are easily seen in one place)
• commands that can be copied and those presented are identical (since they are two different fields that could deviate via copypasta

Do the same thing for the relationships and service block of config.yaml. Right now there is a quick script that locates the block based on the add_service_start|end anchors, which could be reused to copy and output the block presented within the app, keeping them identical at all times.

For example, your can edit the relationship format to match Git 24 changes, and that will automatically be updated in the app and the project repo at the same time.

When fatalErrorMessage is set, which currently indicates that the /api/environment did not respond as expected, let's help the user get back to a good working state.

In the initial staging of this project, we were hacking together some API stuff. The mount in this app is no longer utilized and can be removed.

There are a number of style updates we've reviewed recently. Implement them.

https://docs.upsun.com/increase-observability/application-metrics/nodejs.html#a-simple-example-application

New SVG

<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M31.08 25.8267C29.8 26.4967 23.16 29.2167 21.75 29.9567C21.2729 30.2984 20.7085 30.4977 20.1225 30.5313C19.5366 30.565 18.9531 30.4316 18.44 30.1467C17.33 29.6167 10.28 26.7867 9 26.1467C8.36 25.8367 8 25.5867 8 25.3367V22.9967C8 22.9967 17.18 20.9967 18.67 20.4667C19.1705 20.2094 19.7223 20.0678 20.2848 20.0522C20.8473 20.0366 21.4061 20.1475 21.92 20.3767C23.18 20.8267 30.73 22.1867 31.98 22.6467V24.9967C32.02 25.2367 31.73 25.5067 31.08 25.8267Z" fill="#A41E11"/>
<path d="M31.0797 23.4167C29.7997 24.0867 23.1597 26.8067 21.7497 27.5467C21.2725 27.8884 20.7081 28.0877 20.1222 28.1213C19.5362 28.155 18.9528 28.0216 18.4397 27.7367C17.3297 27.2067 10.2797 24.3567 8.99965 23.7367C7.71965 23.1167 7.69965 22.7367 8.93965 22.2267C10.1797 21.7167 17.1997 18.9967 18.6897 18.4667C19.1901 18.2094 19.7419 18.0678 20.3044 18.0522C20.8669 18.0366 21.4257 18.1475 21.9397 18.3767C23.1997 18.8267 29.7997 21.4467 31.0397 21.9067C32.2797 22.3667 32.3597 22.7467 31.0797 23.4167Z" fill="#D82C20"/>
<path d="M31.08 21.8849C29.8 22.5549 23.16 25.2749 21.75 26.0149C21.2705 26.3512 20.7067 26.5471 20.122 26.5807C19.5373 26.6142 18.9548 26.4841 18.44 26.2049C17.33 25.6749 10.28 22.8249 9 22.2049C8.36 21.8949 8 21.6449 8 21.4049V18.9949C8 18.9949 17.22 16.9949 18.71 16.4549C19.2105 16.1977 19.7623 16.0561 20.3248 16.0405C20.8873 16.0249 21.4461 16.1358 21.96 16.3649C23.22 16.8249 30.77 18.1749 32.02 18.6349V20.9949C32.02 21.2749 31.73 21.5449 31.08 21.8849Z" fill="#A41E11"/>
<path d="M31.0797 19.4657C29.7997 20.1257 23.1597 22.8457 21.7497 23.5957C21.2683 23.9277 20.705 24.121 20.1213 24.1545C19.5375 24.188 18.9558 24.0604 18.4397 23.7857C17.3297 23.2457 10.2797 20.3957 8.99965 19.7857C7.71965 19.1757 7.69965 18.7857 8.93965 18.2757C10.1797 17.7657 17.1997 14.9957 18.6897 14.5057C19.1901 14.2485 19.7419 14.1069 20.3044 14.0913C20.8669 14.0757 21.4257 14.1866 21.9397 14.4157C23.1997 14.8757 29.7997 17.4957 31.0197 17.9957C32.2397 18.4957 32.3597 18.7957 31.0797 19.4657Z" fill="#D82C20"/>
<path d="M31.08 17.7751C29.8 18.4451 23.16 21.1651 21.75 21.9051C21.2705 22.2413 20.7067 22.4372 20.122 22.4708C19.5373 22.5044 18.9548 22.3743 18.44 22.0951C17.33 21.5851 10.28 18.7351 9 18.0951C8.36 17.7851 8 17.5351 8 17.2851V14.8951C8 14.8951 17.18 12.8951 18.67 12.3651C19.1705 12.1079 19.7223 11.9662 20.2848 11.9507C20.8473 11.9351 21.4061 12.046 21.92 12.2751C23.18 12.7351 30.73 14.0851 31.98 14.5451V16.9351C32.02 17.1851 31.73 17.4351 31.08 17.7751Z" fill="#A41E11"/>
<path d="M31.0796 15.3459C29.7996 16.0159 23.1596 18.7359 21.7496 19.4759C21.2701 19.8115 20.7071 20.0079 20.1229 20.0432C19.5386 20.0785 18.956 19.9514 18.4396 19.6759C17.3296 19.1359 10.2796 16.3059 9.01963 15.6959C7.75963 15.0859 7.71963 14.6959 8.95963 14.1859C10.1996 13.6759 17.1996 10.9359 18.6896 10.4159C19.1901 10.1586 19.7419 10.017 20.3044 10.0014C20.8669 9.98586 21.4257 10.0967 21.9396 10.3259C23.1996 10.7859 29.7996 13.3959 31.0196 13.8559C32.2396 14.3159 32.3596 14.6959 31.0796 15.3459Z" fill="#D82C20"/>
<path d="M23.1601 12.9978L21.1001 13.2278L20.6201 14.3578L19.8701 13.1178L17.4801 12.9078L19.2601 12.2578L18.7301 11.2578L20.4101 11.9078L22.0201 11.3978L21.6001 12.3978L23.1601 12.9978ZM20.5101 18.4478L16.6201 16.8478L22.1901 15.9978L20.5101 18.4478Z" fill="white"/>
<path d="M15.1299 15.9484C16.7647 15.9484 18.0899 15.4336 18.0899 14.7984C18.0899 14.1633 16.7647 13.6484 15.1299 13.6484C13.4952 13.6484 12.1699 14.1633 12.1699 14.7984C12.1699 15.4336 13.4952 15.9484 15.1299 15.9484Z" fill="white"/>
<path d="M25.6299 13.3281L28.9199 14.6281L25.6299 15.9281V13.3281Z" fill="#7A0C00"/>
<path d="M22.0195 14.7781L25.6495 13.3281V15.9281L25.2895 16.0781L22.0195 14.7781Z" fill="#AD2115"/>
</svg>

The current .env.sample uses old service references.

We can use this to work with the current version of the backend app.

{ "redis-session": [ { "username": null, "scheme": "redis", "service": "cache", "fragment": null, "ip": "169.254.16.113", "hostname": "2tzypw3n2gzkxba6ilcedbcfgu.cache.service._.eu-3.platformsh.site", "port": 6379, "cluster": "prz6bk4jimfai-main-bvxea6i", "host": "redis-session.internal", "rel": "redis", "path": null, "query": {}, "password": null, "type": "redis-persistent:7.0", "public": false, "host_mapped": false } ] }

End result:

# Has database and rediscache services
# PLATFORM_RELATIONSHIPS='eyAicmVkaXMtc2Vzc2lvbiI6IFsgeyAidXNlcm5hbWUiOiBudWxsLCAic2NoZW1lIjogInJlZGlzIiwgInNlcnZpY2UiOiAiY2FjaGUiLCAiZnJhZ21lbnQiOiBudWxsLCAiaXAiOiAiMTY5LjI1NC4xNi4xMTMiLCAiaG9zdG5hbWUiOiAiMnR6eXB3M24yZ3preGJhNmlsY2VkYmNmZ3UuY2FjaGUuc2VydmljZS5fLmV1LTMucGxhdGZvcm1zaC5zaXRlIiwgInBvcnQiOiA2Mzc5LCAiY2x1c3RlciI6ICJwcno2Yms0amltZmFpLW1haW4tYnZ4ZWE2aSIsICJob3N0IjogInJlZGlzLXNlc3Npb24uaW50ZXJuYWwiLCAicmVsIjogInJlZGlzIiwgInBhdGgiOiBudWxsLCAicXVlcnkiOiB7fSwgInBhc3N3b3JkIjogbnVsbCwgInR5cGUiOiAicmVkaXMtcGVyc2lzdGVudDo3LjAiLCAicHVibGljIjogZmFsc2UsICJob3N0X21hcHBlZCI6IGZhbHNlIH0gXSB9'