Giter VIP home page Giter VIP logo

manager-ui's Introduction


You have found the code base which powers the Zesty.io instance manager. While this code base can be run locally it is only recommended to do so for developing. If you would like to learn more about Zesty.io visit our documentation at zesty.org

Architecture

The manager-ui has been architected following the PRPL strategy described by Houssein Djirdeh at Google. Every sub application has it's own bundle build. Application bundles are then pre cached dynamically by the app shell based upon the users settings.

Diagram showing Zesty.io instance manager architecture

Dependencies

TL;DR: Install all dependencies at the project root

In order to avoid the confusion of sub-app bundles specificying different versions that are actually included with the vendor bundle all dependencies have been lifted to the repo root. By lifiting all dependencies to the top level package.json we have a single location to manage dependency versions.

This means all sub dependency declarations are resolved, per npm default behaviour, by traversing up the project until it finds tehe node_modules directory at the root.

Bundling

Webpack is used as the bundler of choice. There is a single webpack config in the app shell which, using lazy routes, separates the sub-apps into individual bundles.

State Management

A redux store is used to manage state across all of the potential sub-apps. The shell setups a global store which is then shared to sub-apps that can dynamically inject reducers if needed.

Development

Requirements

Using Redux DevTools Extension

  1. Install Redux DevTools Extension
  2. Click on Redux DevTools icon in browser (or right click and open in new window)
  3. View sequence of Redux Actions and other features like state diffs and rewind.

Modify your hosts file

Every instance has a Zesty Universal ID (ZUID) which uniquely identifies itself to the API. When running the instance manager on your host machine you will need to point the unique instance URL to your host machines localhost by editing your hosts file. This is necessary as network requests to remote resources will fail a Cross-Origin Resource Sharing (CORS) request otherwise. This will then route through your localhost hitting the Webpack dev server and then make network requests to remote services as the expected referrer.

NOTE: Running the instance manager locally still connects to remote PRODUCTION resources. Meaning any actions you take will be done against your live instance.

e.g. linux: /etc/hosts windows: c:\windows\system32\drivers\etc\hosts

127.0.0.1  YOUR_UNIQUE_INSTANCE_ZUID.manager.zesty.io

Start the application

  1. Install dependencies: npm install
  2. Start webpack: npm run start
  3. Load the app in your browser: YOUR_UNIQUE_INSTANCE_ZUID.manager.zesty.io:8080

Run local Stage

npm run start:stage

Cypress Testing

Functional UI tests are run with cypress.io

To run the tests on your machine you will need to create a cypress.env.json file at the root of the repository, add the following JSON and replace the email/password with valid credentials.

Terminal npm run test:open

{
  "email": "EMAIL",
  "password": "PASSWORD"
}

Run Cypress

New terminal npm start

Open a second terminal npm run start:test

Pull Cypress Screenshots npm run ci:pull:screenshots


Connect Manager-ui to Material Design System

Connect to Zesty Material Design Systems npm link @zesty-io/material

In Material codebase make your edits npm run build => npm pack A .tgz file will be created copy the file path and install to Manager-Ui

EX:  npm i ~/Code/material/zesty-io-material-0.0.3.tgz

Shortcut to see edits without having to build material app again

Go into node_modules/@zesty-io/material/es/theme/index.js make a change and hot reload will show new edit locally.

MUI Notes

MUI ToggleButtonGroup API

ToggleButtonGroup We are adding exclusive prop to only allow one of the child values to be selected.

OnChange value: of the selected buttons. When exclusive is true this is a single value; when false an array of selected values. If no value is selected and exclusive is true the value is null; when false an empty array.

In some case when sending null this will break the togglebutton UI, thus the reasoning for adding toggleHandlers that checks null through the codebase.

Uploading Assets

To upload assets for your projects put them on the CDN, do not put them in the repository. Assets can be uploaded at https://console.cloud.google.com/storage/browser/assets.zesty.io?project=zesty-prod , upload to the respective folder that match your project name, for example, the SVGs and PNG that are being commited to manager-ui should be moved into this storage bucket under the manager folder, once they are uploaded they accessible from https://assets.zesty.io e.g. https://assets.zesty.io/website/assets/images/dxp_bottom_bg.svg

manager-ui's People

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

manager-ui's Issues

Support large CSV imports for content (50k)

Is your feature request related to a problem? Please describe.
Client would like to import CSV with 50k imports. Currently, would probably try to fire off 50k requests to the server at once.

Describe the solution you'd like
Need a way to batch/throttle requests, possibly showing progress of how many CSV imports are completed

Side Bar Content Dropdown View

Is your feature request related to a problem? Please describe.

  1. All ul elements are not aligned properly
  2. Some li child elements have a different opacity
  3. Overwhelming amount of li child elements icons
  4. Replicates of icons for parent list item
  5. dropdown icon is small and not centered
  6. Create New Item dropdown is not aligned

Describe the solution you'd like

  • 1. Left align all list elements
  • 2. make all child li same opacity
  • 3. Remove all child elements icons (SCRATCHED)
  • 4. Find better icons to match parent icons list (SCRATCHED FOR NOW)
  • 5. increase font size and center dropdown icon
  • 6. Select.less:150 => turn off overflow-y: scroll

Additional context
Screen Shot 2020-09-04 at 11 29 38 AM

OS contextual information

Is your feature request related to a problem? Please describe.
We should determine the users Operating System on the app shell store. This global info can be used within sub-apps to provide OS specific context. e.g. Display key commands that properly reflect the OS. MAC: CMD + S vs Win: CTRL + S

Describe the solution you'd like
Open to how this is done. Only requirement is it is done early on in the app shell and made globally available via the redux store.

Settings: Sample text not updated when adding Font

Describe the bug
When a user selects a font via Settings -> Styles -> Typography, there is sample text that says "This is a text example" below the dropdowns that allow users to select a font for the specific part of their instance. That sample text does not update when a user selects a font.

To Reproduce
Steps to reproduce the behavior:

  1. in Manager navigate to the Settings Section. (If you do not already have fonts installed on your instance, then navigate to Settings -> Fonts & install a font or two, and then proceed to step 2).
  2. Under Settings, navigate to Styles -> Typography.
  3. Use the dropdowns in Typography to select one of your installed fonts. Notice that the sample text does not update to reflect the newly chosen font.

Expected behavior
When I select one of my installed fonts, I expect the sample text to update to reflect the style of whatever font I chose from the dropdown.

Screenshots
If applicable, add screenshots to help explain your problem.
Screen Shot 2020-07-17 at 10 27 31 AM

Desktop (please complete the following information):
Kim:

  • OS: Mac Mojave 10.14.6
  • Browser Chrome Version
  • Version 84.0.4147.89 (Official Build) (64-bit)

Francine at Petdesk:

  • OS: Windows 10 2004
  • Browser: Chrome

Smartphone (please complete the following information):
n/a

Additional context
Loom: https://www.loom.com/share/1a1f2a81f60a455ab67e3c49670719b9
Issue logged in Monday: https://zestyio.monday.com/boards/107983738/pulses/650528783

Published item appears as Scheduled instead

Describe the bug
When Publishing, the isScheduled logic compares client's timestamp to server's publishAt timestamp.
When clicking 'Publish' button it then fetches publishings from server, and if local clock is behind server a few seconds, the newly published version will appear as isScheduled instead of isPublished

To Reproduce
Steps to reproduce the behavior:
0. (Your local clock must be behind the server clock a few seconds)

  1. Make changes to Item
  2. Save Item
  3. Publish Item
  4. See Scheduled button enabled

Expected behavior
Expect to see all buttons disabled

Screenshots
image

Desktop (please complete the following information):

  • OS: Ubuntu
  • Browser: Chrome

Post Publishing Tool

Is your feature request related to a problem? Please describe.
People are unable to gain an understanding of the interconnected published state of items. e.g. When items are related how to you understand what version (read: state of the content) should be the expected publicly available one.

Describe the solution you'd like
Potentially we can create a "Publish Dashboard". This would be an area which shows all the latest publish events and would ideally be able to describe the related nature of items. Additionally it would be useful to provide the current state upstream CDN object. Allowing for investigation of why the render requests do not meet the expect state of what the CMS shows.

Describe alternatives you've considered
A simple list of publish actions would be the quickest solution which may provide the insight people want but could use more thought. This will need a full feature development cycle (user research, design, testing) to build a truly considered solution.

Additional context
The need becomes most painful when a publish event occurs and the front-end breaks (read: does not meet the publishers expectations). At which point someone without intimate knowledge of the pattern won't know how to determine if it's something they changed or even where to start determining this.

SEO subapp updates

Is your feature request related to a problem? Please describe.
SEO page doesn't allow new redirects to be created

Describe the solution you'd like

  1. SEO page UI should show a search input instead of a dropdown for selecting a page to redirect to.
  2. php ajax endpoint should be replaced with a search endpoint that returns fuzzy match paths
  3. Needs UI tests to cover this new functionality

Recently view Header View

Is your feature request related to a problem? Please describe.

  1. Recently viewed does not stand out
  2. icons are to close
  3. recently viewed font color doesn't match other font link colors

Describe the solution you'd like

  • 1) make tabs stand out Find inspiration*
  • 2) spacing between icons
  • 3) Match side bar font colors @zesty-light-blue: #c3cddf;

Describe alternatives you've considered
Possibly convert to dropdown?
Recent Dropdown Button ? Functionality EX: https://react-bootstrap.github.io/components/dropdowns/

Additional context
Screen Shot 2020-09-04 at 12 59 53 PM

Accessibility and semantics notes:
Reactstrap : https://reactstrap.github.io/components/button-dropdown/

Buttons need to communicate to user: https://design-system.service.gov.uk/components/button/
Button accessibility notes : https://styleguide.github.com/primer/components/buttons/#url

Sentry integration

Is your feature request related to a problem? Please describe.
Track user runtime errors.

Describe the solution you'd like
Sentry.init, possibly other integrations in <AppError>

Manager User Interface GA

The purpose of this project is to track all of the task/dev needed to get the manager ui publicly released

  • DB: Foreign key constraint which seems to cause replication issue. Connect with Randy on work round.
    • DB: Stable SQL replication
      • API: Publish API Endpoints public
        • update site-manager-app publish endpoint

        • update atom publish endpoint

        • update node-sdk publish endpoint

        • update wrapper publish endpoint

        • WebEngine: Released to production traffic

          • DB: OYD cutover

  • API: Internal/External Redirect Links

  • API: Instance creation (this will be satisfied with instance copying)

    • UI: Accounts UI updated to trigger instance copy on instance creation.
  • API: Content Nav Ordering Endpoint

  • API: new endpoint to trigger a item purge

    • UI: update item purge button to use new api endpoint
  • API: Responses on search api results are inconsistent


  • UI: User Account Menu
  • UI: Workflow reqeusts endpoint to use cloud function
  • UI: Refactor FieldTypeImage design system component dependencies
  • UI: Update path part availability check on new content items to use the API search endpoint
  • UI: port live preview

  • TEST: Publish API
    • API: data integrity
    • WebEngine: publishing record resolution
    • UI: publishing button disable/enable

Additional Needs:

  • We need someway for manager to understand that an instance is ready. Because if instance creation is triggered in accounts it's possible that database will not be ready by the time someone opens the manage ui. This would cause unexpected/broken behavior in the manager UI.
    • Could be websocket to signal copy is complete.
    • Server sent event
    • Polling

Side Bar Icons styling

Is your feature request related to a problem? Please describe.

  1. The icons have different on hover colors
  2. Want to add background border radius behind icons
  3. Company title is not legible
  4. What does the Globe Icon represent? See 4
  5. SEO, Audit-Trail, Settings all missing Title attributes

Describe the solution you'd like

  • 1. @zesty-orange: #f17829;
  • 2. border: 5px solid @zesty-grey: #5b667d;
  • 3. Make company title white
  • 4. Replace Globe Icon with Zesty icon and version number (Default Favicon of Instance, the Favicon gets set in the globals modal)(SCRATCHED)
  • 5. Title="Input title"

Additional context
Screen Shot 2020-09-04 at 11 25 14 AM

Refactor Media to React

The media app was built using the riotjs JavaScript library. This is a legacy dependency and needs to be refactored out. There is also a window.zesty global which uses the riot.observable method to allow for listening to events within the media application.

Concepts

  • Bin: Represents the cloud resource of a GCP bucket
  • Group: A record which acts as a way to relate assets to be displayed together and thought of as a logical collection
  • Asset: An individual file uploaded to the media app. Can be of any file type. But will display and have differing experiences based upon the assets file type.

Architecture & Performance

The original media app was not designed for large amounts of images and groups. More than 10,000 images and 2,000 groups. Performance issues arise in the current experience when approaching these numbers. This is because of 2 issues identified so far;

Performance Issues

  1. All files are loaded from a bin. Doing so causes the response latency to increase as the amount of files returned does.
  2. Groups are render in the app sidebar menu. Once it reaches a certain amount, e.g. 2,000 or more, re-renders begin to become expensive and slow down app responsiveness.

Performance Requirements:

  • Responsive (non-laggy) UI interactions with multiple bins. Group amounts of 50,000 and asset amounts of 500,000. Theoretically this should scale to orders of magnitudes further with delayed loading.

State Management

All media state should be added to the app shell global redux store. Asset state is consumed by other sub apps which reference media.

Delayed Loading

Instead of loading all of the images from a bin initially we should only load the images relevant to the currently viewed group. Allowing state to build up over time.

Note: Bins can function as groups as well as being a bin. The will need to follow this pattern as well when they are viewed. Only loading the assets specific to that bin-group.

Search

If we change to delayed loading we will need a new media-manager-service API. One which will take a string and search for a matching asset. The current experience simply filters on the in memory assets as they are all loaded up front.

Deep Links

When originally built the app did not provide deep linking. This is something we want to added. The goal being to allow users to share links to exact assets they want to collaborate on. In addition the rest of the manager-ui can use these to allow cross sub-app functionality.

For example;

  • bin link: /media/1-000-00000
  • group link: /media/1-000-00000/2-000-00000
  • asset link: /media/1-000-00000/2-000-00000/3-000-00000

User Experience

Various experiences we want to add or improve with the media refactor

Asset Settings

Currently when an asset settings are viewed this is displayed as a "shelf". I.E. it slides open inline to display a larger (original size device screen allowing) image. It also shows meta data associated to the asset. Potentially we should consider an alternate solution. Maybe a modal? This would allow for a full screen take over providing more room to display original sizing of larger images on smaller devices. Whatever solution is used it should feel seamless when deep linking directly to an asset.

Asset Variations

With image assets we allow for dynamic resizing of them via the media-modify-service. The asset settings screen should display all available image variant URLs along with their parameters (dimension, crop style, etc). This will allow for access to these pre-created assets as well as providing a general sense of how the original image is being consumed.

Asset Generation

We should provide the ability to request a specific asset variation from the asset settings. I am imagine a couple of inputs; dimension and crop/fit, which would then make a request to the media-modify-service to generate that desired variant. Which would then display and provide the URL for the variant result.

Schema Editor View

Is your feature request related to a problem? Please describe.

  1. need spacing through the document

Describe the solution you'd like

  • 1) add padding through the whole page's content

Additional context
Screen Shot 2020-09-04 at 2 58 50 PM

Refactor UI Form Inspiration
Screen Shot 2020-09-04 at 3 01 10 PM

Aside in Action Component

Is your feature request related to a problem? Please describe.

  1. Need spacing & left align among all list items

  2. Green Published CTA is to small
    3)Make all list bullet points consistent

  3. spacing between icons

  4. Workflow Request button is way to large

  5. Automated Navigation Order => Huge increase/decrease button

  6. Available in Loops => want to make a more modern switch button

  7. dropdown triangle icon is small

Describe the solution you'd like

  • 1) li > padding: 0.5rem 0; Left align list bullets points
  • 2) font-size: check global fonts;
  • 3) Use the same bullet points from Item Status
  • 4) margin-right: .2rem;
  • 7) decrease the size of the whole button(SCRATCH)
  • 8) Attached are screen shots of potential cleaner switches(Future Edit)
  • 9) align-items: center; Caret =>font-size: 1.2rem;

Additional context
Screen Shot 2020-09-04 at 1 46 35 PM

Screen Shot 2020-09-04 at 2 19 12 PM

Newer Switch
Screen Shot 2020-09-04 at 2 20 48 PM

Adding a link to using wysiwyg doesn't work with relative paths

Describe the bug
In the wysiwig, creating a link will not function as expected when href is a relative path.

To Reproduce
Steps to reproduce the behavior:

  1. On a wysiwyg editor, with text.
  2. Highlight some text and click on the link icon to create a link for that text.
  3. in the URL input, add a relative path. i.e: /blog
  4. Click save.
  5. With the text still highlighted, click on the link icon and note that the slash is removed from the input field. i.e: it will now read "blog" instead of "/blog"
  6. Save the entry and preview the page.
  7. Click on the newly created link text.
  8. The relative path is added to the current url, and not to the root domain.

Expected behavior
Expect to have the relative path added to the root domain. Also expect to keep the "/"

Screenrecording
https://www.loom.com/share/9392a78519f34fdda1a1821d1a238d5e

Additional context
The issue does not persist when a full url is added. This is only for relative paths.

Settings: Saving styles changes shows two notifications

Describe the bug
When saving changes made under Settings -> Styles, click the Save button results in the user seeing 2 notifications:

  1. a gray: "no variables changes to save"
  2. a green "Data has been updated"

To Reproduce
Steps to reproduce the behavior:

  1. In Manager - navigate to Settings -> Styles
  2. Make a change to a style.
  3. Scroll down and click the green save button. There will be 2 notifications in the lower right-hand corner. First a gray that says there are no changes to be saved. And then a green one that says that your changes have been saved.

Expected behavior
After changes have been made to the Styles, I expect a successful save event to show the green "data has been updated" notification only.

Screenshots
n/a

Desktop (please complete the following information):
Kim:

  • OS: Mac Mojave 10.14.6
  • Browser: Chrome
  • Version 84.0.4147.89 (Official Build) (64-bit)

Francine at Petdesk:

  • OS: Windows 10 2004
  • Browser: Chrome

Smartphone (please complete the following information):
n/a

Additional context
Loom: https://www.loom.com/share/8a5b73d593354b0f9462948e2d7c4bf8
Monday pulse: https://zestyio.monday.com/boards/107983738/pulses/650553575

Content section live link links to old URL

Describe the bug
When the URL has been updated through the Accounts instance settings drawer interface the live link in the Content item editing view is not updated.

To Reproduce

  1. In Accounts navigate to a test instance that already has a URL set.
  2. Click on the cog icon to open the Instance's settings drawer.
  3. In the settings drawer create another URL.
  4. Open the content manager.
  5. From the Content section's left-hand sidebar select Home or Homepage.
  6. From the content editing view look at the live link that's shown at the top of the - it will still show as the old URL.

Expected behavior
When a new URL is added in Accounts as the live URL, it should populate where all live links are shown throughout the Manager interface.

Screenshots
Screen Shot 2020-07-23 at 2 19 50 PM

Desktop (please complete the following information):

  • OS: Mac Mojave
  • Browser Chrome
  • Version 84.0.4147.89 (Official Build) (64-bit)

Smartphone (please complete the following information):
N/A

Additional context
This issue has been reported by GroupBy multiple times, however Randy has fixed it on the fly. I believe AHS has also reported this too. I have also seen this on many PetDesk instances, however they haven't brought it up as an issue.


(related to Zendesk ticket #1261)
gz#1261


(related to Zendesk ticket #1333)
gz#1333


(related to Zendesk ticket #722)
gz#722

Media Manager View > MediaApp component

Is your feature request related to a problem? Please describe.

  1. Search bar needs to be responsive, add height, doesn't need to be that long
    2)Missing icon in search bar button
  2. Tutorial button needs exit button instead of a asterisk

Describe the solution you'd like

  1. increase height/ copy search bar from global search
  2. add search icon to button
  3. swap out asterisk for x in tutorial pop up modal

Additional context

Screen Shot 2020-09-04 at 2 52 35 PM

Help indicator (?) has higher z-index than modal

Describe the bug
Question mark Icon has higher z-index than modal on Content Editor

To Reproduce
Steps to reproduce the behavior:

  1. Go to Content Edit
  2. Make modifications but don't save
  3. Click to Head tab
  4. See Modal asking if you want to save/discard
  5. see (?) icon underneath

Expected behavior
z-index of ? should be below modal

Screenshots
Screenshot from 2020-07-22 12-56-50

Desktop (please complete the following information):

  • OS: Ubuntu
  • Browser: Chrome
  • Version: 83

Rearranging schema items has a lag

Describe the bug
Dragging items in a schema to rearrange their order has horrible response times. I often drag and when I let go, I wait 20 seconds for it to refresh with the change.
To Reproduce
Steps to reproduce the behavior:

  1. Go to Schema
  2. Click on a content model
  3. Click on a field and drag to reorder it
  4. See slow response time

Expected behavior
Expected behavior is to be able to drag and drop to reorder without any lag.

Additional context
This was originally reported by Dan Peliter from GroupBy on Slack. Original message:
@here not sure if it's server issues happening now, or if it's just the way the feature works, but dragging items in a schema to rearrange their order has horrible response times. I often drag and when I let go, I wait 20 seconds for it to refresh with the change. The CMS has a simple Sort Order field that works beautifully for end users....not sure why the schema builder isn't just using the same thing. It would be much easier/faster.

Redirect upload not working with MS Excel CSV

Describe the bug
Zesty's mass-redirect tool does not recognize CSVs that have been saved from Excel on PCs.

To Reproduce
Steps to reproduce the behavior:

  1. Using Windows and MS Excel create a new sheet and format it for redirects: https://zesty.org/services/manager-ui/health/redirects#csv
  2. Use Excels Save As option to save the sheet as a CSV
  3. In the Manager UI's Health tab, use the mass redirect CSV upload button to upload the CSV you created in step 2
  4. See error 'Imports must be a CSV file'

Expected behavior
Zesty will recognize all PC MS Excel CSV save-as options (CSV - Macintosh, CSV - MS DOS, CSV - Comma Delimited) as valid CSVs when users upload them to create mass redirects.

Screenshots

All of these file types are not recognized as CSVs when uploaded to Zesty for mass-redirects:
ms-excel-csv-export-types

Screenshot from Frontdoor's Loom:
Screen Shot 2020-08-17 at 11 58 37 AM

Desktop (please complete the following information):

  • OS: Windows
  • Browser Chrome
  • Version ?? latest? 84.0.4147.105 (Official Build) (64-bit)

Smartphone (please complete the following information):
n/a

Additional context
Gisele tried to create this issue on Mac with MS Excel and didn't get an error when she uploaded. This issue only impacts Windows with MS Excel.

I checked the network tab when I tried to upload a file but there was nothing sent/received - nothing - no errors, etc. it was just blank, however there was an error in the UI.

sub-app dependent on legacy endpoints

There are app config references to legacy services and apis. These need to be updated to their latest iterations.

  • ${CONFIG.service.sites}

  • $[CONFIG.service.manager}/ajax

  • Media

  • Content -> Workflow Request

  • SEO -> search paths

Redirect CSV upload says "pre-existing" for new redirects

Describe the bug
More like bad UX - discussed this with @nibblebot and he's working on it.

To Reproduce
Steps to reproduce the behavior:

  1. Go to Health tab
  2. Upload a CSV of redirects
  3. Once they load there is text that say "pre-existing" (see image below)

Expected behavior
When redirects are created from a CSV I would the message to say "created" instead of "pre-existing"

Screenshots
Screen Shot 2020-08-13 at 11 53 23 AM

Desktop (please complete the following information):

  • OS: Mac Mojave
  • Browser Chrome
  • Version 84.0.4147.105 (Official Build) (64-bit)

Smartphone (please complete the following information):
n/a

Additional context
Add any other context about the problem here.

Global Help Experience

Is your feature request related to a problem? Please describe.
We want a really robust help experience which provides users a way to quickly find answer to question they may face when using the product.

Describe the solution you'd like
Located in the bottom left corner there is a help icon which when clicked will open a flyout. This flyout should contain a wealth of information and links. It'll need to integrate with zesty.org, potentially a search experience powered by zesty.org gitbook apis.

Help icons collocated to actions within the product could trigger opening up the global help fly out to provide more in depth info.

Describe alternatives you've considered
TODO

Additional context
Wireframe: https://docs.google.com/drawings/d/1gIeltso0kCp8MRn5lWe9iEZm4kV-74f6Thr7C50SMcg/edit

Requirements

  • support email link will be dynamic based upon the presence of a the instance.planID value

Release

  • PR for functionality
  • PR for visual design

Web IDE: allows user to delete loader without warning

The editor in the manager allows the user to delete loader without warning. This then breaks every HTML page on the site and it is not obvious what has happened or that the user needs to add a loader back with a call to {{current_view}} before anything will work again. This is a terrible product experience.

Suggest some combination of the following to improve this:

  • Don't let the user delete loader at all, and parse it for {{current_view}} to validate when saving
  • Let the user delete loader and have the system fall back to one that contains just {{current-view}} if it doesn't find a file called loader
  • Let the user delete loader but only after they have OK'ed an explicit message that tells them that this will break all HTML pages on their site (which may be OK for example if the instance they are working with has no HTML views because it is a pure backend)

FieldTypeDate clicking calendar button does nothing

Describe the bug
Trying to click the calendar button does nothing on Date fields.

To Reproduce
Steps to reproduce the behavior:

  1. Go to Content Item with a Date Field
  2. Click on Calendar Icon
  3. Nothing happens

Expected behavior
Clicking the calendar icon should pop up the calendar

Screenshots
image

Desktop (please complete the following information):

  • OS: Ubuntu
  • Browser: Chrome
  • Version: 83

Publishing Table on Individual Content View

Is your feature request related to a problem? Please describe.
Customers need to see the history and current and future of what versions have been and will be published

Describe the solution you'd like
A tab on the content page next to meta that shows a table of chronological publish records

Port live preview

We need to port the existing "Live Preview App". This one is similiar to "sub-apps" in that it is managed and built separately. But differs in that it does not load within the app shell. It is a pop out browser window and therefore exists as a wholly separate app.

  • bring over existing sub-app code
  • investigate shared state between primary shell app and browser pop up window. There maybe unique considerations with how we are now doing dynamic reducer injection.
  • update sub-app code to work with new CONFIG variables
  • update sub-app to work with new single webpack build

FieldTypeDropdown doesn't open/close properly

Describe the bug
Clicking on Select doesn't open the Dropdown. You have to click the arrow button to open the Dropdown.
Once open, selecting an option does not close the Dropdown.

To Reproduce
Steps to reproduce the behavior:

  1. Go to a Content Item with a Dropdown field type
  2. Click on the Option portion of the Dropdown
  3. Dropdown does not open
  4. Click Arrow
  5. Dropdown does open
  6. Click an Option in the Select
  7. Dropdown does not close

Expected behavior
Expect Dropdown to open when clicking on Option. Expect Dropdown to close when clicking on Option.

Screenshots
image

Desktop (please complete the following information):

  • OS: Ubuntu
  • Browser: Chrome
  • Version: 83

Web IDE: Post Release Cleanup

An assorted list of post release items to fix.

Inconsistent files response

Issue
views is return all branches (dev & live) whereas stylesheets and scripts are only returning dev.

Solution
These endpoints should only return files for one branch at a time, which must be specified on request

Missing Branch in URL

Issue
The current app url structure is; /code/file/views/11-f2bcd4f7f4-3z1pd2 which translates into /APP/file/TYPE/ZUID. It does not account for branch information so in the future when we support branches we won't be able to load the branch for the requested ZUID

Solution
Change url structure to /APP/BRANCH/TYPE/ZUID

Tracking published versions state

issue
Currently we filter out the returned "live" branch files and derive that files version as the current published version. Which is a correct assumption. This is problematic due to the "Inconsistent files response" issue.

solution
Change API to only returned files for requested branch. Update app Redux stores to track files by branch. This will allow resolving a ZUID out of the "live" branch store to determine it's current published version.

Stylesheet failed save loop

issue
If more than one less or scss file has a compile issue you will get into failed save loop preventing any of them from being saved. This is due to the fact we run them through the compile process on save to ensure code syntax and variable references are correct.

solution
Do not compile on save but only on publish. This will solve the save loop allowing users to correct invalid stylesheets which will allow them to self service on these syntax errors. While the publish compile will still confirm that correctness of the stylesheet syntax before sending the changes live.

Publishing site.css

issue
Because we compile all stylesheets together into a "site.css" bundle the current action of "publishing" and individual creates an incorrect understanding. This misunderstanding is further amplified by the fact we have a "variables" feature which allows changing a styling variable in a separate area of the product which isn't reflected on the site unless a user goes to the Web IDE and publishes a stylesheet file

soution
I think we need to rework this API. Instead of "publishing" a stylesheet file I think you should have to publish a bundle (e.g. site.css). There would then be these following flows.

a) User edits stylesheetA, user saves stylesheetA, user edits stylesheetB, user saves stylesheetB, user publishes bundle site.css
b) User edits variableA, user saves variableA, user edits variableB, user saves variableB, user publishes bundle site.css

To support this the API https://instances-api.zesty.org/?version=latest#33c525b0-fcf3-440f-a587-c96fac5756e9 would be changed to /web/stylesheets/compile/site.css?purge_cache=true

Workflow Requests uses legacy endpoints

Describe the bug
Currently the workflow requests feature is POSTing to the legacy endpoint: https://8xbq19z1.manage.zesty.io/ajax/request_content.ajax.php with a request body of ;

url: https://8xbq19z1.manage.zesty.io/#!/content/6-556370-8sh47g/7-b939a4-457q19
page: All Field Types
message: hey josh could yuou look at this.
sections[dropdown]: on
email[[email protected]]: on

To Reproduce

  1. Select user to send to
  2. Select field to highlight
  3. Enter message
  4. Click send
  5. Inspect network request

Expected behavior
Use the latest email cloud function. https://github.com/zesty-io/gcp-cf/tree/master/sendEmail

Screenshots
image

Color field type doesn't allow user to paste hex code

Describe the bug
Color field types does not allow user to paste (cmd+v) a copied hex code in. Users must type them in.

To Reproduce
Steps to reproduce the behavior:

  1. Get a hex code such as #000000 and copy it.
  2. In Zesty, in a color field type click the up/down arrows to get to Hex
  3. Click into the hex textbox and try to paste in the hex code that you copied in step 1
  4. See that you cannot paste in hex codes

Expected behavior
Users should be able to paste in hex codes to the textbox in the color field type.

Screenshots
If applicable, add screenshots to help explain your problem.

Screen Shot 2020-08-26 at 2 53 14 PM

Desktop (please complete the following information):

  • OS: Mac Mojave
  • Browser Chrome
  • Version 84.0.4147.135 (Official Build) (64-bit)

Smartphone (please complete the following information):
N/A

Additional context
Add any other context about the problem here.

Users cannot paste in any values for the colors: RGB, HSL, or Hex. While the main issue is the inability to paste in values to the Hexidecimal color, it would be great to be able to paste in values for RGB and HSL too.

OS contextual key commands

Describe the bug
When we display key commands, e.g. "CMD + S", these need to be contextual to the users OS.

Blocked by: #55

Instance Generation

We need to discuss the option so for how instances will be "generated" going forward. By creation we mean the generation of a instances database and schemas along with population of default content and settings.

Currently we are implementing an instance copy feature. Which will be used for the generation of new instance within this manager-ui experience. Where this is triggered can be either manager-ui or accounts-ui. Either way the manager-ui will want the ability to understand whether an instance has been generated and is ready to be loaded. These concerns are also being tracked on the feature request https://github.com/zesty-io/instances-api/issues/292

Once a decision is made there will be UI work to complete which we will document here after choosing a solution.

Notification takes up full width, blocking UI underneath

Describe the bug
When a notification is visible, any UI to the right of the notification will not be clickable.

To Reproduce
Steps to reproduce the behavior:

  1. Trigger a notification or click on notification bell
  2. Try to interact with the UI to the right side of the notification
  3. Cannot interact with UI

Expected behavior
Notification should not block UI underneath

Screenshots
Screenshot from 2020-07-22 12-54-08

Desktop (please complete the following information):

  • OS: Ubuntu
  • Browser: Chrome
  • Version: 83

Leads App should scroll or paginate

Is your feature request related to a problem? Please describe.
More than about 20 leads causes leads to go past the end of the page, but there is no way to scroll or paginate to view them.

Describe the solution you'd like
Fix scrolling for single page of leads

Describe alternatives you've considered
Pagination

internal/external links do not have a publish button

Describe the bug
internal/external links do not have a publish button. Since they do not have a publish button they do not show up with the {{ navigation }} call because a user does not have a way to send those links live.

To Reproduce
Steps to reproduce the behavior:

  1. Navigate to pd site: Silver Springs Shores Animal Hospital 3731
  2. Open the manager
  3. Look for their external link - which links to their pharmacy which only has a save button.
  4. check their preview - you'll see the online pharmacy link in {{ navigation }}
  5. check the live site - there is no pharmacy link in the

Expected behavior
Internal/external links will have a publish button which will allow users to send internal/external links live.

Screenshots
If applicable, add screenshots to help explain your problem.

Screen Shot 2020-07-27 at 9 24 43 AM

Screen Shot 2020-07-27 at 9 24 25 AM

Desktop (please complete the following information):

  • OS: [e.g. iOS]
  • Browser [e.g. chrome, safari]
  • Version [e.g. 22]

Smartphone (please complete the following information):

  • Device: [e.g. iPhone6]
  • OS: [e.g. iOS8.1]
  • Browser [e.g. stock browser, safari]
  • Version [e.g. 22]

Additional context
When a publish button is added, if a delete and/or unpublish button could be added as well that would be very helpful. once a link is added there is no way to remove it. while there is currently a work around - this is a PD need.

SubHeader styles update

Is your feature request related to a problem? Please describe.

  1. Content, Meta, Head links don't stand out
  2. Launch Instance should be larger CTA
  3. Icons is to close needs spacing
  4. Current Version & Version # has no hover effect
  5. Version Dropdown date ugly brackets
  6. Repetitive "Version" from Publish and Save
  7. Calendar button is inconsistent with other buttons

Describe the solution you'd like

  • 1) Bold font, remove underline, make button
  • 2) Larger font and more prominent
  • 3) increase svg icon width to 1.5em
  • 5) Remove brackets
  • 6) Remove "Version" from Publish and Save (Scratched)
  • 7) calendar : padding: 0.8rem;

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Screen Shot 2020-09-04 at 1 11 13 PM

Delete Head Tag produces error in console

Describe the bug
Deleting a Head Tag produces a console error

To Reproduce
Steps to reproduce the behavior:

  1. Go to any Content Item
  2. Click on 'Head' tab
  3. Add a Head Tag
  4. Delete Head Tag
  5. Console shows error

Expected behavior
No errors

Screenshots
Screenshot from 2020-07-22 12-36-51

Desktop (please complete the following information):

  • OS: Ubuntu
  • Browser: Chrome
  • Version: 83

Required fields are still required after field is deactivated

Describe the bug
When a field is marked as required in Schema in a multi-page or Headless model and is subsequently deactivated, it will still be required when creating a new item.

To Reproduce
Steps to reproduce the behavior:

  1. In Schema navigate to a multi page set or headless set
  2. Either mark fields as required or create new fields and mark them as required
  3. Deactivate at least one of the fields that you've marked as required.
  4. Navigate to the model that you've edited in the Content Section
  5. Create a new item
  6. Fill out the fields and click Create and you'll see an error for the deactivated required field

Expected behavior
Once a required field has been deactivated it should no longer be required in the content section.

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

  • OS: Mac Mojave
  • Browser Chrome
  • Version 84.0.4147.105 (Official Build) (64-bit)

Smartphone (please complete the following information):
n/a

Additional context
Here is a Loom of the issue in action: https://www.loom.com/share/8a2fad0ba2ef4b1a9b1638dd53c89a58

Global User Account Menu

Is your feature request related to a problem? Please describe.
We need an experience which will allow customers to quickly link back to accounts, logout and switch instances.

Describe the solution you'd like
This will be a flyout located in the upper left corner which will be triggered by clicking on the instance favicon. If no favicon is set we should display an experinece which takes the user to the globals to set the instance favicon.

Describe alternatives you've considered
TODO: consider alternatives. Research users needs more. Find prior art within other apps that we like.

Additional context

Tasks:

Ability to add more relationships with One_to_many field types

Is your feature request related to a problem? Please describe.
Customers have expressed frustration with the limited ability assign relationships with one_to_many field types - it tops around out at 10-13 relationships.

Describe the solution you'd like
They would like the ability to create an unlimited number of relationships.

Describe alternatives you've considered
Another way to design such a relationship could be to add extra one_to_one relationships to a model and iterate through them but it's much more cumbersome for content entry and adds a lot more code than necessary for a one_to_many field.

Additional context
Add any other context or screenshots about the feature request here.

Update path part availability check

Describe the bug
When a new item is created the meta path input value is checked against the back-end to ensure it's an available path and not currently being used. It is currently hitting a legacy endpoint content/path-part-availability. This needs to get update to use the new API search endpoint

To Reproduce
Steps to reproduce the behavior:

  1. Create a new item. e.g. https://8xbq19z1.manage.zesty.io/#!/content/6-e3d0e0-965qp6/new
  2. Enter a title, which will auto populate the path meta field based on that value
  3. Inspect network request to see api check

Expected behavior
This logic needs to consume the API search endpoint. Need to confirm that the endpoint can matching against full_path. This endpoint will return LIKE matches, meaning for a query of q=/path/to/my/blog/post will return N number of matches. e.g,

[
 "/path",
"/path/to/",
"/path/to/my/",
"/path/to/my/blog/post"
]

The front-end will need to check for a exact match. e.g "/path/to/my/blog/post" === "/path/to/my/blog/post"

Screenshots
image

Desktop (please complete the following information):

Additional context

Web IDE: file creation UX

image

Requested changes to improve the UX

  • The drop down -- none -- should read -- choose a file type --,
  • when the option -- choose a file type -- is selected, the create button should be hidden
  • Each file type from the dropdown should display a description helper text below the dropdown, but above the file name input

File Types and their Description

Snippet (html)
Parsley accessible file meant to abstract common use of code, or for organizing file build. Examples: slider, footer, header. These can be used inside of each loops as well.

Custom File Type/Endpoint (Mixed Extensions)
Parsley accessible file for creating endpoints or custom experiences. These files need to be named with a full path with an extension like /my/file/path.json. The file is accessible at hash-dev.preview.zesty.io/my/file/path.json. File types that can be used: css, html, json, js, xml, css, csv, tsv, xml, yaml, md, svg, rss, ics, vcf, xhtml.

Javascript File (js)
A javascript file that is automatically concatenated into a the single /main.js file that is automatically loaded by webengine. No transpiling occurs.

CSS File (css)
A cascading stylesheet that is automatically concatenated into a single css file /main.css which is auto included in the head of webengine web pages. Sort Order of the concatenation can be controlled. No transpiling occurs.

LESS File (less)
Has access to settings > variables. A cascading stylesheet that is automatically concatenated into a the single /main.css. Sort Order of the concatenation and transpiling can be controlled.

SCSS File (less)
Has access to settings > variables. A cascading stylesheet that is automatically concatenated into a the single /main.css. Sort Order of the concatenation and transpiling can be controlled.

AppCrash: bad reference to sitePreviewURL

Describe the bug
In the code editor there is a reference to sitePreviewURL which is broken in certain files.

To Reproduce
Steps to reproduce the behavior:

Expected behavior

Screenshots
image

Find item by full path

Is your feature request related to a problem? Please describe.
At the moment you can not lookup an existing zesty content item by it's full path. Meaning if you knew the url which you wanted to redirect to you could not search on that value. You need to provide the title for that item, which is less likely to be known at the time of redirect creation.

Blocked by: https://github.com/zesty-io/instances-api/issues/297

Adding new Head Tag produces console error

Describe the bug
Adding a new head tag in Content section

To Reproduce
Steps to reproduce the behavior:

  1. Go to Head section of Content Item
  2. Click on '+ New Head Tag'
  3. See console error

Expected behavior
no console error

Screenshots
Screenshot from 2020-07-22 12-45-10
Screenshot from 2020-07-22 12-47-24

Desktop (please complete the following information):

  • OS: Ubuntu
  • Browser: Chrome
  • Version: 83

Web IDE: allows user to delete loader without warning

Ported from legacy

Simon:
The editor in the manager allows the user to delete loader without warning. This then breaks every HTML page on the site and it is not obvious what has happened or that the user needs to add a loader back with a call to {{current_view}} before anything will work again. This is a terrible product experience.

Suggest some combination of the following to improve this:

  • Don't let the user delete loader at all, and parse it for {{current_view}} to validate when saving
  • Let the user delete loader and have the system fall back to one that contains just {{current-view}} if it doesn't find a file called loader
  • Let the user delete loader but only after they have OK'ed an explicit message that tells them that this will break all HTML pages on their site (which may be OK for example if the instance they are working with has no HTML views because it is a pure backend)

Dustin suggests:
This should also include a different icon next to the name in the file list column. Maybe a lock instead of quotes

Show item parent in multi-page model table view

Is your feature request related to a problem? Please describe.
Yes - when a multipage content model is used in conjunction with several different parent pages, it's impossible to tell what an entry's parent is in the table view unless you open it and check the meta tab.

Describe the solution you'd like
When creating a multi-page content model, a checkbox for showing the item-parent in the table view.

Describe alternatives you've considered
There are 2 alternatives that users currently employ that are not ideal.

  1. For each parent, single-page content model, they make a multi-page content model.
    This solution can be an issue for content managers who are looking for a simplified flow as they will have to go into multiple multi-page models to add entries - instead of 1 multi-page model is which is sometimes preferred.

  2. When a multi-page content model has items with multiple parents, users add an additional field to denote that items an items parent.
    This solution removes the complication of going into multiple models to create/edit entries, however it creates a an additional step in the workflow for content managers as they have to A. go to the meta tab and set the parent, and B. assign the parent in a field so it's visible in the table view.

Neither of the solutions is ideal and each has its own quirks for displaying these entries in Parsley depending on the user's needs.

Additional context
Add any other context or screenshots about the feature request here.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.