refactor: migrate trivial components to TypeScript (#7231)

Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>

Author: kyle-ssg

frontend/web/components/ErrorMessage.js

@@ -0,0 +1,77 @@
+import React, { FC } from 'react'
+import Icon from './icons/Icon'
+import Button from './base/forms/Button'
+import Format from 'common/utils/format'
+import Constants from 'common/constants'
+
+type ErrorMessageProps = {
+  enabledButton?: boolean
+  error?: any
+  errorMessageClass?: string
+  errorStyles?: React.CSSProperties
+}
+
+const ErrorMessage: FC<ErrorMessageProps> = ({
+  enabledButton,
+  error: errorProp,
+  errorMessageClass,
+  errorStyles,
+}) => {
+  if (!errorProp) return null
+
+  const errorMessageClassName = `alert alert-danger ${
+    errorMessageClass || 'flex-1 align-items-center'
+  }`
+  const error =
+    errorProp?.data?.metadata?.find((item: Record<string, unknown>) =>
+      // eslint-disable-next-line no-prototype-builtins
+      item.hasOwnProperty('non_field_errors'),
+    )?.non_field_errors[0] ||
+    errorProp?.data ||
+    errorProp?.message ||
+    errorProp
+
+  return (
+    <div
+      className={errorMessageClassName}
+      style={{
+        display: errorMessageClass ? 'initial' : '',
+        ...errorStyles,
+      }}
+    >
+      <span className='icon-alert'>
+        <Icon name='close-circle' />
+      </span>
+      {error instanceof Error ? (
+        error.message
+      ) : typeof error === 'object' ? (
+        <div
+          dangerouslySetInnerHTML={{
+            __html: Object.keys(error)
+              .map(
+                (v) =>
+                  `${Format.camelCase(Format.enumeration.get(v))}: ${
+                    error[v]
+                  }`,
+              )
+              .join('<br/>'),
+          }}
+        />
+      ) : (
+        error
+      )}
+      {enabledButton && (
+        <Button
+          className='btn ml-3'
+          onClick={() => {
+            document.location.replace(Constants.getUpgradeUrl())
+          }}
+        >
+          Upgrade plan
+        </Button>
+      )}
+    </div>
+  )
+}
+
+export default ErrorMessage

frontend/web/components/ErrorMessage.tsx

@@ -1,9 +1,16 @@
-import React, { useEffect } from 'react'
-import PropTypes from 'prop-types'
+import React, { FC, useEffect } from 'react'
 import { close, checkmark } from 'ionicons/icons'
 import { IonIcon } from '@ionic/react'
 
-const PasswordRequirements = ({ onRequirementsMet, password }) => {
+type PasswordRequirementsProps = {
+  onRequirementsMet: (met: boolean) => void
+  password: string
+}
+
+const PasswordRequirements: FC<PasswordRequirementsProps> = ({
+  onRequirementsMet,
+  password,
+}) => {
   const requirements = [
     { label: 'At least 8 characters', test: password.length >= 8 },
     { label: 'Contains a number', test: /\d/.test(password) },
@@ -48,9 +55,4 @@ const PasswordRequirements = ({ onRequirementsMet, password }) => {
   )
 }
 
-PasswordRequirements.propTypes = {
-  onRequirementsMet: PropTypes.func.isRequired,
-  password: PropTypes.string.isRequired,
-}
-
 export default PasswordRequirements

…d/web/components/PasswordRequirements.js …/web/components/PasswordRequirements.tsxfrontend/web/components/PasswordRequirements.js renamed to frontend/web/components/PasswordRequirements.tsx frontend/web/components/PasswordRequirements.js renamed to frontend/web/components/PasswordRequirements.tsx

@@ -1,7 +1,4 @@
 import React from 'react'
-import classNames from 'classnames'
-import ReactMarkdown from 'react-markdown'
-import className = ReactMarkdown.propTypes.className
 
 interface RadioProps {
   label: string
@@ -20,7 +17,7 @@ const Radio: React.FC<RadioProps> = ({ checked, label, onChange }) => {
       className='position-relative cursor-pointer flex-row align-items-center'
     >
       {checked && <CheckedSVG />} {!checked && <UncheckedSVG />}
-      {<span className={classNames('ml-2', className)}>{label}</span>}
+      {<span className='ml-2'>{label}</span>}
     </label>
   )
 }

frontend/web/components/base/forms/Radio.tsx

@@ -0,0 +1,9 @@
+import React, { FC } from 'react'
+
+type ColumnProps = React.HTMLAttributes<HTMLDivElement>
+
+const Column: FC<ColumnProps> = ({ className, ...rest }) => (
+  <div {...rest} className={`${className || ''} flex-column`} />
+)
+
+export default Column

frontend/web/components/base/grid/Column.js

@@ -0,0 +1,9 @@
+import React, { FC } from 'react'
+
+type FlexProps = React.HTMLAttributes<HTMLDivElement>
+
+const Flex: FC<FlexProps> = ({ className, ...rest }) => (
+  <div {...rest} className={`${className || ''} flex flex-1`} />
+)
+
+export default Flex

frontend/web/components/base/grid/Column.tsx

@@ -0,0 +1,21 @@
+import React, { FC, useEffect } from 'react'
+import Constants from 'common/constants'
+
+const NotFoundErrorPage: FC = () => {
+  useEffect(() => {
+    API.trackPage(Constants.pages.COMING_SOON)
+  }, [])
+
+  return (
+    <div className='app-container container'>
+      <h3 className='pt-5'>Oops!</h3>
+      <p>
+        It looks like you do not have permission to view this{' '}
+        {Utils.fromParam().entity || 'page'}. Please contact a member with
+        administrator privileges.
+      </p>
+    </div>
+  )
+}
+
+export default NotFoundErrorPage