Stage to Main Sync up Mar 25 (#4)

.eslintignore

@@ -0,0 +1,4 @@
+node_modules/*
+deps/*
+scripts/fallback.js
+web-test-runner.config.js

.github/codeql/codeql-config.yml

@@ -0,0 +1,4 @@
+name: "Milo Events CodeQL Config"
+
+paths-ignore:
+  - node_modules

.github/pull_request_template.md

@@ -0,0 +1,7 @@
+Describe your specific features or fixes
+
+Resolves: [MWPW-NUMBER](https://jira.corp.adobe.com/browse/MWPW-NUMBER)
+
+Test URLs:
+- Before: https://main--events-milo--adobecom.hlx.page/
+- After: https://<branch>--events-milo--adobecom.hlx.page/

.github/workflows/codeql.yml

@@ -0,0 +1,64 @@
+# For most projects, this workflow file will not need changing; you simply need
+# to commit it to your repository.
+#
+# You may wish to alter this file to override the set of languages analyzed,
+# or to provide custom queries or build logic.
+#
+# ******** NOTE ********
+# We have attempted to detect the languages in your repository. Please check
+# the `language` matrix defined below to confirm you have the correct set of
+# supported CodeQL languages.
+#
+name: "CodeQL"
+
+on:
+  push:
+    branches: [ "main" ]
+  pull_request:
+  schedule:
+    - cron: '18 6 * * 5'
+
+jobs:
+  analyze:
+    name: Analyze
+    runs-on: ubuntu-latest
+    permissions:
+      actions: read
+      contents: read
+      security-events: write
+
+    strategy:
+      fail-fast: false
+      matrix:
+        language: [ 'javascript' ]
+
+    steps:
+    - name: Checkout repository
+      uses: actions/checkout@v3
+
+    # Initializes the CodeQL tools for scanning.
+    - name: Initialize CodeQL
+      uses: github/codeql-action/init@v2
+      with:
+        languages: ${{ matrix.language }}
+        config-file: ./.github/codeql/codeql-config.yml
+
+    # Autobuild attempts to build any compiled languages  (C/C++, C#, or Java).
+    # If this step fails, then you should remove it and run the build manually (see below)
+    - name: Autobuild
+      uses: github/codeql-action/autobuild@v2
+
+    # ℹ️ Command-line programs to run using the OS shell.
+    # 📚 See https://docs.github.com/en/actions/using-workflows/workflow-syntax-for-github-actions#jobsjob_idstepsrun
+
+    #   If the Autobuild fails above, remove it and uncomment the following three lines.
+    #   modify them (or add more) to build your code if your project, please refer to the EXAMPLE below for guidance.
+
+    # - run: |
+    #   echo "Run, Build Application using script"
+    #   ./location_of_script_within_repo/buildscript.sh
+
+    - name: Perform CodeQL Analysis
+      uses: github/codeql-action/analyze@v2
+      with:
+        category: "/language:${{matrix.language}}"

.github/workflows/run-tests.yaml

@@ -0,0 +1,39 @@
+name: Unit Tests
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+    types: [opened, synchronize, reopened]
+jobs:
+  run-tests:
+    name: Running tests
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node-version: [18.x]
+    steps:
+    - name: Checkout repository
+      uses: actions/checkout@v2
+      with:
+        fetch-depth: 2
+
+    - name: Set up Node.js ${{ matrix.node-version }}
+      uses: actions/setup-node@v1
+      with:
+        node-version: ${{ matrix.node-version }}
+
+    - name: Install XVFB
+      run: sudo apt-get install xvfb
+
+    - name: Install dependencies
+      run: npm install
+
+    - name: Run the tests
+      run: xvfb-run -a npm test
+
+    - name: Upload coverage to Codecov
+      uses: codecov/codecov-action@v2
+      with:
+        token: ${{ secrets.CODECOV_TOKEN }}
+        files: coverage/lcov.info

.gitignore

@@ -4,3 +4,4 @@ logs/*
 node_modules/*
 .DS_Store
 .idea
+*.pem

.kodiak/config.yaml

@@ -0,0 +1,28 @@
+version: 1.0
+
+snow:
+  - id: 546343 # Milo Events https://adobe.service-now.com/service_registry_portal.do#/service/546343
+
+notifications:
+  jira:
+    default:
+      project: MWPW # Mandatory
+      filters:
+        include:
+          risk_rating: R5
+      fields:
+        assignee:
+          name: shkhan
+        customfield_11800: MWPW-140779 #epic link
+        watchers:
+          - casalino
+          - jmichnow
+          - mauchley
+          - cod87753
+          - tek10248
+        labels:
+          - "OriginatingProcess=Kodiak"
+          - "security"
+          - "kodiak-ticket"
+        components:
+          - name: "DevOps Security"

blocks/event-editor/event-editor.css

@@ -0,0 +1,88 @@
+.event-editor {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: var(--spacing-s);
+  padding: var(--spacing-m);
+}
+
+.event-editor form {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+  gap: var(--spacing-m);
+  background-color: var(--background-color);
+  border: 1px solid var(--color-gray-300);
+  box-shadow: 0 2px 4px var(--color-gray-100);
+  border-radius: 4px;
+  padding: var(--spacing-m);
+}
+
+.event-editor form > div.sub-grid {
+  grid-column: 1 / -1;
+  display: grid;
+}
+
+.event-editor fieldset {
+  grid-column: 1 / -1; /* Make fieldsets span all columns */
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: var(--spacing-s);
+  border: 1px solid var(--color-gray-300);
+  border-radius: 4px;
+  padding: var(--spacing-m);
+}
+
+.event-editor legend {
+  grid-column: 1 / -1;
+  font-weight: bold;
+  color: var(--link-color);
+}
+
+.event-editor label {
+  display: block;
+  margin-bottom: var(--spacing-xs);
+  color: var(--color-gray-600);
+}
+
+.event-editor input[type="text"][name="url"] {
+  grid-column: 1 / 3;
+}
+
+.event-editor input[type="text"],
+.event-editor input[type="file"],
+.event-editor textarea,
+.event-editor button {
+  width: 100%;
+  padding: var(--spacing-xs);
+  border: 1px solid var(--color-gray-300);
+  border-radius: 4px;
+  box-sizing: border-box;
+}
+
+.event-editor button,
+.event-editor.add-participant-btn,
+.event-editor .remove-participant-btn {
+  width: max-content;
+  box-sizing: border-box;
+  margin: 8px;
+  height: max-content;
+  background-color: var(--color-accent);
+  color: var(--color-white);
+  border: none;
+  padding: var(--spacing-xs);
+  cursor: pointer;
+  align-self: end;
+}
+
+.event-editor .button[type="submit"] {
+  align-self: end;
+}
+
+.event-editor button:hover {
+  opacity: 0.8;
+}
+
+@media (min-width: 900px) {
+  .event-editor form {
+    grid-template-columns: repeat(2, 1fr); /* Two columns for larger screens */
+  }
+}

blocks/event-editor/event-editor.js

@@ -0,0 +1,153 @@
+import { getLibs } from '../../scripts/utils.js';
+
+const { html, render, useRef, useState } = await import(`${getLibs()}/deps/htm-preact.js`);
+
+export default function init(el) {
+  // Mock search function
+  const mockSearch = () => new Promise((resolve) => {
+    setTimeout(() => {
+      resolve({
+        id: '6c0ce564-3335-5d20-95f6-cb35ccee571b',
+        styles: {
+          typeOverride: 'event',
+          backgroundImage: 'https://summit.adobe.com/_assets/images/home/[email protected]',
+          mnemonic: '',
+        },
+        arbitrary: [
+          { key: 'promoId', value: 'splash-that|458926431' },
+          { key: 'timezone', value: 'America/Los_Angeles' },
+          { key: 'venue', value: 'La Costa Resort and Spa' },
+        ],
+        contentArea: {
+          detailText: 'detail',
+          title: 'TestTier3Event1',
+          url: 'https://main--events-milo--adobecom.hlx.page/t3/event/03-12-2024/chicago/il/adobe-events-seminar',
+          description: 'TestTier3Event1',
+        },
+        footer: [{
+          divider: false,
+          left: [],
+          center: [],
+          right: [{
+            type: 'button',
+            style: '',
+            text: 'Read now',
+            href: 'https://main--events-milo--adobecom.hlx.page/t3/event/03-12-2024/chicago/il/adobe-events-seminar',
+          }],
+        }],
+      });
+    }, 1000);
+  });
+
+  // DynamicForm Component
+  const DynamicForm = ({ data }) => {
+    // Updating state to handle both speakers and hosts
+    const [participants, setParticipants] = useState([]);
+
+    const handleSubmit = (event) => {
+      event.preventDefault();
+      // Prepare and log the data to be submitted
+      const formData = new FormData(event.target);
+      // Example of handling form data here
+      console.log(formData, 'Form submitted with updated data');
+      alert('Check the console for submitted data.');
+    };
+
+    const addParticipant = (type) => {
+      setParticipants([
+        ...participants,
+        { id: Math.random().toString(16).slice(2), type },
+      ]);
+    };
+
+    const removeParticipant = (id) => {
+      setParticipants((current) => current.filter((p) => p.id !== id));
+    };
+
+    const renderInputField = (name, value, label) => html`
+      <div>
+        <label for=${name}>${label}</label>
+        <input type="text" id=${name} name=${name} value=${value} key=${name} />
+      </div>
+    `;
+
+    const renderParticipantInputs = (participant) => html`
+          <fieldset key=${participant.id}>
+            <legend>${participant.type.charAt(0).toUpperCase() + participant.type.slice(1)} Details</legend>
+            <div>
+              <label for=${`firstName-${participant.id}`}>First Name</label>
+              <input type="text" id=${`firstName-${participant.id}`} name=${`firstName-${participant.id}`} placeholder="First Name" />
+            </div>
+            <div>
+              <label for=${`lastName-${participant.id}`}>Last Name</label>
+              <input type="text" id=${`lastName-${participant.id}`} name=${`lastName-${participant.id}`} placeholder="Last Name" />
+            </div>
+            <div>
+              <label for=${`title-${participant.id}`}>Title</label>
+              <input type="text" id=${`title-${participant.id}`} name=${`title-${participant.id}`} placeholder="Title" />
+            </div>
+            <div>
+              <label for=${`img-${participant.id}`}>Image</label>
+              <input type="file" id=${`img-${participant.id}`} name=${`img-${participant.id}`} accept="image/*" />
+            </div>
+            <div>
+              <label for=${`bio-${participant.id}`}>Bio</label>
+              <textarea id=${`bio-${participant.id}`} name=${`bio-${participant.id}`} placeholder="Short Bio"></textarea>
+            </div>
+            <button type="button" onClick=${() => removeParticipant(participant.id)} class="remove-participant-btn">
+              Remove ${participant.type.charAt(0).toUpperCase() + participant.type.slice(1)}
+            </button>
+          </fieldset>
+        `;
+
+    return html`
+        <form onSubmit=${handleSubmit}>
+          ${Object.entries(data).map(([key, value]) => {
+    if (typeof value === 'object' && !Array.isArray(value) && value !== null) {
+      return Object.entries(value).map(([subKey, subValue]) => renderInputField(`${key}.${subKey}`, subValue, `${subKey.charAt(0).toUpperCase() + subKey.slice(1)}`));
+    } if (typeof value === 'string') {
+      return renderInputField(key, value, `${key.charAt(0).toUpperCase() + key.slice(1)}`);
+    }
+    return null;
+  })}
+          <div class="sub-grid">
+            ${participants.map(renderParticipantInputs)}
+            <div class="addition-button-wrapper">
+              <button type="button" onClick=${() => addParticipant('speaker')}>Add Speaker</button>
+              <button type="button" onClick=${() => addParticipant('host')}>Add Host</button>
+            </div>
+          </div>
+          <button type="submit">Update</button>
+        </form>
+      `;
+  };
+
+  // App Component
+  const App = () => {
+    const [data, setData] = useState(null);
+    const inputRef = useRef(null);
+
+    const handleSubmit = async (event) => {
+      event.preventDefault();
+      const url = inputRef.current.value;
+      const result = await mockSearch(url);
+      setData(result);
+    };
+
+    return html`
+      <div>
+        ${!data ? html`
+          <form onSubmit=${handleSubmit}>
+            <input type="text" name="url" placeholder="Enter URL or Pathname of your event details page" ref=${inputRef} required />
+            <button type="submit">Submit</button>
+          </form>
+        ` : html`
+          <${DynamicForm} data=${data} />
+        `}
+      </div>
+    `;
+  };
+
+  // Render the App
+  render(html`<${App} />`, el);
+}