feat: wip merge not working yet

.circleci/config.yml

@@ -24,7 +24,7 @@ jobs:
   build:
     working_directory: /mnt/ramdisk/project
     docker:
-      - image: cimg/node:16.17
+      - image: cimg/node:18.20
     resource_class: xlarge
     environment:
       CYPRESS_CACHE_FOLDER: /mnt/ramdisk/.cache/Cypress
@@ -47,7 +47,7 @@ jobs:
       - run: yarn build.docs
   run-e2e-tests:
     executor: cypress-default
-    resource_class: large
+    resource_class: xlarge
     working_directory: /mnt/ramdisk/project
     environment:
       CYPRESS_CACHE_FOLDER: /mnt/ramdisk/.cache/Cypress
@@ -93,7 +93,7 @@ jobs:
           command: weekly_lockfile_maintenance.sh
   release:
     docker:
-      - image: cimg/node:16.17
+      - image: cimg/node:18.20
     steps:
       - checkout
       - run:
@@ -117,11 +117,6 @@ workflows:
           example-name: react-cra
           requires:
             - build
-      - run-e2e-tests:
-          name: e2e-react-gatsby
-          example-name: react-gatsby
-          requires:
-            - build
       - run-e2e-tests:
           name: e2e-angular
           example-name: angular
@@ -138,7 +133,6 @@ workflows:
             - build
             - build-docs
             - e2e-react-cra
-            - e2e-react-gatsby
             - e2e-static-html
             - e2e-angular
           filters:
@@ -147,11 +141,11 @@ workflows:
                 - main
   perform-lockfile-maintenance:
     triggers:
-        - schedule:
-            cron: "0 3 * * 1"
-            filters:
-              branches:
-                only:
-                  - main
+      - schedule:
+          cron: '0 3 * * 1'
+          filters:
+            branches:
+              only:
+                - main
     jobs:
       - lockfile-maintenance

.github/dependabot.yml

@@ -0,0 +1,6 @@
+version: 2
+updates:
+  - package-ecosystem: npm
+    directory: '/'
+    schedule:
+      interval: 'daily'

.github/workflows/auto-approve.yml

@@ -0,0 +1,25 @@
+name: Auto Approve DependaBot PRs
+
+on:
+  pull_request:
+    branches:
+      - main
+
+permissions:
+  pull-requests: write
+
+jobs:
+  dependabot:
+    runs-on: ubuntu-latest
+    if: ${{ github.actor == 'dependabot[bot]' }}
+    steps:
+      - name: Dependabot metadata
+        id: metadata
+        uses: dependabot/[email protected]
+        with:
+          github-token: '${{ secrets.GITHUB_TOKEN }}'
+      - name: Approve a PR
+        run: gh pr review --approve "$PR_URL"
+        env:
+          PR_URL: ${{github.event.pull_request.html_url}}
+          GITHUB_TOKEN: ${{secrets.GITHUB_TOKEN}}

.github/workflows/auto-merge-dependabot.yml

@@ -0,0 +1,26 @@
+name: Auto Merge Dependabot PRs
+on:
+  pull_request:
+    branches:
+      - main
+
+permissions:
+  contents: write
+  pull-requests: write
+
+jobs:
+  dependabot:
+    runs-on: ubuntu-latest
+    if: ${{ github.actor == 'dependabot[bot]' }}
+    steps:
+      - name: Dependabot metadata
+        id: metadata
+        uses: dependabot/[email protected]
+        with:
+          github-token: '${{ secrets.GITHUB_TOKEN }}'
+      - name: Enable auto-merge for Dependabot PRs
+        if: ${{steps.metadata.outputs.update-type == 'version-update:semver-patch'}}
+        run: gh pr merge --auto --squash "$PR_URL"
+        env:
+          PR_URL: ${{github.event.pull_request.html_url}}
+          GITHUB_TOKEN: ${{secrets.GITHUB_TOKEN}}

.github/workflows/jira-issue-label-added.yaml

@@ -0,0 +1,13 @@
+name: Jira Issue Label Added
+
+on:
+  issues:
+    types:
+      - labeled
+
+jobs:
+  call-workflow:
+    uses: stoplightio/.github/.github/workflows/jira-issue-label-added.yaml@master
+    with:
+      team-name: ${{ contains(github.event.pull_request.labels.*.name, 'team/bad-news-bears') && 'Bad News Bears' || contains(github.event.pull_request.labels.*.name, 'team/maintenance') && 'Maintenance' || '' }}
+    secrets: inherit

.gitignore

@@ -39,7 +39,6 @@ dist-storybook
 *.log*
 *-debug.log*
 *-error.log*
-/examples/react-gatsby/yarn.lock
 /examples/react-cra/yarn.lock
 /examples/angular/yarn.lock
 

cypress.config.ts

@@ -0,0 +1,17 @@
+import { defineConfig } from 'cypress';
+
+export default defineConfig({
+  reporter: 'junit',
+  reporterOptions: {
+    mochaFile: 'cypress/results/output.xml',
+    toConsole: false,
+  },
+  screenshotsFolder: 'cypress/results/screenshots',
+  videosFolder: 'cypress/results/videos',
+  e2e: {
+    setupNodeEvents(on, config) {
+      return require('./cypress/plugins/index.js')(on, config);
+    },
+    baseUrl: 'http://localhost:4200/',
+  },
+});

cypress/integration/stoplight-project.ts → cypress/e2e/stoplight-project.cy.ts

@@ -59,11 +59,31 @@ describe('Stoplight component', () => {
     });
 
     it('invokes TryIt request', () => {
-      loadCreateTodoPage();
+      loadListTodosPage();
+
+      cy.intercept(
+        {
+          method: 'GET',
+          hostname: 'todos.stoplight.io',
+          pathname: '/**',
+          https: true,
+        },
+        {
+          statusCode: 200,
+          headers: {
+            'Access-Control-Allow-Origin': '*',
+            'Access-Control-Allow-Headers': 'content-type',
+            'Content-Type': 'application/json',
+          },
+          body: '"hello world"',
+        },
+      ).as('todos-api');
+
       cy.findByRole('button', { name: /send api request/i }).click();
 
-      // Temporarily changing response code as the requested api is unavailable
-      cy.findByText('500 Internal Server Error').should('exist');
+      cy.wait('@todos-api');
+
+      cy.findByText('hello world').should('exist');
     });
 
     it('mocks response correctly', () => {
@@ -72,7 +92,9 @@ describe('Stoplight component', () => {
       cy.findByRole('menuitemradio', { name: /mock server/i }).then(enabled => {
         enabled.trigger('click');
       });
+      cy.intercept('https://stoplight.io/mocks/**').as('getData');
       cy.findByRole('button', { name: /send api request/i }).click();
+      cy.wait('@getData');
       cy.findByText('200 OK').should('exist');
     });
   });
@@ -111,8 +133,10 @@ describe('Stoplight component', () => {
 
 function loadStoplightProjectPage() {
   cy.intercept('https://stoplight.io/api/v1/projects/cHJqOjYwNjYx/nodes/**').as('getNode');
+  cy.intercept(`https://stoplight.io/api/v1/projects/cHJqOjYwNjYx/table-of-contents`).as('getToc');
   cy.visit('/stoplight-project');
   cy.wait('@getNode');
+  cy.wait('@getToc');
 }
 
 function loadCreateTodoPage() {
@@ -132,7 +156,9 @@ function loadMarkdownPage() {
 }
 
 function visitNode(nodeId: string, nodeSlug: string) {
-  cy.intercept(`https://stoplight.io/api/v1/projects/cHJqOjYwNjYx/nodes/${nodeId}`).as('getNode');
+  cy.intercept(`https://stoplight.io/api/v1/projects/cHJqOjYwNjYx/nodes/${nodeId}-${nodeSlug}`).as('getNode');
+  cy.intercept(`https://stoplight.io/api/v1/projects/cHJqOjYwNjYx/table-of-contents`).as('getToc');
   cy.visit(`/stoplight-project/${nodeId}-${nodeSlug}`);
   cy.wait('@getNode');
+  cy.wait('@getToc');
 }

demo/README.md

@@ -8,3 +8,47 @@
 4. Open `http://localhost:4025` in your browser.
 
 Changes to the demo or other packages in this repo will cause the demo to reload.
+
+
+#### Troubleshooting Elements-Dev-Portal
+
+If you are wanting to troubleshoot the `StoplightProject` component with the demo app, you will need to make the following changes: 
+
+1. Set the contents of the index.tsx to the following, replacing/adding properties as needed for your use case:
+```
+import '@stoplight/elements-core/styles.css';
+
+import { StoplightProject } from '@stoplight/elements-dev-portal';
+import { subscribeTheme } from '@stoplight/mosaic';
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+subscribeTheme();
+
+ReactDOM.render(
+  <React.StrictMode>
+    <StoplightProject projectId="projectId" router="history"></StoplightProject>
+  </React.StrictMode>,
+  document.getElementById('root'),
+);
+```
+2. Update the package.js to include the new dependency 
+`"@stoplight/elements-dev-portal": "^2.0.0",`
+
+3. To ensure the local elements-dev-portal package is included and the app reloads on change, update the common.js webpack file to include the package. 
+```
+...
+const absoluteElementsDevPortalPath = resolve(__dirname, '../../packages/elements-dev-portal/src');
+...      
+module.exports = {
+  ...
+  resolve: {
+    ...
+    alias: {
+      ...
+      '@stoplight/elements-dev-portal': absoluteElementsDevPortalPath,
+      ...
+
+```
+4. Additionally update the .babelrc module resolver to include `"@stoplight/elements-dev-portal": "../packages/elements-dev-portal/src"
+`

demo/package.json

@@ -15,7 +15,7 @@
     "history": "^5.0.0",
     "react": "16.14.0",
     "react-dom": "16.14.0",
-    "react-github-btn": "1.2.2",
+    "react-github-btn": "1.4.0",
     "react-router-dom": "6.0.0-beta.0"
   },
   "devDependencies": {
@@ -26,19 +26,19 @@
     "@typescript-eslint/eslint-plugin": "^4.20.0",
     "@typescript-eslint/parser": "^4.20.0",
     "eslint": "^7.23.0",
-    "eslint-config-prettier": "^8.5.0",
+    "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-prettier": "^3.3.1",
     "eslint-plugin-react": "^7.23.1",
     "express": "^4.17.3",
     "html-webpack-plugin": "^5.3.2",
     "jest": "^26.6.3",
-    "mini-css-extract-plugin": "^1.4.0",
+    "mini-css-extract-plugin": "^2.9.0",
     "prettier": "^2.2.1",
     "process": "0.11.10",
     "rimraf": "^3.0.2",
     "ts-loader": "^9.2.8",
     "webpack": "^5.59.1",
-    "webpack-cli": "^4.9.1",
+    "webpack-cli": "^5.1.4",
     "webpack-merge": "^5.7.3"
   }
 }

demo/src/App.tsx

@@ -16,14 +16,16 @@ export function App() {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
+  const isStacked = searchParams.get('layout') === 'stacked';
+
   const [globalState, setGlobalState] = useState<GlobalContext>({
     apiDescriptionUrl: searchParams.get('spec') || DEFAULT_API_URL,
     setDescriptionUrl: _value => {
       const value = _value.trim() || DEFAULT_API_URL;
 
       let nextUrl = '/';
       if (value && value !== DEFAULT_API_URL) {
-        nextUrl = `?spec=${value}`;
+        nextUrl = `?spec=${value}${isStacked ? '&layout=stacked' : ''}`;
       }
 
       window.history.pushState(undefined, '', nextUrl);
@@ -35,6 +37,7 @@ export function App() {
         });
       }, 0);
     },
+    layout: isStacked ? 'stacked' : undefined,
   });
 
   return (

demo/src/components/ElementsAPI.tsx

@@ -7,16 +7,16 @@ import React, { useContext } from 'react';
 import { GlobalContext } from '../context';
 
 export const ElementsAPI: React.FC = () => {
-  const { apiDescriptionUrl } = useContext(GlobalContext);
+  const { apiDescriptionUrl, layout } = useContext(GlobalContext);
 
   const specUrlWithProxy =
     apiDescriptionUrl && window.location.origin === 'https://elements-demo.stoplight.io'
       ? `https://stoplight.io/cors-proxy/${apiDescriptionUrl}`
       : apiDescriptionUrl;
 
   return (
-    <Box flex={1} overflowY="hidden">
-      <API apiDescriptionUrl={specUrlWithProxy} router="hash" />
+    <Box flex={1} overflowY={layout !== 'stacked' ? 'hidden' : undefined}>
+      <API apiDescriptionUrl={specUrlWithProxy} router="hash" layout={layout} />
     </Box>
   );
 };