Merge branch 'main' into AXON-804-onboarding-experiment-clean-up

Author: cabella-dot

CHANGELOG.md

@@ -2,6 +2,14 @@
 
 ---
 
+## What's new in 3.8.9
+
+### Features
+
+### Bug Fixes
+
+- Fixed a bug where Jira site icon is broken in create Jira issue page
+
 ## What's new in 3.8.8
 
 ### Features

package-lock.json

@@ -1366,9 +1366,9 @@
         "@atlaskit/toggle": "^14.2.0",
         "@atlaskit/tooltip": "^19.2.0",
         "@atlaskit/width-detector": "^4.4.0",
-        "@atlassianlabs/guipi-core-components": "^0.1.2",
-        "@atlassianlabs/guipi-core-controller": "^0.1.2",
-        "@atlassianlabs/guipi-jira-components": "^0.1.2",
+        "@atlassianlabs/guipi-core-components": "^1.0.2",
+        "@atlassianlabs/guipi-core-controller": "^1.0.2",
+        "@atlassianlabs/guipi-jira-components": "^1.0.2",
         "@atlassianlabs/jira-metaui-client": "^1.3.0",
         "@atlassianlabs/jira-metaui-transformer": "^1.3.0",
         "@atlassianlabs/jira-pi-client": "^1.3.0",

package.json

@@ -44,23 +44,62 @@ const emptyState: ViewState = {
     formKey: v4(),
 };
 
-const IconOption = (props: any) => (
-    <components.Option {...props}>
-        <div ref={props.innerRef} {...props.innerProps} style={{ display: 'flex', alignItems: 'center' }}>
-            <img src={props.data.avatarUrl} width="24" height="24" alt={props.data.name || 'Avatar'} />
-            <span style={{ marginLeft: '10px' }}>{props.data.name}</span>
-        </div>
-    </components.Option>
-);
-
-const IconValue = (props: any) => (
-    <components.SingleValue {...props}>
-        <div style={{ display: 'flex', alignItems: 'center' }}>
-            <img src={props.data.avatarUrl} width="16" height="16" alt={props.data.name || 'Avatar'} />
-            <span style={{ marginLeft: '10px' }}>{props.data.name}</span>
-        </div>
-    </components.SingleValue>
-);
+const getFaviconUrl = (siteData: any): string | null => {
+    if (siteData?.baseLinkUrl) {
+        return `${siteData.baseLinkUrl}/favicon.ico`;
+    } else if (siteData?.host) {
+        return `https://${siteData.host}/favicon.ico`;
+    }
+    return null;
+};
+
+const IconOption = (props: any) => {
+    const fallbackImg = 'images/jira-icon.svg';
+    const avatarUrl = getFaviconUrl(props.data) || fallbackImg;
+
+    return (
+        <components.Option {...props}>
+            <div ref={props.innerRef} {...props.innerProps} style={{ display: 'flex', alignItems: 'center' }}>
+                <img
+                    src={avatarUrl}
+                    width="24"
+                    height="24"
+                    alt={props.data?.name || 'Avatar'}
+                    onError={(e) => {
+                        if (e.currentTarget.src !== fallbackImg) {
+                            e.currentTarget.src = fallbackImg;
+                        }
+                    }}
+                />
+                <span style={{ marginLeft: '10px' }}>{props.data?.name}</span>
+            </div>
+        </components.Option>
+    );
+};
+
+const IconValue = (props: any) => {
+    const fallbackImg = 'images/jira-icon.svg';
+    const avatarUrl = getFaviconUrl(props.data) || fallbackImg;
+
+    return (
+        <components.SingleValue {...props}>
+            <div style={{ display: 'flex', alignItems: 'center' }}>
+                <img
+                    src={avatarUrl}
+                    width="16"
+                    height="16"
+                    alt={props.data?.name || 'Avatar'}
+                    onError={(e) => {
+                        if (e.currentTarget.src !== fallbackImg) {
+                            e.currentTarget.src = fallbackImg;
+                        }
+                    }}
+                />
+                <span style={{ marginLeft: '10px' }}>{props.data?.name}</span>
+            </div>
+        </components.SingleValue>
+    );
+};
 
 export default class CreateIssuePage extends AbstractIssueEditorPage<Emit, Accept, {}, ViewState> {
     private advancedFields: FieldUI[] = [];