ENG 3056 Cannot delete resource when no workflow is using it

src/ui/common/src/components/pages/resource/id/index.tsx

@@ -25,7 +25,6 @@ import { OperatorResponse } from '../../../../handlers/responses/node';
 import { handleFetchAllWorkflowSummaries } from '../../../../reducers/listWorkflowSummaries';
 import {
   handleListResourceObjects,
-  handleLoadResourceOperators,
   handleTestConnectResource,
   resetEditStatus,
   resetTestConnectStatus,
@@ -38,7 +37,6 @@ import {
   isNotificationResource,
   ResourceCategories,
   resourceExecState,
-  SupportedResources,
 } from '../../../../utils/resources';
 import ExecutionStatus, {
   isFailed,
@@ -107,18 +105,13 @@ const ResourceDetailsPage: React.FC<ResourceDetailsPageProps> = ({
   );
 
   const selectedResource = resources[resourceId];
+  const resourceClass = SupportedResources[selectedResource?.service];
 
   // Using the ListResourcesRoute.
   // ENG-1036: We should create a route where we can pass in the resourceId and get the associated metadata and switch to using that.
   useEffect(() => {
     dispatch(handleLoadResources({ apiKey: user.apiKey }));
     dispatch(handleFetchAllWorkflowSummaries({ apiKey: user.apiKey }));
-    dispatch(
-      handleLoadResourceOperators({
-        apiKey: user.apiKey,
-        resourceId: resourceId,
-      })
-    );
   }, [dispatch, resourceId, user.apiKey]);
 
   useEffect(() => {
@@ -176,11 +169,7 @@ const ResourceDetailsPage: React.FC<ResourceDetailsPageProps> = ({
     resourceId: resourceId,
   });
 
-  const {
-    data: resourceOperators,
-    error: testOpsErr,
-    isLoading: testOpsIsLoading,
-  } = useResourceOperatorsGetQuery({
+  const { data: resourceOperators } = useResourceOperatorsGetQuery({
     apiKey: user.apiKey,
     resourceId: resourceId,
   });
@@ -212,7 +201,7 @@ const ResourceDetailsPage: React.FC<ResourceDetailsPageProps> = ({
     });
   }
 
-  if (fetchWorkflowsIsLoading) {
+  if (fetchWorkflowsIsLoading || !selectedResource || !resourceClass) {
     return null;
   }
 
@@ -229,7 +218,6 @@ const ResourceDetailsPage: React.FC<ResourceDetailsPageProps> = ({
   }
 
   const selectedResourceExecState = resourceExecState(selectedResource);
-
   return (
     <Layout
       breadcrumbs={[
@@ -423,6 +411,8 @@ const ResourceDetailsPage: React.FC<ResourceDetailsPageProps> = ({
             dispatch(resetEditStatus());
           }}
           resourceToEdit={selectedResource}
+          dialogContent={resourceClass.dialog}
+          validationSchema={resourceClass.validationSchema(!!selectedResource)}
         />
       )}
 

src/ui/common/src/components/pages/workflow/id/index.tsx

@@ -107,7 +107,7 @@ const WorkflowPage: React.FC<WorkflowPageProps> = ({
   const [showRunWorkflowDialog, setShowRunWorkflowDialog] = useState(false);
 
   const [
-    _,
+    {},
     {
       isSuccess: editWorkflowSuccess,
       error: editWorkflowError,

src/ui/common/src/components/pages/workflows/components/MetricItem.tsx

@@ -23,7 +23,6 @@ const showMoreStyles = {
 
 export const ShowMore: React.FC<ShowMoreProps> = ({
   totalItems,
-  numPreviewItems,
   expanded,
   onClick,
 }) => {

src/ui/common/src/components/pages/workflows/index.tsx

@@ -1,14 +1,12 @@
 import { Link, Typography } from '@mui/material';
 import Box from '@mui/material/Box';
 import React, { useEffect } from 'react';
-import { useDispatch } from 'react-redux';
 
 import {
   useDagGetQuery,
   useDagResultsGetQuery,
   useWorkflowsGetQuery,
 } from '../../../handlers/AqueductApi';
-import { AppDispatch } from '../../../stores/store';
 import UserProfile from '../../../utils/auth';
 import getPathPrefix from '../../../utils/getPathPrefix';
 import ExecutionStatus from '../../../utils/shared';
@@ -32,19 +30,14 @@ type Props = {
 };
 
 const WorkflowsPage: React.FC<Props> = ({ user, Layout = DefaultLayout }) => {
-  const dispatch: AppDispatch = useDispatch();
-
   useEffect(() => {
     document.title = 'Workflows | Aqueduct';
   }, []);
 
-  const {
-    data: workflowData,
-    error: workflowError,
-    isLoading: workflowLoading,
-  } = useWorkflowsGetQuery({
-    apiKey: user.apiKey,
-  });
+  const { data: workflowData, isLoading: workflowLoading } =
+    useWorkflowsGetQuery({
+      apiKey: user.apiKey,
+    });
 
   // If we are still loading the workflows, don't return a page at all.
   // Otherwise, we briefly return a page saying there are no workflows before

src/ui/common/src/components/resources/addResources.tsx

@@ -78,7 +78,6 @@ interface AddResourceListItemProps {
   handleSuccessToastClose: () => void;
   setShowSuccessToast: React.Dispatch<React.SetStateAction<Service>>;
   setShowMigrationDialog: React.Dispatch<React.SetStateAction<boolean>>;
-  dialog: React.FC;
 }
 
 const AddResourceListItem: React.FC<AddResourceListItemProps> = ({
@@ -90,7 +89,6 @@ const AddResourceListItem: React.FC<AddResourceListItemProps> = ({
   handleSuccessToastClose,
   showSuccessToast,
   setShowSuccessToast,
-  dialog,
 }) => {
   const dispatch: AppDispatch = useDispatch();
   const service = svc as Service;
@@ -176,7 +174,7 @@ const AddResourceListItem: React.FC<AddResourceListItemProps> = ({
         {iconWrapper}
         {showDialog && (
           <ResourceDialog
-            validationSchema={resource.validationSchema}
+            validationSchema={resource.validationSchema(false)}
             dialogContent={resource.dialog}
             user={user}
             service={service}

src/ui/common/src/components/resources/cards/resourceFieldsDetailsCard.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import { Resource } from 'src/utils/resources';
 
+import { Resource } from '../../../utils/resources';
 import { AirflowCard } from './airflowCard';
 import { AqueductCard } from './aqueductCard';
 import { AthenaCard } from './athenaCard';

src/ui/common/src/components/resources/dialogs/airflowDialog.tsx

@@ -6,6 +6,7 @@ import * as Yup from 'yup';
 import { AirflowConfig, ResourceDialogProps } from '../../../utils/resources';
 import { readOnlyFieldDisableReason, readOnlyFieldWarning } from './constants';
 import { ResourceTextInputField } from './ResourceTextInputField';
+import { requiredAtCreate } from './schema';
 
 const Placeholders: AirflowConfig = {
   host: 'http://localhost/api/v1',
@@ -15,13 +16,21 @@ const Placeholders: AirflowConfig = {
   s3_credentials_profile: 'default',
 };
 
-export const AirflowDialog: React.FC<ResourceDialogProps> = ({
-  editMode = false,
+export const AirflowDialog: React.FC<ResourceDialogProps<AirflowConfig>> = ({
+  resourceToEdit,
 }) => {
   const { register, setValue } = useFormContext();
   // we need two different values so we can strip the protocol from the host
   register('host');
 
+  if (resourceToEdit) {
+    Object.entries(resourceToEdit).forEach(([k, v]) => {
+      register(k, { value: v });
+    });
+  }
+
+  const editMode = !!resourceToEdit;
+
   return (
     <Box sx={{ mt: 2 }}>
       <ResourceTextInputField
@@ -97,13 +106,19 @@ export const AirflowDialog: React.FC<ResourceDialogProps> = ({
   );
 };
 
-export function getAirflowValidationSchema() {
+export function getAirflowValidationSchema(editMode: boolean) {
   const validationSchema = Yup.object().shape({
     name: Yup.string().required('Please enter a name.'),
     host: Yup.string().required('Please enter a host url.'),
     username: Yup.string().required('Please enter a username'),
-    password: Yup.string().required('Please enter a password.'),
-    s3_credentials_path: Yup.string().required(
+    password: requiredAtCreate(
+      Yup.string(),
+      editMode,
+      'Please enter a password.'
+    ),
+    s3_credentials_path: requiredAtCreate(
+      Yup.string(),
+      editMode,
       'Please enter an S3 credentials path.'
     ),
     s3_credentials_profile: Yup.string(),

src/ui/common/src/components/resources/dialogs/athenaDialog.tsx

@@ -14,6 +14,7 @@ import { readCredentialsFile } from './bigqueryDialog';
 import { readOnlyFieldDisableReason, readOnlyFieldWarning } from './constants';
 import { ResourceFileUploadField } from './ResourceFileUploadField';
 import { ResourceTextInputField } from './ResourceTextInputField';
+import { requiredAtCreate } from './schema';
 
 enum AWSCredentialType {
   AccessKey = 'access_key',
@@ -33,15 +34,27 @@ const Placeholders: AthenaConfig = {
   output_location: 's3://bucket/path/to/folder/',
 };
 
-export const AthenaDialog: React.FC<ResourceDialogProps> = ({
-  editMode = false,
+export const AthenaDialog: React.FC<ResourceDialogProps<AthenaConfig>> = ({
+  resourceToEdit,
 }) => {
+  const initialAccessKeyType = resourceToEdit?.config_file_path
+    ? AWSCredentialType.ConfigFilePath
+    : resourceToEdit?.config_file_content
+    ? AWSCredentialType.ConfigFileContent
+    : AWSCredentialType.AccessKey;
   const [fileData, setFileData] = useState<FileData | null>(null);
   // Need state variable to change tabs, as the formContext doesn't change as readily.
-  const [currentTab, setCurrentTab] = useState(AWSCredentialType.AccessKey);
+  const [currentTab, setCurrentTab] = useState(initialAccessKeyType);
   const { setValue, register } = useFormContext();
+  if (resourceToEdit) {
+    Object.entries(resourceToEdit).forEach(([k, v]) => {
+      register(k, { value: v });
+    });
+  }
 
-  register('type', { value: currentTab, required: true });
+  const editMode = !!resourceToEdit;
+
+  register('type', { value: initialAccessKeyType, required: true });
 
   const setFile = (fileData: FileData | null) => {
     // Update the react-hook-form value
@@ -225,18 +238,26 @@ export const AthenaDialog: React.FC<ResourceDialogProps> = ({
 // When using credentials file, also need:
 // - file path and file content
 // - config_file_profile
-export function getAthenaValidationSchema() {
+export function getAthenaValidationSchema(editMode: boolean) {
   return Yup.object().shape({
     type: Yup.string().required('Please select a credential type'),
     database: Yup.string().required('Please enter a database name'),
     output_location: Yup.string().required('Please enter an output location'),
     access_key_id: Yup.string().when('type', {
       is: 'access_key',
-      then: Yup.string().required('Please enter an access key id'),
+      then: requiredAtCreate(
+        Yup.string(),
+        editMode,
+        'Please enter an access key id'
+      ),
     }),
     secret_access_key: Yup.string().when('type', {
       is: 'access_key',
-      then: Yup.string().required('Please enter a secret access key'),
+      then: requiredAtCreate(
+        Yup.string(),
+        editMode,
+        'Please enter a secret access key'
+      ),
     }),
     region: Yup.string().when('type', {
       is: 'access_key',
@@ -248,11 +269,15 @@ export function getAthenaValidationSchema() {
     }),
     config_file_path: Yup.string().when('type', {
       is: 'config_file_path',
-      then: Yup.string().required('Please enter a config'),
+      then: requiredAtCreate(Yup.string(), editMode, 'Please enter a config'),
     }),
     config_file_content: Yup.string().when('type', {
       is: 'config_file_content',
-      then: Yup.string().required('Please upload a config file.'),
+      then: requiredAtCreate(
+        Yup.string(),
+        editMode,
+        'Please upload a config file.'
+      ),
     }),
   });
 }