Add 'deploy.yaml'

deploy.yaml

@@ -0,0 +1,60 @@
+id: deploy
+type: PageSiderMenu
+properties:
+  title: Deploy
+
+areas:
+  content:
+    blocks:
+      - id: title
+        type: Title
+        layout:
+          grow: 1
+        properties:
+          content: Deploy
+      - id: new_brand_button # Create a Button block to add a new brand.
+        type: Button
+        layout:
+          grow: 0 # Because the grow of the button is 0, it will not expand but remain in the same row as the title block.
+        properties:
+          title: New Brand # Button text.
+          icon: PlusOutlined # Ant Design icon on the button.
+        events:
+          onClick: # All the actions to complete when the button is clicked.
+            - id: link_to_new_brand # Link to the page where we will add a new brand.
+              type: Link
+              params:
+                pageId: new-brand # The page id of the new brand page.
+      # A List block to render the following brands.
+      # The list block will render a content area all items in the "brands_list" array in state.
+      # The "brands_list" array is populated by the "set_brands" onEnter action.
+      - id: brands_list
+        type: List
+        blocks:
+          - id: brands_list.$.container # Wrap all the blocks for a brands item in a box.
+            type: Box
+            style:
+              background: '#fff' # Give the box a white background and some spacing.
+              margin: 10
+              padding: 10
+            blocks:
+              - id: brands_list.$.name # Show the item name as a title in the list.
+                type: Title
+                properties:
+                  content:
+                    _state: brands_list.$.name
+                  level: 3
+              - id: brands_list.$.description # Show the item description as a paragraph in the list.
+                type: Paragraph
+                properties:
+                  content:
+                    _state: brands_list.$.description
+            events:
+              onClick:
+                - id: link_to_edit_brand # Link to the page where we will edit the clicked brand.
+                  type: Link
+                  params:
+                    pageId: edit-brand # The page id of the edit brand page.
+                    urlQuery:
+                      brand_id:
+                        _state: brands_list.$._id # Set the brand_id in the url query on the edit-brand page to the _id field of the clicked list item.