Merge pull request #560 from reportportal/develop

Release

.github/workflows/deploy-dev.yml

@@ -11,7 +11,18 @@
 # See the License for the specific language governing permissions and
 # limitations under the License.
 
-name: Deploy to dev in Contentful production mode (AWS S3)
+name: Deploy to dev (AWS S3)
+env:
+  AWS_S3_BUCKET_NAME : rpp-landing
+  AWS_REGION_NAME : eu-central-1
+  BUILD_DIR : public/
+  CONTACT_US_URL: https://testio--partial.sandbox.my.salesforce-sites.com/leadcapture/services/apexrest/leadservice
+  DOCUMENTATION_URL: //reportportal.io/docs
+  GTM_ID: GTM-MK7ZHTL
+  CLOUDFRONT_ID: EILUB1IE9EON0
+  GATSBY_MAILCHIMP_LIST_ID: ca6d0eec5b
+  CONTENTFUL_ENV_ID: master
+  CONTENTFUL_HOST: cdn.contentful.com
 
 on:
   push:
@@ -20,12 +31,97 @@ on:
     paths-ignore:
       - README.md
   workflow_dispatch:
+    secrets:
+      CONTENTFUL_ACCESS_TOKEN:
+        required: true
+      CONTENTFUL_PREVIEW_ACCESS_TOKEN_DEV:
+        required: true
+      AWS_ACCESS_KEY_ID:
+        required: true
+      AWS_SECRET_ACCESS_KEY:
+        required: true
+      CONTENTFUL_SPACE_ID_DEV:
+        required: true
+    inputs:
+      CONTENTFUL_ENV_ID:
+        description: 'Contentful environment to use'
+        type: choice
+        default: master
+        options:
+          - master
+          - dev
+      CONTENTFUL_PREVIEW:
+        description: 'Use Contentful preview?'
+        type: boolean
+        default: false
 
 jobs:
-  use-base:
-    uses: ./.github/workflows/deploy-dev-base.yml
-    secrets:
-      CONTENTFUL_ACCESS_TOKEN: ${{ secrets.CONTENTFUL_ACCESS_TOKEN_DEV }}
-      AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
-      AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
-      CONTENTFUL_SPACE_ID_DEV: ${{ secrets.CONTENTFUL_SPACE_ID_DEV }}
+  empty-s3-bucket:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Set AWS credentials
+        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: ${{ env.AWS_REGION_NAME }}
+
+      - name: Empty AWS S3 bucket
+        run: aws s3 rm s3://${{ env.AWS_S3_BUCKET_NAME }} --recursive
+
+  deploy:
+    runs-on: ubuntu-latest
+    needs: [empty-s3-bucket]
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 18
+
+      - name: Install of node dependencies
+        run: npm install
+
+      - name: create env file
+        run: |
+          touch .env.production
+
+          CONTENTFUL_ENV_ID=${{ env.CONTENTFUL_ENV_ID }}
+          CONTENTFUL_HOST=${{ env.CONTENTFUL_HOST }}
+          CONTENTFUL_ACCESS_TOKEN=${{ secrets.CONTENTFUL_ACCESS_TOKEN }}
+
+          if [[ "${{ github.event_name }}" == "workflow_dispatch" ]]; then
+            CONTENTFUL_ENV_ID=${{ github.event.inputs.CONTENTFUL_ENV_ID }}
+
+            if [[ "${{ github.event.inputs.CONTENTFUL_PREVIEW }}" == "true" ]]; then
+              CONTENTFUL_HOST=preview.contentful.com
+              CONTENTFUL_ACCESS_TOKEN=${{ secrets.CONTENTFUL_PREVIEW_ACCESS_TOKEN_DEV }}
+            fi
+          fi
+
+          echo CONTENTFUL_ACCESS_TOKEN=$CONTENTFUL_ACCESS_TOKEN >> .env.production
+          echo CONTENTFUL_ENV_ID=$CONTENTFUL_ENV_ID >> .env.production
+          echo CONTENTFUL_HOST=$CONTENTFUL_HOST >> .env.production
+          echo CONTENTFUL_SPACE_ID=${{ secrets.CONTENTFUL_SPACE_ID_DEV }} >> .env.production
+          echo GTM_ID=${{ env.GTM_ID }} >> .env.production
+          echo CONTACT_US_URL=${{ env.CONTACT_US_URL }} >> .env.production
+          echo DOCUMENTATION_URL=${{ env.DOCUMENTATION_URL }} >> .env.production
+          echo GATSBY_MAILCHIMP_LIST_ID=${{ env.GATSBY_MAILCHIMP_LIST_ID }} >> .env.production
+
+      - name: Build the source code
+        run: npm run build
+
+      - name: Set AWS credentials
+        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: ${{ env.AWS_REGION_NAME }}
+
+      - name: Deploy to AWS S3
+        run: aws s3 sync ./${{ env.BUILD_DIR }} s3://${{ env.AWS_S3_BUCKET_NAME }}
+
+      - name: Clearing CloudFront cache for the entire distribution
+        run: aws cloudfront create-invalidation --distribution-id ${{ env.CLOUDFRONT_ID }} --paths "/*"

src/components/AnimatedHeader/AnimatedHeader.tsx

@@ -2,17 +2,16 @@ import { createElement, FC, PropsWithChildren } from 'react';
 import { motion, Transition } from 'framer-motion';
 import { useInView } from '@app/hooks/useInView';
 import { useMotionEnterAnimation } from '@app/hooks/useMotionEnterAnimation';
-import { easeInOutTransition, opacityScaleAnimationProps } from '@app/utils';
+import { easeInOutTransition, opacityScaleAnimationProps, PropsWithAnimation } from '@app/utils';
 
 interface AnimatedHeaderProps {
   transition?: Transition;
   delay?: number;
   headerLevel?: 1 | 2 | 3 | 4 | 5 | 6;
   className?: string;
-  isAnimationEnabled?: boolean;
 }
 
-export const AnimatedHeader: FC<PropsWithChildren<AnimatedHeaderProps>> = ({
+export const AnimatedHeader: FC<PropsWithChildren<PropsWithAnimation<AnimatedHeaderProps>>> = ({
   transition = easeInOutTransition,
   delay,
   headerLevel = 2,
@@ -29,7 +28,7 @@ export const AnimatedHeader: FC<PropsWithChildren<AnimatedHeaderProps>> = ({
 
   return createElement(
     motion[`h${headerLevel}`],
-    { className, ref: titleRef, ...getAnimation({ inView: isTitleInView, delay }) },
+    { className, ref: titleRef, ...getAnimation({ isInView: isTitleInView, delay }) },
     children,
   );
 };

src/components/AnimatedList/AnimatedList.tsx

@@ -74,7 +74,9 @@ export const AnimatedList: FC<AnimatedListProps> = ({
     <section ref={ref} className={classNames(getBlocksWith(), 'container')}>
       <div>
         <AnimatedHeader transition={defaultSpringTransition}>{title}</AnimatedHeader>
-        <motion.h3 {...getSubtitleAnimation({ delay: 0.1, inView })}>{subtitle}</motion.h3>
+        <motion.h3 {...getSubtitleAnimation({ delay: 0.1, isInView: inView })}>
+          {subtitle}
+        </motion.h3>
       </div>
       <div className={getBlocksWith('__content')}>
         <div
@@ -89,15 +91,15 @@ export const AnimatedList: FC<AnimatedListProps> = ({
                   className={getBlocksWithList('__item')}
                   key={itemTitle}
                   onClick={() => setIndexAndResetInterval(index)}
-                  {...getCardAnimation({ inView, delay: 0.2 * index })}
+                  {...getCardAnimation({ isInView: inView, delay: 0.2 * index })}
                 >
                   <strong>{itemTitle}</strong>
                 </motion.li>
               ) : (
                 <motion.li
                   className={getBlocksWithList('__item', '__item--active')}
                   key={itemTitle}
-                  {...getCardAnimation({ inView, delay: 0.2 * index })}
+                  {...getCardAnimation({ isInView: inView, delay: 0.2 * index })}
                 >
                   <img src={image} alt="" />
                   <LinkedCard
@@ -116,7 +118,7 @@ export const AnimatedList: FC<AnimatedListProps> = ({
             key={image}
             alt=""
             {...getImageAnimation({
-              inView,
+              isInView: inView,
               delay: isFirstImageAnimationPlayed.current ? 0 : 0.6,
               additionalEffects: {
                 transitionAdditional: {
@@ -134,7 +136,7 @@ export const AnimatedList: FC<AnimatedListProps> = ({
         <div className={getBlocksWith('__leading')}>
           <motion.div
             className={getBlocksWith('__leading-button-group')}
-            {...getButtonsAnimation({ inView, delay: 1.7 })}
+            {...getButtonsAnimation({ isInView: inView, delay: 1.7 })}
           >
             {children}
           </motion.div>

src/components/AnnouncementBar/AnnouncementBar.tsx

@@ -10,6 +10,7 @@ import {
 } from '@app/utils';
 import { CrossIcon } from '@app/components/Layout/Navigation/icons';
 import { ArrowLink } from '@app/components/ArrowLink';
+import { useMotionEnterAnimation } from '@app/hooks/useMotionEnterAnimation';
 
 import MerchIcon from './MerchIcon.inline.svg';
 
@@ -26,6 +27,12 @@ export const AnnouncementBar: FC = () => {
   const bannerHeight = isTablet ? desktopBannerHeight : mobileBannerHeight;
   const heightAnimation = { y: bannerHeight * -1, height: 0 };
 
+  const getAnimation = useMotionEnterAnimation({
+    hiddenState: heightAnimation,
+    enterState: { y: 0, height: bannerHeight },
+    transition: { duration: 0.5 },
+  });
+
   const onClose = () => {
     sessionStorage.setItem(ANNOUNCEMENT_CLOSED_KEY, 'true');
     setAnnouncementOpen(false);
@@ -34,11 +41,9 @@ export const AnnouncementBar: FC = () => {
   return (
     <motion.div
       className={getBlocksWith('__container')}
-      initial={heightAnimation}
-      animate={{ y: 0, height: bannerHeight }}
-      exit={heightAnimation}
-      transition={{ duration: 0.5 }}
       key="announcement-bar"
+      {...getAnimation({ isInView: true })}
+      exit={heightAnimation}
     >
       <div className={getBlocksWith('__body')}>
         <div className={getBlocksWith('__text-cross-wrapper')}>