From c8896d9f5ff3708a4e2e3bb76a5a61e39ed7903d Mon Sep 17 00:00:00 2001
From: Bogdan <mynameisbogdan@users.noreply.github.com>
Date: Sat, 6 Jan 2024 23:06:02 +0200
Subject: [PATCH] Fixed: Loading series details when Quality Profile is invalid

---
 .../Quality/QualityProfileNameConnector.css      |  3 +++
 .../Quality/QualityProfileNameConnector.css.d.ts |  7 +++++++
 .../Quality/QualityProfileNameConnector.js       | 16 ++++++++++++----
 3 files changed, 22 insertions(+), 4 deletions(-)
 create mode 100644 frontend/src/Settings/Profiles/Quality/QualityProfileNameConnector.css
 create mode 100644 frontend/src/Settings/Profiles/Quality/QualityProfileNameConnector.css.d.ts

diff --git a/frontend/src/Settings/Profiles/Quality/QualityProfileNameConnector.css b/frontend/src/Settings/Profiles/Quality/QualityProfileNameConnector.css
new file mode 100644
index 000000000..684c97e9e
--- /dev/null
+++ b/frontend/src/Settings/Profiles/Quality/QualityProfileNameConnector.css
@@ -0,0 +1,3 @@
+.qualityProfileUnknown {
+  color: var(--dangerColor);
+}
diff --git a/frontend/src/Settings/Profiles/Quality/QualityProfileNameConnector.css.d.ts b/frontend/src/Settings/Profiles/Quality/QualityProfileNameConnector.css.d.ts
new file mode 100644
index 000000000..2b264e5ac
--- /dev/null
+++ b/frontend/src/Settings/Profiles/Quality/QualityProfileNameConnector.css.d.ts
@@ -0,0 +1,7 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'qualityProfileUnknown': string;
+}
+export const cssExports: CssExports;
+export default cssExports;
diff --git a/frontend/src/Settings/Profiles/Quality/QualityProfileNameConnector.js b/frontend/src/Settings/Profiles/Quality/QualityProfileNameConnector.js
index bf13815ff..41ad2cacd 100644
--- a/frontend/src/Settings/Profiles/Quality/QualityProfileNameConnector.js
+++ b/frontend/src/Settings/Profiles/Quality/QualityProfileNameConnector.js
@@ -3,22 +3,30 @@ import React from 'react';
 import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
 import createQualityProfileSelector from 'Store/Selectors/createQualityProfileSelector';
+import translate from 'Utilities/String/translate';
+import styles from './QualityProfileNameConnector.css';
 
 function createMapStateToProps() {
   return createSelector(
     createQualityProfileSelector(),
     (qualityProfile) => {
       return {
-        name: qualityProfile.name
+        name: qualityProfile?.name
       };
     }
   );
 }
 
-function QualityProfileNameConnector({ name, ...otherProps }) {
+function QualityProfileNameConnector({ name }) {
+  if (name) {
+    return (
+      <span>{name}</span>
+    );
+  }
+
   return (
-    <span>
-      {name}
+    <span className={styles.qualityProfileUnknown}>
+      {translate('None')}
     </span>
   );
 }