fix: conditional check for optional property

edit renderSideInfoColumn in EnvironmentOverview.tsx
devtron-labs · Mar 1, 2024 · 3a5939f · 3a5939f
1 parent 8d27d9f
commit 3a5939f
Showing 1 changed file with 12 additions and 9 deletions.
diff --git a/src/components/ApplicationGroup/Details/EnvironmentOverview/EnvironmentOverview.tsx b/src/components/ApplicationGroup/Details/EnvironmentOverview/EnvironmentOverview.tsx
@@ -323,15 +323,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>