CIF-1382 - Create the Core CIF Components library pages - product com… (#267)

* CIF-1382 - Create the Core CIF Components library pages - product component

- add proxy product component for the library
- add a `page` component that adds the store-view and graphql endpoint for the client-side code
- add JSON mock response and images for the product component

* CQ-0: added self-signed cert rejection workaround

Author: cjelger

examples/README.md

@@ -22,6 +22,7 @@ You can install all 3 artifacts by running `mvn clean install -PautoInstallPacka
 ## Required configuration
 
 The mock GraphQL server can only serve content via HTTPS because our GraphQL client does not support non-secure connections for security reasons. This means you have to enable HTTPS on your AEM instance if you want to install and use the mock server. To do this, simply follow the [following documentation](https://docs.adobe.com/content/help/en/experience-manager-65/administering/security/ssl-by-default.html).
+If the self-signed certificate gets rejected by the browser, try adding it to the OS keychain and mark it as trusted.
 
 You must also enable anonymous access to the mock GraphQL server which will by defaut receive its requests on `https://localhost:8443/apps/cif-components-examples/graphql`. To do that, do the following:
 * In the AEM system configuration console, look for `Apache Sling Authentication Service`
@@ -53,4 +54,4 @@ With the less compiler (install it with `npm install -g less`), execute the foll
 
 `lessc --verbose --math=strict venia.less venia.css`
 
-This generates the `venia.css` file that we use for the layout/design of the examples.
+This generates the `venia.css` file that we use for the layout/design of the examples.

examples/bundle/src/main/resources/graphql/magento-graphql-products.json

@@ -1,7 +1,7 @@
 {
   "data": {
     "storeConfig": {
-      "secure_base_media_url": "https://test-url.magentosite.cloud/pub/media/"
+      "secure_base_media_url": "/content/dam/core-components-examples/library/cif-sample-assets/"
     }
   }
 }

examples/bundle/src/main/resources/graphql/magento-graphql-storeconfig.json

@@ -42,7 +42,9 @@
 import com.adobe.cq.commerce.core.components.models.categorylist.FeaturedCategoryList;
 import com.adobe.cq.commerce.core.components.models.common.ProductListItem;
 import com.adobe.cq.commerce.core.components.models.navigation.Navigation;
+import com.adobe.cq.commerce.core.components.models.product.Asset;
 import com.adobe.cq.commerce.core.components.models.product.Product;
+import com.adobe.cq.commerce.core.components.models.product.Variant;
 import com.adobe.cq.commerce.core.components.models.productcarousel.ProductCarousel;
 import com.adobe.cq.commerce.core.components.models.productlist.ProductList;
 import com.adobe.cq.commerce.core.components.models.productteaser.ProductTeaser;
@@ -105,6 +107,8 @@ private static AemContext createContext(String contentPath) {
     private static final String FEATURED_CATEGORY_LIST_RESOURCE = PAGE + "/jcr:content/root/responsivegrid/featuredcategorylist";
     private static final String NAVIGATION_RESOURCE = PAGE + "/jcr:content/root/responsivegrid/navigation";
 
+    private static final String CIF_DAM_ROOT = "/content/dam/core-components-examples/library/cif-sample-assets/";
+
     private GraphqlServlet graphqlServlet;
     private MockSlingHttpServletRequest request;
     private MockSlingHttpServletResponse response;
@@ -203,8 +207,18 @@ public void testProductModel() throws ServletException {
         requestPathInfo.setSelectorString("beaumont-summit-kit");
 
         Product productModel = context.request().adaptTo(Product.class);
-        Assert.assertEquals("MJ01", productModel.getSku());
+        Assert.assertEquals("MH01", productModel.getSku());
         Assert.assertEquals(15, productModel.getVariants().size());
+
+        // We make sure that all assets in the sample JSON response point to the DAM
+        for (Asset asset : productModel.getAssets()) {
+            Assert.assertTrue(asset.getPath().startsWith(CIF_DAM_ROOT));
+        }
+        for (Variant variant : productModel.getVariants()) {
+            for (Asset asset : variant.getAssets()) {
+                Assert.assertTrue(asset.getPath().startsWith(CIF_DAM_ROOT));
+            }
+        }
     }
 
     @Test

examples/bundle/src/test/java/com/adobe/cq/commerce/core/examples/servlets/GraphqlServletTest.java

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
+    jcr:description="Page Component for the CIF Components Library"
+    jcr:primaryType="cq:Component"
+    jcr:title="Page"
+    sling:resourceSuperType="core-components-examples/components/page"
+    componentGroup=".hidden"/>

examples/ui.apps/src/main/content/jcr_root/apps/cif-components-examples/components/page/.content.xml

@@ -0,0 +1,33 @@
+<!--/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+  ~ Copyright 2016 Adobe
+  ~
+  ~ Licensed under the Apache License, Version 2.0 (the "License");
+  ~ you may not use this file except in compliance with the License.
+  ~ You may obtain a copy of the License at
+  ~
+  ~     http://www.apache.org/licenses/LICENSE-2.0
+  ~
+  ~ Unless required by applicable law or agreed to in writing, software
+  ~ distributed under the License is distributed on an "AS IS" BASIS,
+  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  ~ See the License for the specific language governing permissions and
+  ~ limitations under the License.
+  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/-->
+<!DOCTYPE HTML>
+<html data-sly-use.page="com.adobe.cq.wcm.core.components.models.Page" lang="${page.language}"
+      data-sly-use.storeView="com.adobe.cq.commerce.core.components.models.storeconfigexporter.StoreConfigExporter"
+      data-sly-use.head="head.html"
+      data-sly-use.footer="footer.html"
+      data-sly-use.redirect="redirect.html">
+    <head data-sly-call="${head.head @ page = page}"></head>
+    <body class="${page.cssClassNames}" data-store-view="${storeView.storeView}" data-graphql-endpoint="${storeView.graphqlEndpoint}">
+        <sly data-sly-test.isRedirectPage="${page.redirectTarget && (wcmmode.edit || wcmmode.preview)}"
+             data-sly-call="${redirect.redirect @ redirectTarget = page.redirectTarget}"></sly>
+        <sly data-sly-test="${!isRedirectPage}">
+            <sly data-sly-include="body.socialmedia_begin.html"></sly>
+            <sly data-sly-include="body.html"></sly>
+            <sly data-sly-call="${footer.footer @ page = page}"></sly>
+            <sly data-sly-include="body.socialmedia_end.html"></sly>
+        </sly>
+    </body>
+</html>

examples/ui.apps/src/main/content/jcr_root/apps/cif-components-examples/components/page/page.html

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
+    jcr:description="Product Detail Component for the Core Components Library"
+    jcr:primaryType="cq:Component"
+    jcr:title="Product Detail"
+    sling:resourceSuperType="core/cif/components/commerce/product/v1/product"
+    componentGroup="Core Components Examples"/>

examples/ui.apps/src/main/content/jcr_root/apps/cif-components-examples/components/product/.content.xml

@@ -6,5 +6,6 @@
     <filter root="/conf/core-components-examples/settings/wcm/templates/content-page/structure/jcr:content/root/sidebar/accordion/item_1579021109269"/>
     <filter root="/content/core-components-examples/library/jcr:content/root/responsivegrid/container_1589240807"/>
     <filter root="/content/core-components-examples/library/commerce"/>
+    <filter root="/content/dam/core-components-examples/library/cif-sample-assets/"/>
     <filter root="/content/dam/core-components-examples/library/cif-components"/>
 </workspaceFilter>

examples/ui.content/src/main/content/META-INF/vault/filter.xml

@@ -13,6 +13,7 @@
         jcr:title="Commerce"
         sling:configPropertyInherit="true"
         sling:resourceType="commerce/gui/components/configuration/page"
+        magentoGraphqlEndpoint="/apps/cif-components-examples/graphql"
         magentoRootCategoryId="2"
         magentoStore="default"/>
 </jcr:root>

examples/ui.content/src/main/content/jcr_root/conf/core-components-examples/settings/cloudconfigs/commerce/.content.xml

@@ -22,7 +22,7 @@
                         sling:resourceType="core-components-examples/components/teaser"
                         actionsEnabled="false"
                         descriptionFromPage="true"
-                        fileReference="/content/dam/core-components-examples/library/components/container.svg"
+                        fileReference="/content/dam/core-components-examples/library/cif-components/product.svg"
                         linkURL="/content/core-components-examples/library/commerce/product"
                         textIsRich="true"
                         titleFromPage="false">