fix: add conditional rendering on optional property

apparently appGroupListData.createdBy can be undefined
devtron-labs · Feb 29, 2024 · 06a1e93 · 06a1e93
1 parent f330de6
commit 06a1e93
Showing 1 changed file with 21 additions and 20 deletions.
diff --git a/src/components/ApplicationGroup/Details/EnvironmentOverview/EnvironmentOverview.tsx b/src/components/ApplicationGroup/Details/EnvironmentOverview/EnvironmentOverview.tsx
@@ -184,16 +184,14 @@ export default function EnvironmentOverview({
         return (
             <div
                 key={`${item.application}-${index}`}
-                className={`app-deployments-info-row dc__w-fit-inherit display-grid dc__align-items-center ${
-                    isHovered === index ? 'bc-n50' : 'bcn-0'
-                } ${lastDeployedClassName}`}
+                className={`app-deployments-info-row dc__w-fit-inherit display-grid dc__align-items-center ${isHovered === index ? 'bc-n50' : 'bcn-0'
+                    } ${lastDeployedClassName}`}
                 onMouseEnter={() => setIsHovered(index)}
                 onMouseLeave={() => setIsHovered(null)}
             >
                 <div
-                    className={`pl-16 pr-16 app-deployment-info-row-leftsection h-100 dc__border-right-n1 dc__align-items-center display-grid dc__position-sticky sticky-column ${
-                        isHovered === index ? 'bc-n50' : 'bcn-0'
-                    }`}
+                    className={`pl-16 pr-16 app-deployment-info-row-leftsection h-100 dc__border-right-n1 dc__align-items-center display-grid dc__position-sticky sticky-column ${isHovered === index ? 'bc-n50' : 'bcn-0'
+                        }`}
                 >
                     {isHovered !== index && !isSelected ? (
                         <DevtronIcon className="icon-dim-20" />
@@ -264,6 +262,7 @@ export default function EnvironmentOverview({
     }
 
     const renderSideInfoColumn = () => {
+        if (!appGroupListData) return null
         return (
             <aside className="flexbox-col dc__gap-16">
                 <div className="flexbox-col dc__gap-12">
@@ -323,15 +322,18 @@ export default function EnvironmentOverview({
                     </div>
                     <div>
                         <div className="fs-13 fw-4 lh-20 cn-7 mb-4">Created by</div>
-                        <div className="fs-13 fw-6 lh-20 cn-9 dc__word-break flexbox flex-align-center dc__gap-8">
-                            <div
-                                className="icon-dim-20 mw-20 flexbox flex-justify-center flex-align-center dc__border-radius-50-per dc__uppercase cn-0 fw-4"
-                                style={{ backgroundColor: getRandomColor(appGroupListData.createdBy) }}
-                            >
-                                {appGroupListData.createdBy[0]}
-                            </div>
-                            {appGroupListData.createdBy}
-                        </div>
+                        {appGroupListData.createdBy
+                            ? (
+                                <div className="fs-13 fw-6 lh-20 cn-9 dc__word-break flexbox flex-align-center dc__gap-8">
+                                    <div
+                                        className="icon-dim-20 mw-20 flexbox flex-justify-center flex-align-center dc__border-radius-50-per dc__uppercase cn-0 fw-4"
+                                        style={{ backgroundColor: getRandomColor(appGroupListData.createdBy) }}
+                                    >
+                                        {appGroupListData.createdBy[0]}
+                                    </div>
+                                    {appGroupListData.createdBy}
+                                </div>
+                            ) : '-'}
                     </div>
                 </div>
             </aside>
@@ -380,13 +382,12 @@ export default function EnvironmentOverview({
                                         checked={selectedAppIds.length === appListData.appInfoList.length}
                                     />
                                     <span
-                                        className={`form__checkbox-container ${
-                                            selectedAppIds.length === appListData.appInfoList.length
+                                        className={`form__checkbox-container ${selectedAppIds.length === appListData.appInfoList.length
                                                 ? 'tick-icon'
                                                 : selectedAppIds.length > 0
-                                                  ? 'any-selected'
-                                                  : ''
-                                        }`}
+                                                    ? 'any-selected'
+                                                    : ''
+                                            }`}
                                     />
                                 </label>
                                 {!isVirtualEnv && <ActivityIcon className="icon-dim-16" />}