Add App Builder Sample Extension (#2)

Author: asalloum5

.github/CONTRIBUTING.md

@@ -0,0 +1,36 @@
+# Contributing to Magento 2 code
+
+Contributions to the Magento 2 codebase are done using the fork & pull model.
+This contribution model has contributors maintaining their own copy of the forked codebase (which can easily be synced with the main copy). The forked repository is then used to submit a request to the base repository to “pull” a set of changes. For more information on pull requests please refer to [GitHub Help](https://help.github.com/articles/about-pull-requests/).
+
+Contributions can take the form of new components or features, changes to existing features, tests, documentation (such as developer guides, user guides, examples, or specifications), bug fixes or optimizations.
+
+The Magento 2 development team will review all issues and contributions submitted by the community of developers in the first in, first out order. During the review we might require clarifications from the contributor. If there is no response from the contributor within two weeks, the pull request will be closed.
+
+
+## Contribution requirements
+
+1. Contributions must adhere to the [Magento coding standards](https://devdocs.magento.com/guides/v2.2/coding-standards/bk-coding-standards.html).
+2. Pull requests (PRs) must be accompanied by a meaningful description of their purpose. Comprehensive descriptions increase the chances of a pull request being merged quickly and without additional clarification requests.
+3. Commits must be accompanied by meaningful commit messages. Please see the [Magento Pull Request Template](https://github.com/magento/magento2/blob/2.2-develop/.github/PULL_REQUEST_TEMPLATE.md) for more information.
+4. PRs which include bug fixes must be accompanied with a step-by-step description of how to reproduce the bug.
+3. PRs which include new logic or new features must be submitted along with:
+* Unit/integration test coverage.
+* Proposed [documentation](https://devdocs.magento.com) updates. Documentation contributions can be submitted via the [devdocs GitHub](https://github.com/magento/devdocs).
+4. For larger features or changes, please [open an issue](https://github.com/magento/magento2/issues) to discuss the proposed changes prior to development. This may prevent duplicate or unnecessary effort and allow other contributors to provide input.
+5. All automated tests must pass (all builds on [Travis CI](https://travis-ci.org/magento/magento2) must be green).
+
+## Contribution process
+
+If you are a new GitHub user, we recommend that you create your own [free github account](https://github.com/signup/free). This will allow you to collaborate with the Magento 2 development team, fork the Magento 2 project and send pull requests.
+
+1. Search current [listed issues](https://github.com/magento/magento2/issues) (open or closed) for similar proposals of intended contribution before starting work on a new contribution.
+2. Review and sign the [Contributor License Agreement (CLA)](https://opensource.adobe.com/cla.html) if this is your first time contributing. You only need to sign the CLA once.
+3. Create and test your work.
+4. Fork the Magento 2 repository according to the [Fork A Repository instructions](https://devdocs.magento.com/guides/v2.2/contributor-guide/contributing.html#fork) and when you are ready to send us a pull request – follow the [Create A Pull Request instructions](https://devdocs.magento.com/guides/v2.2/contributor-guide/contributing.html#pull_request).
+5. Once your contribution is received the Magento 2 development team will review the contribution and collaborate with you as needed.
+
+## Code of Conduct
+
+Please note that this project is released with a Contributor Code of Conduct. We expect you to agree to its terms when participating in this project.
+The full text is available in the repository [Wiki](https://github.com/magento/magento2/wiki/Magento-Code-of-Conduct).

.github/ISSUE_TEMPLATE.md

@@ -0,0 +1,16 @@
+<!--- STOP! Before you open an issue please search this repository's issues to see if it has already been reported. This helps reduce duplicate issues from being created. -->
+<!--- SECURITY DISCLOSURE: If this is a security disclosure please follow the guidelines in CONTRIBUTING.md. This helps keep folks from accidentally releasing vulnerabilities before the maintainers get a chance to fix the issue. -->
+
+### Expected Behaviour
+
+### Actual Behaviour
+
+### Reproduce Scenario (including but not limited to)
+
+#### Steps to Reproduce
+
+#### Platform and Version
+
+#### Sample Code that illustrates the problem
+
+#### Logs taken while reproducing problem

.github/PULL_REQUEST_TEMPLATE.md

@@ -0,0 +1,45 @@
+<!--- Provide a general summary of your changes in the Title above -->
+
+## Description
+
+<!--- Describe your changes in detail -->
+
+## Related Issue
+
+<!--- This project only accepts pull requests related to open issues -->
+<!--- If suggesting a new feature or change, please discuss it in an issue first -->
+<!--- If fixing a bug, there should be an issue describing it with steps to reproduce -->
+<!--- Please link to the issue here: -->
+
+## Motivation and Context
+
+<!--- Why is this change required? What problem does it solve? -->
+
+## How Has This Been Tested?
+
+<!--- Please describe in detail how you tested your changes. -->
+<!--- Include details of your testing environment, and the tests you ran to -->
+<!--- see how your change affects other areas of the code, etc. -->
+
+## Screenshots (if appropriate):
+
+## Types of changes
+
+<!--- What types of changes does your code introduce? Put an `x` in all the boxes that apply: -->
+
+- [ ] Bug fix (non-breaking change which fixes an issue)
+- [ ] New feature (non-breaking change which adds functionality)
+- [ ] Breaking change (fix or feature that would cause existing functionality to change)
+
+## Checklist:
+
+<!--- Go over all the following points, and put an `x` in all the boxes that apply. -->
+<!--- If you're unsure about any of these, don't hesitate to ask. We're here to help! -->
+
+- [ ] I have signed the [Adobe Open Source CLA](https://opensource.adobe.com/cla.html).
+- [ ] My code follows the code style of this project.
+- [ ] My change requires a change to the documentation.
+- [ ] I have updated the documentation accordingly.
+- [ ] I have read the **CONTRIBUTING** document.
+- [ ] I have added tests to cover my changes.
+- [ ] All new and existing tests passed.

.gitignore

@@ -0,0 +1 @@
+.idea

CODE_OF_CONDUCT

@@ -0,0 +1,46 @@
+# Contributor Covenant Code of Conduct
+
+## Our Pledge
+
+In the interest of fostering an open and welcoming environment, we as contributors and maintainers pledge to making participation in our project and our community a harassment-free experience for everyone, regardless of age, body size, disability, ethnicity, gender identity and expression, level of experience, nationality, personal appearance, race, religion, or sexual identity and orientation.
+
+## Our Standards
+
+Examples of behavior that contributes to creating a positive environment include:
+
+* Using welcoming and inclusive language.
+* Being respectful of differing viewpoints and experiences.
+* Gracefully accepting constructive criticism.
+* Focusing on what is best for the community.
+* Showing empathy towards other community members.
+
+Examples of unacceptable behavior by participants include:
+
+* The use of sexualized language or imagery and unwelcome sexual attention or advances.
+* Trolling, insulting/derogatory comments, and personal or political attacks.
+* Public or private harassment.
+* Publishing others' private information, such as a physical or electronic address, without explicit permission.
+* Other conduct which could reasonably be considered inappropriate in a professional setting.
+
+## Our Responsibilities
+
+Project maintainers are responsible for clarifying the standards of acceptable behavior and are expected to take appropriate and fair corrective action in response to any instances of unacceptable behavior.
+
+Project maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct, or to ban temporarily or permanently any contributor for other behaviors that they deem inappropriate, threatening, offensive, or harmful.
+
+## Scope
+
+This Code of Conduct applies both within project spaces and in public spaces when an individual is representing the project or its community. Examples of representing a project or community include using an official project e-mail address, posting via an official social media account, or acting as an appointed representative at an online or offline event. Representation of a project may be further defined and clarified by project maintainers.
+
+## Enforcement
+
+Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting the project team at [email protected]. The project team will review and investigate all complaints, and will respond in a way that it deems appropriate to the circumstances. The project team is obligated to maintain confidentiality with regard to the reporter of an incident. Further details of specific enforcement policies may be posted separately.
+
+Project maintainers who do not follow or enforce the Code of Conduct in good faith may face temporary or permanent repercussions as determined by other members of the project's leadership.
+
+## Attribution
+
+This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, available at [http://contributor-covenant.org/version/1/4][version].
+
+[homepage]: http://contributor-covenant.org
+[version]: http://contributor-covenant.org/version/1/4/

COPYRIGHT

@@ -0,0 +1,5 @@
+Copyright 2024 Adobe. All rights reserved.
+
+Adobe holds the copyright for all the files found in this repository.
+
+See the LICENSE file for licensing information.

LICENSE

@@ -186,7 +186,7 @@
       same "printed page" as the copyright notice for easier
       identification within third-party archives.
 
-   Copyright [yyyy] [name of copyright owner]
+   Copyright 2024 Adobe
 
    Licensed under the Apache License, Version 2.0 (the "License");
    you may not use this file except in compliance with the License.

README.md

@@ -1,17 +1,35 @@
 # Adobe Commerce - Extensibility Code Samples
+
 This project is a collection of code samples that demonstrate common extensibility use cases for Adobe Commerce. 
 
-### What this project is
+## What this project is
+
 This project is intended as a reference for developers to learn how to extend and integrate Adobe Commerce. The code is meant to showcase concepts and may not necessarily implement real-world scenarios. 
 
-### What this project isn't
+## What this project isn't
+
 The code in the project is not meant to be construed as production-ready code and should not be used as-is in production use cases. It may not have been tested for security, performance, or other best practices.
 
-### How to use this project
+## Prerequisites
+
+- Access to Adobe Developer Console.
+- Full access or trial access to App Builder.
+- Project and workspaces has been created and correctly configured.
+- AIO CLI installed to run commands.
+
+## How to use this project
+
 The code and comments are expected to be self-explanatory and developers can use them to learn the concepts. When deploying code from this project, ensure it is only used in development environments
 
-### Contributing to this project
-* Contribute new samples: runtime actions, mesh configs, dropins, etc…
-* Samples should be heavily commented describing WHAT the code does and WHY.
-* Report or fix any bugs or inefficiencies.
-* Participate in code reviews.
+## Contributing to this project
+
+Contributions are welcomed!
+
+- Contribute new samples: runtime actions, mesh configs, dropins, etc…
+- Samples should be heavily commented describing WHAT the code does and WHY.
+- Report or fix any bugs or inefficiencies.
+- Participate in code reviews.
+
+## Licensing
+
+This project is licensed under the Apache V2 License. See [LICENSE](LICENSE) for more information.

sample-extension/.gitignore

@@ -0,0 +1,24 @@
+# package directories
+node_modules
+
+# build
+build
+dist
+.manifest-dist.yml
+
+# Config
+config.json
+.env*
+!.env.dist
+.aio
+
+# Adobe I/O console config
+console.json
+
+.idea
+package-lock.json
+.aws.tmp.creds.json
+.parcel-cache
+.DS_Store
+.vscode
+

sample-extension/README.md

@@ -0,0 +1,91 @@
+# Sample Extension
+
+The sample extension is an App Builder application that helps you start with Out-of-Process extensibility for Adobe Commerce.
+
+## Prerequisites
+
+- Have the Adobe AIO CLI installed.
+- Have an App Builder project created in your IMS organization.
+
+## Setup
+
+- Run `npm install`.
+- Run `aio console where` to check if the right project and workspace are selected. If not, you can run `aio console project select` and `aio console workspace select`.
+- Run `aio app use` to create and populate `.env` and `.aio` files. Make sure you defined your OAuth credentials in the project first and added the I/O Management API to the workspace.
+- Run `aio app build`.
+
+## Local Dev
+
+- `aio app run` to start your local Dev server.
+- App will run on `localhost:9080` by default.
+
+By default, the UI will be served locally but actions will be deployed and served from Adobe I/O Runtime. To start a
+local serverless stack and also run your actions locally use the `aio app run --local` option.
+
+## Test & Coverage
+
+- Run `aio app test` to run unit tests for ui and actions.
+- Run `aio app test --e2e` to run e2e tests.
+
+## Deploy & Cleanup
+
+- `aio app deploy` to build and deploy all actions on Runtime and static files to CDN
+- `aio app undeploy` to undeploy the app
+
+## Config
+
+### `.env` and `.aio`
+
+The `.env` and `.aio` files should not be committed to source control.
+
+### `app.config.yaml`
+
+- Main configuration file that defines an application's implementation. 
+- More information on this file, application configuration, and extension configuration 
+  can be found [here](https://developer.adobe.com/app-builder/docs/guides/appbuilder-configuration/#appconfigyaml)
+
+#### Action Dependencies
+
+- You have two options to resolve your actions' dependencies:
+
+  1. **Packaged action file**: Add your action's dependencies to the root
+   `package.json` and install them using `npm install`. Then set the `function`
+   field in `app.config.yaml` to point to the **entry file** of your action
+   folder. We will use `webpack` to package your code and dependencies into a
+   single minified js file. The action will then be deployed as a single file.
+   Use this method if you want to reduce the size of your actions.
+
+  2. **Zipped action folder**: In the folder containing the action code add a
+     `package.json` with the action's dependencies. Then set the `function`
+     field in `app.config.yaml` to point to the **folder** of that action. We will
+     install the required dependencies within that directory and zip the folder
+     before deploying it as a zipped action. Use this method if you want to keep
+     your action's dependencies separated.
+
+## Debugging in VS Code
+
+While running your local server (`aio app run`), both UI and actions can be debugged, to do so open the vscode debugger
+and select the debugging configuration called `WebAndActions`.
+Alternatively, there are also debug configs for only UI and each separate action.
+
+## Typescript support for UI
+
+To use typescript use `.tsx` extension for react components and add a `tsconfig.json` 
+and make sure you have the below config added
+```
+ {
+  "compilerOptions": {
+      "jsx": "react"
+    }
+  } 
+```
+
+## Test Admin UI SDK registrations in your Commerce instance
+
+### Local development
+
+For your local development you can refer to the following [documentation](https://developer.adobe.com/commerce/extensibility/admin-ui-sdk/configuration/).
+
+### Cloud instance
+
+For your cloud instance testing, you'll have to publish your application by following this [documentation](https://developer.adobe.com/commerce/extensibility/admin-ui-sdk/publish/).

sample-extension/actions/commerce/index.js

@@ -0,0 +1,55 @@
+/*
+Copyright 2024 Adobe. All rights reserved.
+This file is licensed to you 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 REPRESENTATIONS
+OF ANY KIND, either express or implied. See the License for the specific language
+governing permissions and limitations under the License.
+*/
+const { Core } = require('@adobe/aio-sdk')
+const { errorResponse, checkMissingRequestInputs} = require('../utils')
+const { getCommerceOauthClient } = require('../oauth1a')
+
+async function main(params) {
+    const logger = Core.Logger('main', { level: params.LOG_LEVEL || 'info' })
+
+    try {
+        const requiredParams = ['operation', 'COMMERCE_BASE_URL']
+        const requiredHeaders = ['Authorization']
+        const errorMessage = checkMissingRequestInputs(params, requiredParams, requiredHeaders)
+        if (errorMessage) {
+            // return and log client errors
+            return errorResponse(400, errorMessage, logger)
+        }
+
+        const { operation } = params
+
+        const oauth = getCommerceOauthClient(
+            {
+                url: params.COMMERCE_BASE_URL,
+                consumerKey: params.COMMERCE_CONSUMER_KEY,
+                consumerSecret: params.COMMERCE_CONSUMER_SECRET,
+                accessToken: params.COMMERCE_ACCESS_TOKEN,
+                accessTokenSecret: params.COMMERCE_ACCESS_TOKEN_SECRET
+            },
+            logger
+        )
+
+        const content = await oauth.get(operation)
+
+        return {
+            statusCode: 200,
+            body: content
+        }
+    } catch (error) {
+        // log any server errors
+        logger.error(error)
+        // return with 500
+        return errorResponse(500, error, logger)
+    }
+}
+
+exports.main = main