Refactor details content components

This commit updates the Details Content components by leveraging newer
TypeScript features and enhancing readability, including optional
chaining.

src/components/modules/EndpointModule/EndpointDetailsContent/EndpointDetailsContent.tsx

@@ -245,11 +245,10 @@ class EndpointDetailsContent extends React.Component<Props> {
   render() {
     this.renderedKeys = {};
     const {
-      // eslint-disable-next-line @typescript-eslint/naming-convention
       type,
       name,
       description,
-      created_at,
+      created_at: createdAt,
       id,
     } = this.props.item || {};
     const usage: TransferItem[] = this.props.usage.replicas.concat(
@@ -291,7 +290,7 @@ class EndpointDetailsContent extends React.Component<Props> {
           <Field>
             <Label>Created</Label>
             {this.renderValue(
-              DateUtils.getLocalTime(created_at).format("DD/MM/YYYY HH:mm")
+              DateUtils.getLocalTime(createdAt).format("DD/MM/YYYY HH:mm")
             )}
           </Field>
           <Field>

src/components/modules/ProjectModule/ProjectDetailsContent/ProjectDetailsContent.tsx

@@ -188,7 +188,7 @@ class ProjectDetailsContent extends React.Component<Props, State> {
     if (this.props.loading || !this.props.project) {
       return null;
     }
-    const project = this.props.project;
+    const { project } = this.props;
 
     return (
       <Info>

src/components/modules/TransferModule/MigrationDetailsContent/MigrationDetailsContent.tsx

@@ -109,11 +109,7 @@ class MigrationDetailsContent extends React.Component<Props> {
   }
 
   renderTasks() {
-    if (
-      this.props.page !== "tasks" ||
-      !this.props.item ||
-      !this.props.item.tasks
-    ) {
+    if (this.props.page !== "tasks" || !this.props.item?.tasks) {
       return null;
     }
 

src/components/modules/TransferModule/ReplicaDetailsContent/ReplicaDetailsContent.tsx

@@ -121,28 +121,23 @@ class ReplicaDetailsContent extends React.Component<Props, State> {
   };
 
   getLastExecution() {
-    return (
-      this.props.item &&
-      this.props.item.executions &&
-      this.props.item.executions.length &&
-      this.props.item.executions[this.props.item.executions.length - 1]
-    );
+    return this.props.item?.executions?.length
+      ? this.props.item.executions[this.props.item.executions.length - 1]
+      : null;
   }
 
   getStatus() {
-    const lastExecution = this.getLastExecution();
-    return lastExecution && lastExecution.status;
+    return this.getLastExecution()?.status;
   }
 
   isEndpointMissing() {
-    const originEndpoint = this.props.endpoints.find(
-      e => this.props.item && e.id === this.props.item.origin_endpoint_id
-    );
-    const targetEndpoint = this.props.endpoints.find(
-      e => this.props.item && e.id === this.props.item.destination_endpoint_id
+    return (
+      this.props.endpoints.filter(
+        e =>
+          e.id === this.props.item?.origin_endpoint_id ||
+          e.id === this.props.item?.destination_endpoint_id
+      ).length < 2
     );
-
-    return Boolean(!originEndpoint || !targetEndpoint);
   }
 
   handleTimezoneChange(timezone: TimezoneValue) {

src/components/modules/UserModule/UserDetailsContent/UserDetailsContent.tsx

@@ -151,7 +151,7 @@ class UserDetailsContent extends React.Component<Props> {
       return null;
     }
 
-    const user = this.props.user;
+    const { user } = this.props;
     const primaryProject = this.props.projects.find(
       p => user.project_id === p.id
     );