feat(1668): adopted sentry and ui improvmentments

- made select in tag to outside dom
- error state shown in empty tags

.env.example

@@ -9,4 +9,7 @@ REACT_APP_OPCBASE_KEYCLOAK_CLIENT_ID=
 REACT_APP_OPCBASE_KEYCLOAK_REALM=
 
 POUCH_DB_ADMIN_TOKEN=
-NODE_TLS_REJECT_UNAUTHORIZED=
+NODE_TLS_REJECT_UNAUTHORIZED=
+
+## SENTRY DSN
+# REACT_APP_SENTRY_DSN=

package.json

@@ -18,6 +18,7 @@
     "@patternfly/react-core": "^4.128.2",
     "@patternfly/react-icons": "^4.10.11",
     "@patternfly/react-styles": "^4.10.11",
+    "@sentry/react": "^6.15.0",
     "@testing-library/jest-dom": "^5.13.0",
     "@testing-library/react": "^11.2.7",
     "@testing-library/user-event": "^13.1.9",

src/index.tsx

@@ -1,12 +1,26 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
+import * as Sentry from '@sentry/react';
 import '@patternfly/react-core/dist/styles/base.css';
 import '@one-platform/opc-nav/dist/opc-nav';
 import '@one-platform/opc-menu-drawer/dist/opc-menu-drawer';
 import '@one-platform/opc-notification-drawer/dist/opc-notification-drawer';
 import '@one-platform/opc-feedback/dist/opc-feedback';
 
 import App from './App';
+import pkg from '../package.json';
+
+if (process.env.NODE_ENV === 'production') {
+  Sentry.init({
+    dsn: process.env.REACT_APP_SENTRY_DSN,
+    environment: 'production',
+    release: `idea-hub-spa@${pkg.version}`,
+    // Set tracesSampleRate to 1.0 to capture 100%
+    // of transactions for performance monitoring.
+    // We recommend adjusting this value in production
+    tracesSampleRate: 1.0,
+  });
+}
 
 ReactDOM.render(
   <React.StrictMode>

src/pages/HomePage/components/IdeaCreateUpdateContainer/IdeaCreateUpdateContainer.tsx

@@ -39,7 +39,7 @@ const IdeaFormValidator = yup.object({
   description: yup.string().trim().max(500).required(reqErrorMsg('Description')),
   tags: yup.array(
     yup.object({
-      name: yup.string().trim().required(reqErrorMsg('Tag Name')),
+      name: yup.string().trim().required(reqErrorMsg('Tag name')),
     })
   ),
 });
@@ -63,7 +63,7 @@ export const IdeaCreateUpdateContainer = ({
     handleSubmit,
     control,
     reset,
-    formState: { isSubmitting },
+    formState: { isSubmitting, errors: formErrors },
   } = useForm<CreateNewIdea>({ resolver: yupResolver(IdeaFormValidator) });
 
   const isUpdate = Boolean(updateDefaultValue?._rev);
@@ -93,6 +93,8 @@ export const IdeaCreateUpdateContainer = ({
     return;
   };
 
+  const tagsFormFieldError = formErrors?.tags?.find((tag) => Boolean(tag));
+
   return (
     <Form onSubmit={handleSubmit(onFormSubmit)}>
       <Stack hasGutter>
@@ -150,7 +152,12 @@ export const IdeaCreateUpdateContainer = ({
           />
         </StackItem>
         <StackItem>
-          <FormGroup fieldId="title" label=" Add some tags to your idea so others can find it:">
+          <FormGroup
+            fieldId="title"
+            label=" Add some tags to your idea so others can find it:"
+            helperTextInvalid={tagsFormFieldError?.name?.message}
+            validated={Boolean(tagsFormFieldError?.name?.message) ? 'error' : 'default'}
+          >
             <Select
               chipGroupProps={{
                 numChips: 3,
@@ -169,6 +176,7 @@ export const IdeaCreateUpdateContainer = ({
               loadingVariant={isLoading ? 'spinner' : undefined}
               aria-labelledby="tags for an idea"
               placeholderText="Select a tag"
+              menuAppendTo={() => document.body}
             >
               {(tags || []).map((tag) => (
                 <SelectOption value={tag} key={tag} />