@umg-mira/mira-editor-plugin v0.0.76

Builder.io Editor Plugins for Mira

Setting up local environment

1. Clone this repo to your local
2. Run npm i && npm run start
3. Go to beta.builder.io and create a new org called something like Mira Local Chris using your first name.
4. Navigate to Account > Organization > Plugins and set it to http://localhost:1268/plugin.system.js
5. Before you can create a Mira Campaign or Campaign User you need to update the builder.io models. Updating models
6. Then go to https://beta.builder.io/models and update all the model references manually
7. In your local org when you navigate to any Mira pages like Mira Campaigns you will see the request access form, go ahead and submit it.
8. Go back into the repo and add your email (example@umusic.com email which is used to create builder account) to the alwaysAllowUsers: {} object in the src/config/auth-overrides.json.
9. Now refresh page if you are in teams or go to Mira Teams
10. Create a team.
11. Go to Admin page and hit approve user. Make sure to Update your role to Admin and add the newly created team and hit save.
12. Any questions please reachout to the team for help.

Development tips

Updating models

In builder.io when you create or update the fields of a data model, you need to copy that configuration to code.

1. In the browser, on the model edit page, open to the Inspect Tool and in console run JSON.stringify(builder.editingModel.fields, null, 2) (or JSON.stringify(builder.editingModel.toJSON(), null, 2) to see the full model)
2. Copy the fields array to the models.json file, under a key that is the name of the model.
3. Visit https://beta.builder.io/apps/mira/update-models to update your db from the JSON.

Context Examples

• Permissions check: context.user.can('editCode')
• Current content being edited: context.designerState.editingContentModel
• Edit content (pass in either json or a content object): context.content.update(theContent) or context.createContent('my-model', theContent)
• soft delete: context.content.update({...content, published: 'archived'})
• permanent delete(NOTE: PLEASE DO NOT USE THIS): context.content.remove({id: 'content-id'})
• Update preview URL: context.designerState.editingContentModel.previewUrl = '…'

Creating/Updating models with reference model fields manually in different env

1. copy the fields of the model by going to the dev org(where the model originally is created) and copy to clipboard all the fields using this in console builder.copyToClipboard(JSON.stringify(builder.editingModel.fields))
2. Create the model/reference model with the correct model name from the UI in the environment you want.
3. update all reference model fields with the corresponding model id of that environment(created above)
4. replace the fields using this in concole builder.editingModel.fields.replace(paste fields from step 1) Note: we will be automating dependent field updates.

UI React Component Guide

https://wiki-berlin.global.umusic.net/wiki/display/OCP/UI+React+Component+Guide

MOBX: A State Management Library

https://iconof.com/best-practices-for-mobx-with-react/ https://mobx.js.org/best/pitfalls.html

MODEL API REQUESTS/SEARCH queries

1. When we create a model in builder all the fields we add will be added to the property data in the response.

2. model get request example in team store

   ${config.builder.contentUrl}team?apiKey=${loggedInUser.apiKey}
   &includeRefs=true
   &limit=${limit || 50}
   &cachebust=true
   &query.data.members.id=${userId}`

   includeRefs=true : will pull the referred field data in a prop named 'value'

   Example below is the member data referred. The value prop will give the data of the reference.
   
   "members": [
         {
           "@type": "@builder.io/core:Reference",
           "id": "938711038d3f4331a3ebb46e039c4a4c",
           "model": "user",
           "value": {
             "createdBy": "wptqqZp4dcMhOmAsv0m7XcF1Ljb2",
             "createdDate": 1592518164506,
             "data": {
               "builderUserId": "zVH3Lu0GxygcJ1knfCr1ZKyMMoH2",
               "createdBy": "wptqqZp4dcMhOmAsv0m7XcF1Ljb2",
               "createdDate": 1593128950071,
               "email": "sunil.c.umg@gmail.com",
               "firstName": "Sunil",
               "fullName": "",
               "isActive": true,
               "lastName": "external",
               "lastUpdateBy": "wptqqZp4dcMhOmAsv0m7XcF1Ljb2",
               "lastUpdateDate": 1593128950071,
               "miraRole": "admin",
               "modelVersion": 1,
               "role": "admin"
             },
             "id": "938711038d3f4331a3ebb46e039c4a4c",
             "lastUpdatedBy": "wptqqZp4dcMhOmAsv0m7XcF1Ljb2",
             "meta": {
   
             },
             "modelId": "4474a3e8184347edb8ed54ad802d11ac",
             "name": "",
             "published": "published",
             "query": [
   
             ],
             "testRatio": 1,
             "variations": {
   
             },
             "rev": "j4disc4o3w"
           }
         }
       ],

   filters : to apply filters we should use a param query like below

   Examples:
   &query.id=${team.id}
   &query.name=${team.name}
   &query.data.members.id=${userId}

   &includeUnpublished=true : will pull the referred field data in a prop named 'value'

3. Refer links:

   Builder auery api

   mongo regex pattern

   wildcard search slack conversation

Formik and YUP for Form Validations

Links:

Formik Overview

Formik Form Submission

We should be using useFormik hook

Refer update-user-access.tsx component for how it is implemented

Validations: We use yup library for adding any kind of validation required