Custom Blocks Deployment (#224)

### Summary Merge changes Bits of Good worked on the first half of Spring 2023. Changes include: - Custom Blocks (also known as Recurring Events): a feature that allows users to add their meetings, work shifts, or any recurring weekly events during which they do not want to have classes. - Bug fixes: see the list of bugs [here](https://github.com/orgs/gt-scheduler/projects/1/views/6) --------- Co-authored-by: Samarth Chandna <[email protected]> Co-authored-by: EmilyAL001 <[email protected]> Co-authored-by: Sophia Lin <[email protected]> Co-authored-by: Nathan Gong <[email protected]> Co-authored-by: Yatharth Bhargava <[email protected]> Co-authored-by: EmilyAL001 <[email protected]>
gt-scheduler · Apr 6, 2023 · af7da8d · af7da8d
1 parent 771709c
commit af7da8d
Show file tree

Hide file tree

Showing 54 changed files with 2,228 additions and 540 deletions.
diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md
@@ -10,4 +10,4 @@ Resolves #[ticket-number]
 
 
 ### How to Test
-<!-- Describe how to test your code. -->
+<!-- Describe how to test your code. -->
diff --git a/.github/workflows/deploy.yaml b/.github/workflows/deploy.yaml
@@ -53,3 +53,4 @@ jobs:
           BRANCH: gh-pages
           FOLDER: build
           CLEAN: true
+          CLEAN-EXCLUDE: pr-preview/
diff --git a/README.md b/README.md
@@ -77,6 +77,10 @@ With that, you're able to make changes to the code and have them be re-built and
 >
 > See https://github.com/facebook/create-react-app/discussions/11767 for more details.
 
+### Secrets (only for BoG Developers)
+- `yarn run secrets:linux` - obtain app secrets for Linux and MacOS; ask Engineering Manager for password
+- `yarn run secrets:windows` - obtain app secrets for Windows; ask Engineering Manager for password
+
 ### Linting
 
 The project uses pre-commit hooks using [Husky](https://typicode.github.io/husky/#/) and [`lint-staged`](https://www.npmjs.com/package/lint-staged) to run linting (via [ESLint](https://eslint.org/)) and formatting (via [Prettier](https://prettier.io/)). These can be run manually from the command line to format/lint the code on-demand, using the following commands:

diff --git a/package.json b/package.json
@@ -10,6 +10,7 @@
     "@fortawesome/react-fontawesome": "^0.2.0",
     "@sentry/react": "^6.12.0",
     "@sentry/tracing": "^6.12.0",
+    "@types/react-map-gl": "^6.1.3",
     "axios": "^0.21.4",
     "cheerio": "^1.0.0-rc.3",
     "copy-to-clipboard": "^3.3.1",
@@ -28,7 +29,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-firebaseui": "^5.0.2",
-    "react-map-gl": "^5.2.10",
+    "react-map-gl": "5.2.11",
     "react-overlays": "^5.1.1",
     "react-resize-panel": "^0.3.5",
     "react-scripts": "5.0.1",
@@ -79,7 +80,11 @@
     "lint": "eslint \"**/*.{js,jsx,ts,tsx}\"",
     "lint:fix": "eslint \"**/*.{js,jsx,ts,tsx}\" --fix",
     "format": "prettier \"**/*.{js,jsx,ts,tsx,json}\" --write",
-    "format:check": "prettier \"**/*.{js,jsx,ts,tsx,json}\" -l"
+    "format:check": "prettier \"**/*.{js,jsx,ts,tsx,json}\" -l",
+    "secrets:linux": "echo Enter Bitwarden Password: && read BW_PASSWORD && (bw logout || exit 0) && export BW_SESSION=`bw login [email protected] $BW_PASSWORD --raw` && npm run secrets:get",
+    "secrets:windows": "set /p BW_PASSWORD=Enter Bitwarden Password:&& (bw logout || VER>NUL) && npm run secrets:login",
+    "secrets:login": "FOR /F %a IN ('bw login [email protected] %BW_PASSWORD% --raw') DO SET BW_SESSION=%a && npm run secrets:get",
+    "secrets:get": "bw sync && bw get item gt-scheduler/.env.development.local | fx .notes > \".env\""
   },
   "eslintConfig": {
     "extends": "react-app"

diff --git a/public/drag_event_blocks.png b/public/drag_event_blocks.png
diff --git a/public/event_blocks.png b/public/event_blocks.png
diff --git a/src/components/ActionRow/index.tsx b/src/components/ActionRow/index.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { Tooltip as ReactTooltip } from 'react-tooltip';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 
 import { classes } from '../../utils/misc';
@@ -11,6 +12,7 @@ export type Action = {
   icon: FontAwesomeProps['icon'];
   styling?: React.CSSProperties;
   id?: string;
+  tooltip?: string;
   onMouseEnter?: () => void;
   onMouseLeave?: () => void;
 } & Omit<ButtonProps, 'children'>;
@@ -40,19 +42,34 @@ export default function ActionRow({
             .flatMap((action) => (action != null ? [action] : []))
             .map(
               (
-                { icon, styling, id, onMouseEnter, onMouseLeave, ...rest },
+                {
+                  icon,
+                  styling,
+                  id,
+                  tooltip,
+                  onMouseEnter,
+                  onMouseLeave,
+                  ...rest
+                },
                 i
               ) => (
-                <Button className="action" {...rest} key={i}>
-                  <FontAwesomeIcon
-                    fixedWidth
-                    style={styling}
-                    icon={icon}
-                    id={id}
-                    onMouseEnter={onMouseEnter}
-                    onMouseLeave={onMouseLeave}
-                  />
-                </Button>
+                <>
+                  <Button className="action" {...rest} key={i}>
+                    <FontAwesomeIcon
+                      fixedWidth
+                      style={styling}
+                      icon={icon}
+                      id={id}
+                      onMouseEnter={onMouseEnter}
+                      onMouseLeave={onMouseLeave}
+                    />
+                  </Button>
+                  {tooltip && (
+                    <ReactTooltip anchorId={id} variant="dark" place="left">
+                      {tooltip}
+                    </ReactTooltip>
+                  )}
+                </>
               )
             )}
         </div>

diff --git a/src/components/App/index.tsx b/src/components/App/index.tsx
@@ -12,11 +12,10 @@ import ErrorHeader from '../ErrorHeader';
 import { AppNavigation } from './navigation';
 import AppDataLoader from '../AppDataLoader';
 import { AppSkeleton, SkeletonContent, AppContent } from './content';
-import Maintenance from './maintenance';
 import useThemeFromStorage from '../../data/hooks/useThemeFromStorage';
 import { DESKTOP_BREAKPOINT } from '../../constants';
 import useScreenWidth from '../../hooks/useScreenWidth';
-import MaintenanceModal from '../MaintenanceModal';
+import InformationModal from '../InformationModal';
 
 import 'react-virtualized/styles.css';
 import './stylesheet.scss';
@@ -29,64 +28,52 @@ export default function App(): React.ReactElement {
   // Add the current theme as a class on the body element
   useBodyClass(themeContextValue[0]);
 
-  const date = new Date(
-    new Date().toLocaleString('en-US', { timeZone: 'America/New_York' })
-  );
-
-  const websiteDown =
-    date.getFullYear() === 2023 &&
-    date.getMonth() + 1 === 3 &&
-    (date.getDate() === 15 || date.getDate() === 16);
-
   return (
     <ThemeContext.Provider value={themeContextValue}>
       <AppCSSRoot>
         <TooltipProvider>
-          {websiteDown ? (
-            <Maintenance />
-          ) : (
-            <ErrorBoundary
-              fallback={(error, errorInfo): React.ReactElement => (
-                <AppSkeleton>
-                  <SkeletonContent>
-                    <ErrorHeader />
-                    <ErrorDisplay
-                      errorDetails={
-                        <ReactErrorDetails
-                          error={error}
-                          errorInfo={errorInfo}
-                        />
-                      }
-                    >
-                      <div>
-                        There was en error somewhere in the core application
-                        logic and it can&apos;t continue.
-                      </div>
-                      <div>
-                        Try refreshing the page to see if it fixes the issue.
-                      </div>
-                    </ErrorDisplay>
-                  </SkeletonContent>
-                </AppSkeleton>
-              )}
-            >
-              <AppNavigation>
-                {/* AppDataLoader is in charge of ensuring that there are valid values
-                  for the Terms and Term contexts before rendering its children.
-                  If any data is still loading,
-                  then it displays an "app skeleton" with a spinner.
-                  If there was an error while loading
-                  then it displays an error screen. */}
-                <AppDataLoader>
-                  <AppContent />
-                </AppDataLoader>
-              </AppNavigation>
-              <Feedback />
-              {/* Display a popup when first visiting the site */}
-              {/* Include <InformationModal /> here */}
-              <MaintenanceModal />
-            </ErrorBoundary>
-          )}
+          {/* To bring the website down for maintenance purposes, 
+            insert <Maintenance /> here and disable everything below.
+            See https://github.com/gt-scheduler/website/pull/194 for reference. */}
+          <ErrorBoundary
+            fallback={(error, errorInfo): React.ReactElement => (
+              <AppSkeleton>
+                <SkeletonContent>
+                  <ErrorHeader />
+                  <ErrorDisplay
+                    errorDetails={
+                      <ReactErrorDetails error={error} errorInfo={errorInfo} />
+                    }
+                  >
+                    <div>
+                      There was en error somewhere in the core application logic
+                      and it can&apos;t continue.
+                    </div>
+                    <div>
+                      Try refreshing the page to see if it fixes the issue.
+                    </div>
+                  </ErrorDisplay>
+                </SkeletonContent>
+              </AppSkeleton>
+            )}
+          >
+            <AppNavigation>
+              {/* AppDataLoader is in charge of ensuring that there are valid values
+                for the Terms and Term contexts before rendering its children.
+                If any data is still loading,
+                then it displays an "app skeleton" with a spinner.
+                If there was an error while loading
+                then it displays an error screen. */}
+              <AppDataLoader>
+                <AppContent />
+              </AppDataLoader>
+            </AppNavigation>
+            <Feedback />
+
+            {/* Display a popup when first visiting the site */}
+            {/* Include <InformationModal /> or <MaintenanceModal /> here */}
+            <InformationModal />
+          </ErrorBoundary>
         </TooltipProvider>
       </AppCSSRoot>
     </ThemeContext.Provider>

diff --git a/src/components/Attribution/index.tsx b/src/components/Attribution/index.tsx
@@ -11,7 +11,7 @@ export default function Attribution(): React.ReactElement {
   return (
     <div className={classes('Attribution')}>
       <p>
-        Copyright (c) 2021 with{' '}
+        Copyright (c) 2023 with{' '}
         <span role="img" aria-label="love">
           ❤️
         </span>{' '}

diff --git a/src/components/Attribution/stylesheet.scss b/src/components/Attribution/stylesheet.scss
@@ -13,4 +13,11 @@
     border-top: 1px solid $color-border;
     font-size: .8em;
     white-space: pre-wrap;
+
+    p {
+        display: flex;
+        max-width: fit-content;
+        flex-wrap: wrap;
+        justify-content: center;
+    }
 }