Handle invalid tab IDs

Signed-off-by: Tyler Ohlsen <ohltyler@amazon.com>

public/pages/workflow_detail/workflow_detail.tsx

@@ -21,21 +21,18 @@ export interface WorkflowDetailRouterProps {
   workflowId: string;
 }
 
-export interface WorkflowDetailProps
+interface WorkflowDetailProps
   extends RouteComponentProps<WorkflowDetailRouterProps> {}
 
-export enum WORKFLOW_DETAILS_TAB {
+enum WORKFLOW_DETAILS_TAB {
   EDITOR = 'editor',
   LAUNCHES = 'launches',
   PROTOTYPE = 'prototype',
 }
 
-export const ACTIVE_TAB_PARAM = 'tab';
+const ACTIVE_TAB_PARAM = 'tab';
 
-export function replaceActiveTab(
-  activeTab: string,
-  props: WorkflowDetailProps
-) {
+function replaceActiveTab(activeTab: string, props: WorkflowDetailProps) {
   props.history.replace({
     ...history,
     search: queryString.stringify({
@@ -64,9 +61,12 @@ export function WorkflowDetail(props: WorkflowDetailProps) {
     tabFromUrl
   );
 
-  // Default to editor tab if there is none specified via url.
+  // Default to editor tab if there is none or invalid tab ID specified via url.
   useEffect(() => {
-    if (!selectedTabId) {
+    if (
+      !selectedTabId ||
+      !Object.values(WORKFLOW_DETAILS_TAB).includes(selectedTabId)
+    ) {
       setSelectedTabId(WORKFLOW_DETAILS_TAB.EDITOR);
       replaceActiveTab(WORKFLOW_DETAILS_TAB.EDITOR, props);
     }

public/pages/workflows/workflows.tsx

@@ -54,10 +54,13 @@ export function Workflows(props: WorkflowsProps) {
   ] as WORKFLOWS_TAB;
   const [selectedTabId, setSelectedTabId] = useState<WORKFLOWS_TAB>(tabFromUrl);
 
-  // If there is no selected tab, default to a tab depending on if user
-  // has existing created workflows or not.
+  // If there is no selected tab or invalid tab, default to a tab depending
+  // on if user has existing created workflows or not.
   useEffect(() => {
-    if (!selectedTabId) {
+    if (
+      !selectedTabId ||
+      !Object.values(WORKFLOWS_TAB).includes(selectedTabId)
+    ) {
       if (workflows?.length > 0) {
         setSelectedTabId(WORKFLOWS_TAB.MANAGE);
         replaceActiveTab(WORKFLOWS_TAB.MANAGE, props);