Add seamless opening of the sidepanel

.github/workflows/ci-cd-pipeline.yaml

@@ -1,96 +1,34 @@
-name: CI/CD Pipeline
-
-on:
-  push:
-    branches: [main, prod-ready]
-jobs:
-  # Determines the environment to deploy the backend to
-  setenv:
-    runs-on: ubuntu-latest
-    outputs:
-      env: ${{ steps.setenvstep.outputs.env }}
-    # Deploys to staging/prod environment depending on branch name
-    steps:
-      - name: determine env
-        id: setenvstep
-        run: |
-          if [[ "${{github.base_ref}}" == "main" || "${{github.ref}}" == "refs/heads/main" ]]; then
-            echo "env=staging" >> "$GITHUB_OUTPUT"
-          fi
-          
-          if [[ "${{github.base_ref}}" == "prod-ready" || "${{github.ref}}" == "refs/heads/prod-ready" ]]; then
-            echo "env=prod" >> "$GITHUB_OUTPUT"
-          fi
-  # Change detection for filtering jobs
-  changes:
-    runs-on: ubuntu-latest
-    # Required permissions
-    permissions:
-      pull-requests: read
-    outputs:
-      backend: ${{ steps.filter.outputs.backend }}
-      frontend: ${{ steps.filter.outputs.frontend }}
-    steps:
-      - uses: actions/checkout@v4
-      # For pull requests it's not necessary to checkout the code
-      - uses: dorny/paths-filter@v3
-        id: filter
-        with:
-          filters: |
-            backend:
-              - 'backend/**'
-            frontend:
-              - 'frontend/**'
-  frontend:
-    defaults:
-      run:
-        working-directory: frontend
-    permissions:
-      id-token: write
-      contents: read
-    needs: changes
-    if: ${{needs.changes.outputs.frontend == 'true'}}
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v4
-      - uses: actions/setup-node@v4
-        with:
-          node-version: 18
-      - run: npm install
-      - run: npm run build
-      - name: Configure AWS Credentials
-        uses: aws-actions/configure-aws-credentials@v4
-        with:
-          role-to-assume: arn:aws:iam::035306758865:role/gh-short-lived-creds
-          aws-region: us-east-1
-      - run: aws s3 sync build/ s3://flatini.formulathoughts.com
-      - run: aws cloudfront create-invalidation --distribution-id ${{secrets.DISTRIBUTION_ID}} --paths "/*"
-
-  backend:
-    needs: [changes, setenv]
-    if: ${{ needs.changes.outputs.backend == 'true' }}
-    runs-on: ubuntu-latest
-    steps:
-      - name: checkout head
-        uses: actions/checkout@v4
-      - name: Set up Python 3.10
-        uses: actions/setup-python@v4
-        with:
-          python-version: "3.10"
-      - name: backend tests
-        run: |
-          cd backend
-          python -m pip install --upgrade pip
-          pip install -r requirements.txt
-          pip install -r requirements-test.txt
-          python -m unittest
-      - name: setup aws cli
-        uses: aws-actions/configure-aws-credentials@v1
-        with:
-          aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
-          aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
-          aws-region: eu-west-2
-      - name: build and deploy to aws
-        run: |
-          cd backend && sh clean_build.sh
-          sam deploy --no-fail-on-empty-changeset --no-confirm-changeset --stack-name flatini-api-${{needs.setenv.outputs.env}} --s3-bucket flatini-api-${{needs.setenv.outputs.env}}-s3 --s3-prefix flatini --region eu-west-2 --capabilities CAPABILITY_IAM --parameter-overrides ParameterKey=GoogleClientSecret,ParameterValue="${{ secrets.GOOGLE_CLIENT_SECRET }}" ParameterKey=GoogleClientId,ParameterValue="${{ secrets.GOOGLE_CLIENT_ID }}"
+frontend:
+  defaults:
+    run:
+      working-directory: frontend
+  permissions:
+    id-token: write
+    contents: read
+  needs: changes
+  if: ${{ needs.changes.outputs.frontend == 'true' }}
+  runs-on: ubuntu-latest
+  steps:
+    - uses: actions/checkout@v4
+    - uses: actions/setup-node@v4
+      with:
+        node-version: 18
+    - run: npm install
+    - run: |
+        if [[ "${{ needs.setenv.outputs.env }}" == "staging" ]]; then
+          echo "REACT_APP_COGNITO_DOMAIN=${{ secrets.REACT_APP_COGNITO_DOMAIN_STAGING }}" >> .env
+          echo "REACT_APP_COGNITO_POOL_ID=${{ secrets.REACT_APP_COGNITO_POOL_ID_STAGING }}" >> .env
+          echo "REACT_APP_COGNITO_CLIENT_ID=${{ secrets.REACT_APP_COGNITO_CLIENT_ID_STAGING }}" >> .env
+        elif [[ "${{ needs.setenv.outputs.env }}" == "prod" ]]; then
+          echo "REACT_APP_COGNITO_DOMAIN=${{ secrets.REACT_APP_COGNITO_DOMAIN_PROD }}" >> .env
+          echo "REACT_APP_COGNITO_POOL_ID=${{ secrets.REACT_APP_COGNITO_POOL_ID_PROD }}" >> .env
+          echo "REACT_APP_COGNITO_CLIENT_ID=${{ secrets.REACT_APP_COGNITO_CLIENT_ID_PROD }}" >> .env
+        fi
+    - run: npm run build
+    - name: Configure AWS Credentials
+      uses: aws-actions/configure-aws-credentials@v4
+      with:
+        role-to-assume: arn:aws:iam::035306758865:role/gh-short-lived-creds
+        aws-region: us-east-1
+    - run: aws s3 sync build/ s3://flatini.formulathoughts.com
+    - run: aws cloudfront create-invalidation --distribution-id ${{ secrets.DISTRIBUTION_ID }} --paths "/*"

client/background.js

@@ -13,3 +13,13 @@ chrome.runtime.onInstalled.addListener(function (details) {
 chrome.sidePanel
   .setPanelBehavior({ openPanelOnActionClick: true })
   .catch((error) => console.error(error));
+
+chrome.runtime.onMessage.addListener((message, sender) => {
+  // The callback for runtime.onMessage must return falsy if we're not sending a response
+  (async () => {
+    if (message.type === "open_side_panel") {
+      // This will open a tab-specific side panel only on the current tab.
+      await chrome.sidePanel.open({ tabId: sender.tab.id });
+    }
+  })();
+});

client/content.js

@@ -37,3 +37,8 @@ function getAllTextEndingWithPCM(element) {
 
   return textContent.trim();
 }
+
+document.querySelector("#openFlatiniSidebar").addEventListener("click", () => {
+  console.log("testing?", chrome);
+  chrome.runtime.sendMessage({ type: "open_side_panel" });
+});

client/manifest.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.1.1",
+  "version": "1.1.2",
   "key": "MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEA0bsGuxRgS5/cSnoPznlD7Wf09ouEtlf06G7N+FtVrw0LFurO3uOQIkxXIRwFN4uxOPdEjjNNZK/82VGdxo/PUGWH013DsZaFho2CvvpByn/hqlqfhhw8NqqyaGfIz369Tg1VOOY6p4qbXOydj9AH0eQrvcPUm5LjEv0sqEqzyKBMmJnjt5M5WFvOOHaJnxIQv4qt0AeieM4MmohDWVOe5upTVj0m0I4eOXTvURrRXtH/yAYu3i5uDaTFR+bwpI7tMbBtMfHb5jcwSpmx7Lv6tnbpRwQqcVmbjeYivaxI2Oav6KwD8d1+wUS76gcml1Z6WzBgwvA6xDNv0qlXE3OnCQIDAQAB",
   "manifest_version": 3,
   "name": "Flatini",

client/src/views/Auth.tsx

@@ -40,9 +40,15 @@ const Auth = () => {
             <Button
               style={{ maxWidth: "100%" }}
               onClick={async () => {}}
-              label="Enter flatini"
+              label="Go to Flatini's site"
             />
           </a>
+          <div style={{ paddingTop: "1rem" }}>
+            <Text style={{ opacity: 0.5 }} type={TextTypes.small}>
+              Once you reach Flatini's site, click on "Enter Flatini" to log in
+              and get you inside.
+            </Text>
+          </div>
         </div>
       </Content>
     </Wrapper>

frontend/package.json

@@ -52,5 +52,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "@types/chrome": "^0.0.272"
   }
 }

frontend/src/views/Homepage.tsx

@@ -104,11 +104,22 @@ const Homepage = (props: any) => {
             }}
           >
             {props.user ? (
-              <Button
-                style={{ cursor: "pointer" }}
-                label="Sign out"
-                onClick={() => signOut()}
-              />
+              <div style={{ display: "flex", gap: "1rem" }}>
+                <Button
+                  id="openFlatiniSidebar"
+                  label={"Open Flatini"}
+                  style={{
+                    cursor: "pointer",
+                    background: theme.colors.primary,
+                    color: "black",
+                  }}
+                />
+                <Button
+                  style={{ cursor: "pointer" }}
+                  label="Sign out"
+                  onClick={() => signOut()}
+                />
+              </div>
             ) : (
               <div
                 style={{
@@ -120,6 +131,7 @@ const Homepage = (props: any) => {
                 }}
               >
                 <Button
+                  id="openFlatiniSidebar"
                   label="Enter Flatini"
                   style={{ cursor: "pointer" }}
                   onClick={() =>
@@ -134,7 +146,6 @@ const Homepage = (props: any) => {
           </div>
         </div>
       </NavBar>
-
       <Hero>
         <ContentLayout>
           <div