TCA-379 Follow-up & Misc Release 2022-09-01 -> prod

Jenkinsfile

@@ -12,7 +12,7 @@ if (!branchfilter.contains(env.BRANCH_NAME)) {
     return
 }
 
-// Define branch specific vars
+// Define dev-specific vars
 if (env.BRANCH_NAME == 'dev') {
     DEPLOY_ENV = 'DEV'
     LOGICAL_ENV = 'dev'
@@ -23,6 +23,7 @@ if (env.BRANCH_NAME == 'dev') {
     ENABLE_CACHE = false
 }
 
+// Define prod-specific vars
 if (env.BRANCH_NAME == 'prod') {
     DEPLOY_ENV = 'PROD'
     LOGICAL_ENV = 'prod'

client/i18n/locales/english/intro.json

@@ -67,7 +67,7 @@
     }
   },
   "2022/responsive-web-design": {
-    "title": "(New) Responsive Web Design",
+    "title": "Responsive Web Design",
     "intro": [
       "In this Responsive Web Design Certification, you'll learn the languages that developers use to build webpages: HTML (Hypertext Markup Language) for content, and CSS (Cascading Style Sheets) for design.",
       "First, you'll build a cat photo app to learn the basics of HTML and CSS. Later, you'll learn modern techniques like CSS variables by building a penguin, and best practices for accessibility by building a quiz site.",

client/package.json

@@ -96,6 +96,7 @@
     "react": "16.14.0",
     "react-dom": "16.14.0",
     "react-final-form": "6.5.9",
+    "react-gtm-module": "^2.0.11",
     "react-ga": "3.3.1",
     "react-helmet": "6.1.0",
     "react-hotkeys": "2.0.0",

client/src/analytics/google-tag-manater/GoogleTagManager.tsx

@@ -0,0 +1,29 @@
+import { FC } from 'react';
+import TagManager from 'react-gtm-module';
+
+import {
+  devTagManagerId,
+  prodTagManagerId
+} from '../../../../config/analytics-settings';
+
+import envData from '../../../../config/env.json';
+
+/* eslint-disable @typescript-eslint/ban-types */
+const GoogleTagManager: FC<{}> = () => {
+  // if we  have an ID
+  // then tags are supported in this environment,
+  // so initialize them
+  const segmentId =
+    envData.deploymentEnv === 'staging' ? devTagManagerId : prodTagManagerId;
+  if (segmentId) {
+    /* eslint-disable @typescript-eslint/no-unsafe-member-access */
+    /* eslint-disable @typescript-eslint/no-unsafe-call */
+    TagManager.initialize({
+      gtmId: segmentId
+    });
+  }
+
+  return null;
+};
+
+export default GoogleTagManager;

client/src/analytics/google-tag-manater/index.ts

@@ -0,0 +1 @@
+export { default as GoogleTagManager } from './GoogleTagManager';

client/src/analytics/segment/Segment.tsx

@@ -0,0 +1,31 @@
+import { FC } from 'react';
+
+import {
+  devSegmentId,
+  prodSegmentId
+} from '../../../../config/analytics-settings';
+import envData from '../../../../config/env.json';
+import segment from './segment-snippet';
+
+interface SegmentModel {
+  load: (id: string) => void;
+  page: () => void;
+}
+
+const segmentModel: SegmentModel = segment as unknown as SegmentModel;
+
+/* eslint-disable @typescript-eslint/ban-types */
+const Segment: FC<{}> = () => {
+  // if we have a key for this environment, load it
+  const segmentId = (
+    envData.deploymentEnv === 'staging' ? devSegmentId : prodSegmentId
+  ) as string;
+  if (segmentId) {
+    segmentModel.load(segmentId);
+    segmentModel.page();
+  }
+
+  return null;
+};
+
+export default Segment;

client/src/analytics/segment/index.ts

@@ -0,0 +1 @@
+export { default as Segment } from './Segment';

client/src/analytics/segment/segment-snippet.js

@@ -0,0 +1,65 @@
+function SegmentSnippet() {
+  var analytics = [];
+
+  if (analytics.initialize) {
+    return;
+  }
+  if (analytics.invoked) {
+    window.console &&
+      console.error &&
+      console.error('Segment snippet included twice.');
+    return;
+  }
+  analytics.invoked = !0;
+  analytics.methods = [
+    'trackSubmit',
+    'trackClick',
+    'trackLink',
+    'trackForm',
+    'pageview',
+    'identify',
+    'reset',
+    'group',
+    'track',
+    'ready',
+    'alias',
+    'debug',
+    'page',
+    'once',
+    'off',
+    'on',
+    'addSourceMiddleware',
+    'addIntegrationMiddleware',
+    'setAnonymousId',
+    'addDestinationMiddleware'
+  ];
+  analytics.factory = function (t) {
+    return function () {
+      var e = Array.prototype.slice.call(arguments);
+      e.unshift(t);
+      analytics.push(e);
+      return analytics;
+    };
+  };
+  for (var t = 0; t < analytics.methods.length; t++) {
+    var e = analytics.methods[t];
+    analytics[e] = analytics.factory(e);
+  }
+  analytics.load = function (t, e) {
+    var n = document.createElement('script');
+    n.type = 'text/javascript';
+    n.async = !0;
+    n.src =
+      'https://cdn.segment.com/analytics.js/v1/' + t + '/analytics.min.js';
+    var a = document.getElementsByTagName('script')[0];
+    a.parentNode.insertBefore(n, a);
+    analytics._loadOptions = e;
+  };
+  analytics.SNIPPET_VERSION = '4.1.0';
+  // analytics.load("SEGMENT_ANALYTICS_KEY"); - don't load here and let the component decide to load or not
+  // analytics.page(); - don't call the page, each app should call it when it loads a page by itself
+
+  return { ...analytics };
+}
+
+export default SegmentSnippet();

client/src/components/OfflineWarning/offline-warning.tsx

@@ -29,7 +29,7 @@ function OfflineWarning({
       t('misc.offline')
     ) : (
       <Trans i18nKey='misc.server-offline'>
-        <a href={'mailto:support@freecodecamp.org'}>placeholder</a>
+        <a href={'mailto:support@topcoder.com'}>placeholder</a>
       </Trans>
     );
     timeout();

client/src/components/formHelpers/block-save-button.tsx

@@ -5,7 +5,7 @@ import { useTranslation } from 'react-i18next';
 function BlockSaveButton(props?: Record<string, unknown>): JSX.Element {
   const { t } = useTranslation();
   return (
-    <Button block={true} bsStyle='primary' {...props} type='submit'>
+    <Button bsStyle='primary' {...props} type='submit'>
       {props?.children || t('buttons.save')}
     </Button>
   );

client/src/components/formHelpers/form-fields.tsx

@@ -1,6 +1,5 @@
 import {
   Alert,
-  Col,
   ControlLabel,
   FormControl,
   FormGroup,
@@ -72,7 +71,7 @@ function FormFields(props: FormFieldsProps): JSX.Element {
     ) : null;
   };
   return (
-    <div>
+    <>
       {formFields
         .filter(formField => !ignored.includes(formField.name))
         .map(({ name, label }) => (
@@ -85,35 +84,33 @@ function FormFields(props: FormFieldsProps): JSX.Element {
                 name in placeholders ? placeholders[name] : '';
               const isURL = types[name] === 'url';
               return (
-                <Col key={key} xs={12}>
-                  <FormGroup>
-                    {type === 'hidden' ? null : (
-                      <ControlLabel htmlFor={key}>{label}</ControlLabel>
-                    )}
-                    <FormControl
-                      componentClass={type === 'textarea' ? type : 'input'}
-                      id={key}
-                      name={name}
-                      onChange={onChange}
-                      placeholder={placeholder}
-                      required={required.includes(name)}
-                      rows={4}
-                      type={type}
-                      value={value as string}
-                    />
-                    {nullOrWarning(
-                      value as string,
-                      !pristine && error,
-                      isURL,
-                      name
-                    )}
-                  </FormGroup>
-                </Col>
+                <FormGroup key={key} className='embedded'>
+                  {type === 'hidden' ? null : (
+                    <ControlLabel htmlFor={key}>{label}</ControlLabel>
+                  )}
+                  <FormControl
+                    componentClass={type === 'textarea' ? type : 'input'}
+                    id={key}
+                    name={name}
+                    onChange={onChange}
+                    placeholder={placeholder}
+                    required={required.includes(name)}
+                    rows={4}
+                    type={type}
+                    value={value as string}
+                  />
+                  {nullOrWarning(
+                    value as string,
+                    !pristine && error,
+                    isURL,
+                    name
+                  )}
+                </FormGroup>
               );
             }}
           </Field>
         ))}
-    </div>
+    </>
   );
 }
 

client/src/components/formHelpers/form.tsx

@@ -6,7 +6,6 @@ import {
   ValidatedValues,
   FormFields,
   BlockSaveButton,
-  BlockSaveWrapper,
   formatUrlValues
 } from '../formHelpers/index';
 
@@ -54,15 +53,13 @@ function DynamicForm({
           style={{ width: '100%' }}
         >
           <FormFields formFields={formFields} options={options} />
-          <BlockSaveWrapper>
-            {hideButton ? null : (
-              <BlockSaveButton
-                disabled={(pristine && !enableSubmit) || (error as boolean)}
-              >
-                {buttonText ? buttonText : null}
-              </BlockSaveButton>
-            )}
-          </BlockSaveWrapper>
+          {!hideButton && (
+            <BlockSaveButton
+              disabled={(pristine && !enableSubmit) || (error as boolean)}
+            >
+              {buttonText ? buttonText : null}
+            </BlockSaveButton>
+          )}
         </form>
       )}
     </Form>

client/src/components/layouts/global.css

@@ -491,13 +491,43 @@ fieldset[disabled] .btn-primary.focus {
   }
 }
 
-.button-group .btn:not(:last-child) {
+.button-group {
+  margin-bottom: -10px;
+}
+.button-group .btn {
   margin-bottom: 10px;
 }
 strong {
   color: var(--secondary-color);
 }
 
+.form-group.embedded {
+  border: 1px solid var(--tc-black-40);
+  padding: 8px 10px 2px;
+  border-radius: 4px;
+  position: relative;
+  max-width: 320px;
+}
+
+.form-group.embedded .control-label {
+  display: block;
+  font-size: 11px;
+  font-family: 'Roboto';
+  line-height: 10px;
+  color: var(--tc-turq-160);
+  margin-bottom: 4px;
+}
+
+.form-group.embedded .form-control {
+  border: 0 none;
+  padding: 0;
+  height: 22px;
+  font-size: 14px;
+  line-height: 22px;
+  font-family: 'Roboto';
+  color: var(--tc-black-100);
+}
+
 .form-control {
   color: var(--primary-color);
   outline: none;

client/src/components/layouts/learn.css

@@ -24,3 +24,7 @@
 #learn-app-wrapper .reflex-container.horizontal > .reflex-splitter {
   height: 5px;
 }
+
+#learn-app-wrapper .reflex-container > .reflex-element:first-child:last-child {
+  flex: 1 1 auto !important;
+}

client/src/components/layouts/prism-night.css

@@ -6,7 +6,8 @@
  */
 
 .dark-palette code[class*='language-'],
-.dark-palette pre[class*='language-'] {
+.dark-palette code[class*='language-'],
+pre[class*='language-'].dark-palette {
   color: var(--secondary-color);
   font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
   font-size: 1em;
@@ -28,11 +29,13 @@
   text-shadow: none;
 }
 
+pre[class*='language-'].dark-palette code[class*='language-'],
 .dark-palette pre[class*='language-'] code[class*='language-'] {
   color: var(--quaternary-color);
 }
 
 /* Code blocks */
+pre[class*='language-'].dark-palette,
 .dark-palette pre[class*='language-'] {
   padding: 1em;
   margin: 0.5em 0;
@@ -47,12 +50,15 @@ padding in night mode */
 }
 
 .dark-palette :not(pre) > code[class*='language-'],
+pre[class*='language-'].dark-palette,
 .dark-palette pre[class*='language-'] {
   background: var(--primary-background);
 }
 
 .dark-palette pre[class*='language-']::selection,
+pre[class*='language-'].dark-palette::selection,
 .dark-palette pre[class*='language-'] ::selection,
+pre[class*='language-'].dark-palette ::selection,
 .dark-palette code[class*='language-']::selection,
 .dark-palette code[class*='language-'] ::selection {
   background: var(--selection-color);