feat(DotcomWeb.Live.TripPlanner): selecting and mapping locations (#2158

)
mbta · Aug 27, 2024 · 18a57eb · 18a57eb
1 parent 775f1fe
commit 18a57eb
Show file tree

Hide file tree

Showing 32 changed files with 1,055 additions and 395 deletions.
diff --git a/.github/workflows/deploy-auto.yml b/.github/workflows/deploy-auto.yml
@@ -15,6 +15,7 @@ jobs:
     with:
       deployment-env: dev
     secrets:
+      aws-account-id: ${{ secrets.TID_AWS_ACCOUNT_ID }}
       aws-role-arn: ${{ secrets.AWS_ROLE_ARN }}
       docker-repo: ${{ secrets.DOCKER_REPO }}
 

diff --git a/.github/workflows/deploy-manual.yml b/.github/workflows/deploy-manual.yml
@@ -17,6 +17,7 @@ jobs:
     with:
       deployment-env: ${{ github.event.inputs.env }}
     secrets:
+      aws-account-id: ${{ secrets.TID_AWS_ACCOUNT_ID }}
       aws-role-arn: ${{ secrets.AWS_ROLE_ARN }}
       docker-repo: ${{ secrets.DOCKER_REPO }}
 

diff --git a/.github/workflows/deploy-pr.yml b/.github/workflows/deploy-pr.yml
@@ -27,6 +27,7 @@ jobs:
     with:
       deployment-env: ${{ contains(github.event.pull_request.labels.*.name, 'dev-green') && 'dev-green' || 'dev-blue' }} # env not valid here either
     secrets:
+      aws-account-id: ${{ secrets.TID_AWS_ACCOUNT_ID }}
       aws-role-arn: ${{ secrets.AWS_ROLE_ARN }}
       docker-repo: ${{ secrets.DOCKER_REPO }}
 

diff --git a/.github/workflows/deploy-release.yml b/.github/workflows/deploy-release.yml
@@ -13,6 +13,7 @@ jobs:
       deployment-env: prod
       extra-docker-tag: ${{ github.event.release.tag_name }}
     secrets:
+      aws-account-id: ${{ secrets.TID_AWS_ACCOUNT_ID }}
       aws-role-arn: ${{ secrets.AWS_ROLE_ARN }}
       docker-repo: ${{ secrets.DOCKER_REPO }}
 

diff --git a/.github/workflows/push-monitor.yml b/.github/workflows/push-monitor.yml
@@ -15,15 +15,39 @@ on:
         description: "Environment to deploy to"
         required: true
         type: string
+    secrets:
+      aws-role-arn:
+        required: true
+        description: "AWS_ROLE_ARN value"
+      aws-account-id:
+        required: true
+        description: "TID_AWS_ACCOUNT_ID value"
 
 concurrency:
   group: deploy-monitor-${{ inputs.deployment-env }}
   cancel-in-progress: true
 
 jobs:
+  check:
+    name: Check for changes in monitoring setup
+    runs-on: ubuntu-latest
+    outputs:
+      changed: ${{ steps.changes.outputs.monitor == 'true' }}
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      - uses: dorny/paths-filter@v3
+        id: changes
+        with:
+          filters: |
+            monitor:
+              - 'deploy/monitor/**'
+              - 'integration/**'
   push:
-    name: push-monitor
+    name: Deploy new version
     runs-on: ubuntu-latest
+    needs: check
+    if: ${{ needs.check.outputs.changed }}
     permissions:
       id-token: write
       contents: read
@@ -34,13 +58,13 @@ jobs:
         id: ecr
         uses: mbta/actions/build-push-ecr@v2
         with:
-          docker-repo: "${{ secrets.TID_AWS_ACCOUNT_ID }}.dkr.ecr.us-east-1.amazonaws.com/dotcom-monitor"
+          docker-repo: "${{ secrets.aws-account-id }}.dkr.ecr.us-east-1.amazonaws.com/dotcom-monitor"
           dockerfile-path: "-f ./deploy/monitor/Dockerfile ."
-          role-to-assume: ${{ secrets.AWS_ROLE_ARN }}
+          role-to-assume: ${{ secrets.aws-role-arn }}
       - name: Deploy Monitor to ${{ inputs.deployment-env }}
         uses: mbta/actions/deploy-ecs@v2
         with:
-          role-to-assume: ${{ secrets.AWS_ROLE_ARN }}
+          role-to-assume: ${{ secrets.aws-role-arn }}
           ecs-cluster: dotcom
           ecs-service: dotcom-monitor-${{ inputs.deployment-env }}
           docker-tag: ${{ steps.ecr.outputs.docker-tag }}
diff --git a/.github/workflows/use-deploy-ecs.yml b/.github/workflows/use-deploy-ecs.yml
@@ -13,13 +13,16 @@ on:
         required: false
         description: "Additional tag to apply to the docker image"
     secrets:
+      aws-account-id:
+        required: true
+        description: "TID_AWS_ACCOUNT_ID value"
       aws-role-arn:
         required: true
         description: "AWS_ROLE_ARN value"
       docker-repo:
         required: true
         description: "The Docker repository to upload the docker image to, formatted '....amazonaws.com/<app>'"
-    outputs: 
+    outputs:
       deployment-env:
         value: ${{ jobs.deploy.outputs.deployment-env }}
         description: "The environment that was deployed to"
@@ -131,45 +134,32 @@ jobs:
     timeout-minutes: 30
     container:
       image: mcr.microsoft.com/playwright:v1.42.1-jammy
-    steps:
-    - uses: actions/checkout@v4
-      with:
-        fetch-depth: 0
-    - uses: actions/setup-node@v4
-      with:
-        node-version-file: .tool-versions
-        cache: npm
-        cache-dependency-path: package-lock.json
-    - run: npm install --ignore-scripts
-    - run: npx playwright install --with-deps chromium
-    - run: npx playwright test all-scenarios
-      env:
-        CI: true
-        HOME: /root
-        HOST: ${{ needs.deploy.outputs.deployment-host }}
-    - uses: actions/upload-artifact@v4
-      if: failure()
-      with:
-        name: critical-user-journey-report-${{ github.event.deployment_status.environment }}-${{ github.sha }}
-        path: playwright-report
-        retention-days: 30
-
-  monitor:
-    runs-on: ubuntu-latest
-    needs: deploy
-    name: Redeploy Dotcom Monitor ${{ inputs.deployment-env }} if needed
     steps:
       - uses: actions/checkout@v4
         with:
-          fetch-depth: 2
-      - uses: dorny/paths-filter@v3
-        id: changes
+          fetch-depth: 0
+      - uses: actions/setup-node@v4
         with:
-          filters: |
-            monitor:
-              - 'deploy/monitor/**'
-              - 'integration/**'
-      - uses: ./.github/workflows/push-monitor.yml
-        if: steps.changes.outputs.monitor == 'true'
+          node-version-file: .tool-versions
+          cache: npm
+          cache-dependency-path: package-lock.json
+      - run: npm install --ignore-scripts
+      - run: npx playwright install --with-deps chromium
+      - run: npx playwright test all-scenarios
+        env:
+          CI: true
+          HOME: /root
+          HOST: ${{ needs.deploy.outputs.deployment-host }}
+      - uses: actions/upload-artifact@v4
+        if: failure()
         with:
-          deployment-env: ${{ inputs.deployment-env }}
+          name: critical-user-journey-report-${{ github.event.deployment_status.environment }}-${{ github.sha }}
+          path: playwright-report
+          retention-days: 30
+  monitor:
+    uses: ./.github/workflows/push-monitor.yml
+    with:
+      deployment-env: ${{ inputs.deployment-env }}
+    secrets:
+      aws-account-id: ${{ secrets.aws-account-id }}
+      aws-role-arn: ${{ secrets.aws-role-arn }}
diff --git a/assets/css/_autocomplete-theme.scss b/assets/css/_autocomplete-theme.scss
@@ -1,10 +1,11 @@
 @import '@algolia/autocomplete-theme-classic';
 
-// WIP as we upgrade all of the search bars
-%shared-autocomplete {
+// styles that will be used for every instance
+[phx-hook='AlgoliaAutocomplete'] {
   .aa-Autocomplete {
     --aa-icon-color-rgb: 22, 92, 150; // $brand-primary;
     --aa-primary-color-rgb: 22, 92, 150; // $brand-primary;
+    --aa-input-border-color-rgb: 22, 92, 150;
   }
 
   .aa-Label {
@@ -24,12 +25,18 @@
   }
 
   .aa-Form {
-    border: 3px solid $brand-primary;
+    border-color: rgb(var(--aa-input-border-color-rgb));
+    border-width: 3px;
 
     &:focus-within {
       border-color: $brand-primary-light;
       box-shadow: unset;
     }
+
+    div:has(.text-danger) > & {
+      --aa-input-border-color-rgb: 179, 0, 15;
+      --aa-icon-color-rgb: 179, 0, 15;
+    }
   }
 
   .aa-LoadingIndicator,
@@ -109,7 +116,7 @@
       text-decoration: none;
     }
 
-    [class*=c-svg__icon] {
+    [class*='c-svg__icon'] {
       width: 1em;
     }
   }
@@ -118,68 +125,50 @@
   .aa-ItemContentBody {
     display: unset;
   }
-}
-
-#header-desktop {
-  --aa-search-input-height: 2.25rem;
-
-  @extend %shared-autocomplete;
-
-  .aa-Form {
-    border-radius: .5rem;
-  }
-
-  .aa-InputWrapper {
-    padding-left: 1rem;
-  }
-
-  .aa-ClearButton {
-    padding-right: var(--aa-spacing-half);
-  }
-}
-
-#header-mobile {
-  @extend %shared-autocomplete;
-
-  .aa-InputWrapper {
-    padding-left: 1rem;
-  }
-
-  .aa-ClearButton {
-    padding-right: var(--aa-spacing-half);
-  }
 
   .c-search-bar__autocomplete-results {
     position: relative;
 
     // Autocomplete.JS doesn't support multiple instances per page, and one way
     // this manifests is it totally bungles the dynamic positioning of elements.
     // Hence the need to wrangle with !important.
-    /* stylelint-disable declaration-no-important */
+    // stylelint-disable declaration-no-important
     .aa-Panel {
       left: 0 !important;
       margin-top: .25rem;
       top: 0 !important;
       width: 100% !important;
     }
-    /* stylelint-enable declaration-no-important */
+    // stylelint-enable declaration-no-important
   }
 }
 
-#trip-from,
-#trip-to {
-  @extend %shared-autocomplete;
+#header-desktop {
+  --aa-search-input-height: 2.25rem;
+
+  .aa-Form {
+    border-radius: .5rem;
+  }
+}
 
+#header-desktop,
+#header-mobile {
   .aa-InputWrapper {
-    padding-left: .5rem;
+    padding-left: 1rem;
+  }
+
+  .aa-ClearButton {
+    padding-right: var(--aa-spacing-half);
   }
 }
 
-%large-autocomplete {
+// a larger-format search box, with the search icon displayed as white on blue.
+#error-page,
+#proposed-sales-locations,
+#sales-locations,
+#transit-near-me-locations {
   --aa-search-input-height: 2.5rem;
 
-  @extend %shared-autocomplete;
-
   .aa-Form {
     border-radius: .25rem;
     padding: .25rem;
@@ -192,35 +181,29 @@
   // Search icon is white, reversed, large, on a blue background.
   .aa-SubmitButton {
     @include fa-size($fa-size-scale-lg);
-    background-color: rgba(var(--aa-icon-color-rgb), var(--aa-icon-color-alpha));
+    background-color: rgba(var(--aa-icon-color-rgb),
+      var(--aa-icon-color-alpha));
     border-radius: .25rem;
     color: $white;
     transform: scale(-1, 1);
   }
 }
 
-#error-page {
-  @extend %large-autocomplete;
-}
+#trip-planner-form--from,
+#trip-planner-form--to {
+  .aa-InputWrapperPrefix {
+    order: unset;
+  }
 
-#proposed-sales-locations,
-#sales-locations,
-#transit-near-me-locations {
-  @extend %large-autocomplete;
+  .aa-SubmitButton {
+    user-select: none;
+  }
+}
 
-  .c-search-bar__autocomplete-results {
-    position: relative;
+#trip-planner-form--from .aa-SubmitButton {
+  @include fa-icon-solid($fa-var-a);
+}
 
-    // Autocomplete.JS doesn't support multiple instances per page, and one way
-    // this manifests is it totally bungles the dynamic positioning of elements.
-    // Hence the need to wrangle with !important.
-    /* stylelint-disable declaration-no-important */
-    .aa-Panel {
-      left: 0 !important;
-      margin-top: .25rem;
-      top: 0 !important;
-      width: 100% !important;
-    }
-    /* stylelint-enable declaration-no-important */
-  }
+#trip-planner-form--to .aa-SubmitButton {
+  @include fa-icon-solid($fa-var-b);
 }