Merge pull request #131 from Jam3/fix-app-build

fix: add build admin

.codeship/artifact.sh

@@ -3,6 +3,7 @@ set -e
 
 #### Running build ####
 export COMMIT_ID=$(git rev-parse --short HEAD)
+export COMMIT_COUNT=$(git rev-list --no-merges --count HEAD)
 
 npm run build:static
 

.env.development

@@ -4,7 +4,12 @@ BUNDLE_ANALYZE=false
 # custom env key
 NEXT_PUBLIC_WEBSITE_SITE_URL="https://localhost:3000"
 NEXT_PUBLIC_ENVIRONMENT="local"
-NEXT_PUBLIC_BUILD_ID="n/a"
+NEXT_PUBLIC_COMMIT_ID="commit-id"
+NEXT_PUBLIC_PR_NUMBER="major"
+NEXT_PUBLIC_COMMIT_COUNT="minor"
+NEXT_PUBLIC_BUILD_TIME="YYYY/MM/DD"
+NEXT_PUBLIC_PULL_REQUEST=""
+NEXT_PUBLIC_BUILD_ID=""
 NEXT_PUBLIC_GTM_ID="GTM-0000000"
 
 OPTIMIZE_IMAGES=false

.env.production

@@ -4,7 +4,12 @@ BUNDLE_ANALYZE=false
 # custom env key
 NEXT_PUBLIC_WEBSITE_SITE_URL=$WEBSITE_SITE_URL
 NEXT_PUBLIC_ENVIRONMENT=$CI_ENV
-NEXT_PUBLIC_BUILD_ID=$COMMIT_ID
+NEXT_PUBLIC_COMMIT_ID=$CI_COMMIT_ID
+NEXT_PUBLIC_PR_NUMBER=$CI_PR_NUMBER
+NEXT_PUBLIC_COMMIT_COUNT=$COMMIT_COUNT
+NEXT_PUBLIC_BUILD_TIME=$CI_STRING_TIME
+NEXT_PUBLIC_PULL_REQUEST=$CI_PULL_REQUEST
+NEXT_PUBLIC_BUILD_ID=$CI_BUILD_ID
 NEXT_PUBLIC_GTM_ID=$GTM_ID
 
 OPTIMIZE_IMAGES=true

package.json

@@ -109,7 +109,6 @@
     "babel-preset-react-app": "10.0.0",
     "chalk": "4.1.2",
     "cross-env": "7.0.3",
-    "dotenv": "8.6.0",
     "eslint": "7.32.0",
     "eslint-config-next": "^11.1.2",
     "eslint-config-postcss": "4.0.0",

src/components/AppAdmin/AppAdmin.module.scss

@@ -0,0 +1,54 @@
+@import 'shared';
+
+.AppAdmin {
+  position: fixed;
+  bottom: 0;
+  right: 0;
+  width: px(180);
+  display: flex;
+  flex-direction: column;
+  font: 11px 'Lucida Grande', sans-serif;
+  color: $white;
+  background-color: $black;
+  z-index: 10000000;
+
+  button {
+    width: 100%;
+    height: px(20);
+    margin: 0;
+    padding: 0;
+    border: none;
+    overflow: visible;
+    background: transparent;
+    color: inherit;
+    font: inherit;
+
+    line-height: normal;
+
+    -webkit-font-smoothing: inherit;
+    -moz-osx-font-smoothing: inherit;
+    -webkit-appearance: none;
+  }
+
+  section.adminSection {
+    text-align: left;
+    padding: 0 px(10);
+    border-top: 1px solid #303030;
+
+    &.closed {
+      .adminSectionTitle {
+        span {
+        }
+      }
+    }
+
+    .adminSectionTitle {
+      font-size: inherit;
+      padding: px(7) 0;
+    }
+
+    ul li {
+      padding: px(7) 0 px(7) px(10);
+    }
+  }
+}

src/components/AppAdmin/AppAdmin.tsx

@@ -0,0 +1,70 @@
+import { memo, useState } from 'react';
+import { os, browser, device } from '@jam3/detect';
+import { useWindowSize } from 'react-use';
+import classnames from 'classnames';
+
+import styles from './AppAdmin.module.scss';
+
+function AppAdmin() {
+  const [removed, setRemoved] = useState(false);
+  const [open, setOpen] = useState(true);
+  const [deviceOpen, deviceSetOpen] = useState(true);
+  const [buildOpen, buildSetOpen] = useState(true);
+  const { width, height } = useWindowSize();
+
+  return !removed ? (
+    <div className={styles.AppAdmin}>
+      <button onClick={() => setOpen(!open)}>{open ? 'Close ' : 'Open '} Admin</button>
+      {open && (
+        <>
+          <section className={styles.adminSection}>
+            <h3 className={styles.adminSectionTitle} onClick={() => setRemoved(true)}>
+              Remove Admin from DOM
+            </h3>
+          </section>
+          <section className={classnames(styles.adminSection, { [styles.closed]: deviceOpen })}>
+            <h3 className={styles.adminSectionTitle} onClick={() => deviceSetOpen(!deviceOpen)}>
+              Device info
+            </h3>
+            {deviceOpen && (
+              <ul>
+                <li>
+                  {device.type} ({width} x {height})
+                </li>
+                <li>
+                  {os.name} {os.version}
+                </li>
+                <li>
+                  {browser.name} {browser.version}
+                </li>
+              </ul>
+            )}
+          </section>
+          <section className={classnames(styles.adminSection, { [styles.closed]: buildOpen })}>
+            <h3 className={styles.adminSectionTitle} onClick={() => buildSetOpen(!buildOpen)}>
+              Build info
+            </h3>
+            {buildOpen && (
+              <ul>
+                <li>
+                  {process.env.NEXT_PUBLIC_PR_NUMBER}.{process.env.NEXT_PUBLIC_COMMIT_COUNT}
+                </li>
+                <li>{process.env.NEXT_PUBLIC_COMMIT_ID?.slice(0, 6)}</li>
+                <li>{process.env.NEXT_PUBLIC_BUILD_TIME}</li>
+                {process.env.NEXT_PUBLIC_PULL_REQUEST && (
+                  <li>
+                    <a href={process.env.NEXT_PUBLIC_PULL_REQUEST} rel="noopener noreferrer" target="_blank">
+                      PR link
+                    </a>
+                  </li>
+                )}
+              </ul>
+            )}
+          </section>
+        </>
+      )}
+    </div>
+  ) : null;
+}
+
+export default memo(AppAdmin);

src/components/Layout/Layout.tsx

@@ -11,6 +11,7 @@ import { setPrevRoute, setIsWebpSupported, useAppDispatch } from '@/redux';
 import { checkWebpSupport } from '@/utils/basic-functions';
 import useCookieBanner from '@/utils/hooks/use-cookie-banner';
 
+const AppAdmin = dynamic(() => import('@/components/AppAdmin/AppAdmin'), { ssr: false });
 const RotateScreen = dynamic(() => import('@/components/RotateScreen/RotateScreen'), { ssr: false });
 
 export type Props = PropsWithChildren<{}>;
@@ -56,6 +57,10 @@ function Layout({ children }: Props) {
           onReject={rejectAllCookies}
         />
       )}
+
+      {(process.env.NEXT_PUBLIC_ENVIRONMENT !== 'production') && (
+        <AppAdmin />
+      )}
     </>
   );
 }