[AXON-411] Add FG for rich text editor (#405)

* [AXON-411] Add fg for rich text editor

* [AXON-411] update

* Clean-ups after changing the E2E framework

* AXON-301: Drop labs from extension title (#401)

* Drop labs from extension title

* Changelog

* Homepage change

* Revert "Clean-ups after changing the E2E framework"

This reverts commit d364d88.

* AXON-405: Remove FF for badges and banners (#407)

* Remove FF

* Improved switch for creating action on notifications
:wq

* Clean-ups after changing the E2E framework (#408)

* Upgraded ESLint and other npm packages + cleanups + improvements (#409)

* [AXON-411] fix FG implementation

* remove unneeded fg

---------

Co-authored-by: Marco Mura <[email protected]>
Co-authored-by: bwieger-atlassian-com <[email protected]>
Co-authored-by: Marco <[email protected]>

Author: 3 people

package.json

@@ -1390,4 +1390,4 @@
         "webpack-node-externals": "^3.0.0"
     },
     "packageManager": "[email protected]+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
-}
+}

src/util/featureFlags/features.ts

@@ -1,6 +1,7 @@
 export const enum Features {
     NoOpFeature = 'atlascode-noop',
     EnableErrorTelemetry = 'atlascode-send-error-telemetry',
+    JiraRichText = 'atlascode-jira-rte',
 }
 
 export const enum Experiments {

src/webviews/abstractWebview.ts

@@ -18,7 +18,10 @@ import { Container } from '../container';
 import { submitLegacyJSDPMF } from '../feedback/pmfJSDSubmitter';
 import { isAction, isAlertable, isPMFSubmitAction } from '../ipc/messaging';
 import { CommonActionType } from '../lib/ipc/fromUI/common';
+import { CommonMessageType } from '../lib/ipc/toUI/common';
 import { iconSet, Resources } from '../resources';
+import { Experiments, FeatureFlagClient, Features } from '../util/featureFlags';
+import { ExperimentGateValues, FeatureGateValues } from '../util/featureFlags/features';
 import { UIWebsocket } from '../ws';
 
 // ReactWebview is an interface that can be used to deal with webview objects when you don't know their generic typings.
@@ -133,6 +136,25 @@ export abstract class AbstractReactWebview implements ReactWebview {
             );
             this._panel.reveal(column ? column : ViewColumn.Active); // , false);
         }
+
+        this.fireFeatureGates([Features.JiraRichText]);
+        this.fireExperimentGates([]);
+    }
+
+    private fireFeatureGates(features: Features[]) {
+        if (features.length) {
+            const featureFlags = {} as FeatureGateValues;
+            features.forEach((x) => (featureFlags[x] = FeatureFlagClient.checkGate(x)));
+            this.postMessage({ type: CommonMessageType.UpdateFeatureFlags, featureFlags });
+        }
+    }
+
+    private fireExperimentGates(experiments: Experiments[]) {
+        if (experiments.length) {
+            const experimentValues = {} as ExperimentGateValues;
+            experiments.forEach((x) => (experimentValues[x] = FeatureFlagClient.checkExperimentValue(x)));
+            this.postMessage({ type: CommonMessageType.UpdateExperimentValues, experimentValues });
+        }
     }
 
     private onViewStateChanged(e: WebviewPanelOnDidChangeViewStateEvent) {

src/webviews/components/issue/AbstractIssueEditorPage.tsx

@@ -73,6 +73,7 @@ export interface CommonEditorViewState extends Message {
     showPMF: boolean;
     errorDetails: any;
     commentInputValue: string;
+    isRteEnabled: boolean;
 }
 
 export const emptyCommonEditorState: CommonEditorViewState = {
@@ -88,6 +89,7 @@ export const emptyCommonEditorState: CommonEditorViewState = {
     isErrorBannerOpen: false,
     errorDetails: undefined,
     commentInputValue: '',
+    isRteEnabled: false,
 };
 
 const shouldShowCreateOption = (inputValue: any, selectValue: any, selectOptions: any[]) => {
@@ -185,6 +187,10 @@ export abstract class AbstractIssueEditorPage<
                 this.setState({ showPMF: e.showPMF });
                 break;
             }
+            case 'updateFeatureFlags': {
+                this.setState({ isRteEnabled: e.featureFlags.rteEnabled });
+                break;
+            }
         }
 
         return handled;
@@ -493,6 +499,7 @@ export abstract class AbstractIssueEditorPage<
                                                     : `[~${user.name}]`,
                                             }))
                                         }
+                                        featureGateEnabled={this.state.isRteEnabled}
                                     />
                                 );
                             }

src/webviews/components/issue/common/JiraIssueTextArea.test.tsx

@@ -20,6 +20,7 @@ describe('JiraIssueTextAreaEditor', () => {
         onCancel: mockOnCancel,
         fetchUsers: mockFetchUsers,
         saving: false,
+        featureGateEnabled: true,
     };
 
     beforeAll(() => {

src/webviews/components/issue/common/JiraIssueTextArea.tsx

@@ -20,6 +20,7 @@ type Props = {
     onInternalCommentSave?: () => void;
     isDescription?: boolean;
     saving?: boolean;
+    featureGateEnabled?: boolean;
 };
 
 interface User {
@@ -39,6 +40,7 @@ const JiraIssueTextAreaEditor: React.FC<Props> = ({
     onInternalCommentSave,
     isDescription,
     saving,
+    featureGateEnabled = false,
 }) => {
     const inputTextAreaRef = React.useRef<HTMLTextAreaElement>(null);
     const [cursorPosition, setCursorPosition] = React.useState(value?.length || 0);
@@ -47,7 +49,7 @@ const JiraIssueTextAreaEditor: React.FC<Props> = ({
         appearance: 'subtle' as ButtonAppearance,
     };
 
-    const [rteEnabled, setRteEnabled] = React.useState(true);
+    const [rteEnabled, setRteEnabled] = React.useState(featureGateEnabled);
 
     const { viewHost, handleSave } = useEditor<User>({
         value,
@@ -149,9 +151,11 @@ const JiraIssueTextAreaEditor: React.FC<Props> = ({
                         />
                     )}
                 </div>
-                <Tooltip content="Toggle rich text editor" position="top">
-                    <Toggle label="rte toggle" defaultChecked onChange={(e) => setRteEnabled(e.target.checked)} />
-                </Tooltip>
+                {featureGateEnabled && (
+                    <Tooltip content="Toggle rich text editor" position="top">
+                        <Toggle label="rte toggle" defaultChecked onChange={(e) => setRteEnabled(e.target.checked)} />
+                    </Tooltip>
+                )}
             </div>
         </div>
     );

src/webviews/components/issue/create-issue-screen/CreateIssuePage.tsx

@@ -85,7 +85,10 @@ export default class CreateIssuePage extends AbstractIssueEditorPage<Emit, Accep
                     const issueData = e as CreateIssueData;
                     this.updateInternals(issueData);
                     this.setState(issueData, () => {
-                        this.setState({ isSomethingLoading: false, loadingField: '' });
+                        this.setState({
+                            isSomethingLoading: false,
+                            loadingField: '',
+                        });
                     });
 
                     break;

src/webviews/components/issue/view-issue-screen/JiraIssuePage.tsx

@@ -92,6 +92,7 @@ export default class JiraIssuePage extends AbstractIssueEditorPage<Emit, Accept,
                     });
                     break;
                 }
+
                 case 'epicChildrenUpdate': {
                     this.setState({ isSomethingLoading: false, loadingField: '', epicChildren: e.epicChildren });
                     break;
@@ -520,6 +521,7 @@ export default class JiraIssuePage extends AbstractIssueEditorPage<Emit, Accept,
                         }))
                     }
                     fetchImage={(img) => this.fetchImage(img)}
+                    isRteEnabled={this.state.isRteEnabled}
                 />
                 {this.advancedMain()}
                 {this.state.fields['comment'] && (
@@ -546,6 +548,7 @@ export default class JiraIssuePage extends AbstractIssueEditorPage<Emit, Accept,
                                 this.state.fieldValues['project'] &&
                                 this.state.fieldValues['project'].projectTypeKey === 'service_desk'
                             }
+                            isRteEnabled={this.state.isRteEnabled}
                         />
                     </div>
                 )}

src/webviews/components/issue/view-issue-screen/mainpanel/IssueCommentComponent.test.tsx

@@ -151,6 +151,7 @@ describe('IssueCommentComponent', () => {
                 fetchUsers={mockFetchUsers}
                 fetchImage={mockFetchImage}
                 onDelete={mockOnDelete}
+                isRteEnabled={true}
             />,
         );
 
@@ -195,6 +196,7 @@ describe('IssueCommentComponent', () => {
                 fetchUsers={mockFetchUsers}
                 fetchImage={mockFetchImage}
                 onDelete={mockOnDelete}
+                isRteEnabled={true}
             />,
         );
 

src/webviews/components/issue/view-issue-screen/mainpanel/IssueCommentComponent.tsx

@@ -25,6 +25,7 @@ type IssueCommentComponentProps = {
     fetchUsers: (input: string) => Promise<any[]>;
     fetchImage: (url: string) => Promise<string>;
     onDelete: (commentId: string) => void;
+    isRteEnabled?: boolean;
 };
 const CommentComponent: React.FC<{
     siteDetails: DetailedSiteInfo;
@@ -34,7 +35,17 @@ const CommentComponent: React.FC<{
     onDelete: (commentId: string) => void;
     fetchUsers: (input: string) => Promise<any[]>;
     isServiceDeskProject?: boolean;
-}> = ({ siteDetails, comment, onSave, fetchImage, onDelete, fetchUsers, isServiceDeskProject }) => {
+    isRteEnabled?: boolean;
+}> = ({
+    siteDetails,
+    comment,
+    onSave,
+    fetchImage,
+    onDelete,
+    fetchUsers,
+    isServiceDeskProject,
+    isRteEnabled = false,
+}) => {
     const [isEditing, setIsEditing] = React.useState(false);
     const [isSaving, setIsSaving] = React.useState(false);
     const bodyText = comment.renderedBody ? comment.renderedBody : comment.body;
@@ -105,6 +116,7 @@ const CommentComponent: React.FC<{
                                 setIsEditing(false);
                                 onSave(commentText, comment.id, JsdInternalCommentVisibility);
                             }}
+                            featureGateEnabled={isRteEnabled}
                         />
                     ) : (
                         <RenderedContent html={bodyText} fetchImage={fetchImage} />
@@ -124,7 +136,8 @@ const AddCommentComponent: React.FC<{
     user: User;
     onCreate: (t: string, restriction?: CommentVisibility) => void;
     isServiceDeskProject?: boolean;
-}> = ({ fetchUsers, user, onCreate, isServiceDeskProject }) => {
+    isRteEnabled?: boolean;
+}> = ({ fetchUsers, user, onCreate, isServiceDeskProject, isRteEnabled = false }) => {
     const [commentText, setCommentText] = React.useState('');
     const [isEditing, setIsEditing] = React.useState(false);
 
@@ -177,6 +190,7 @@ const AddCommentComponent: React.FC<{
                             setCommentText('');
                             setIsEditing(false);
                         }}
+                        featureGateEnabled={isRteEnabled}
                     />
                 )}
             </Box>
@@ -193,10 +207,16 @@ export const IssueCommentComponent: React.FC<IssueCommentComponentProps> = ({
     fetchUsers,
     fetchImage,
     onDelete,
+    isRteEnabled = false,
 }) => {
     return (
         <Box style={{ display: 'flex', flexDirection: 'column', paddingTop: '8px' }}>
-            <AddCommentComponent fetchUsers={fetchUsers} user={currentUser} onCreate={onCreate} />
+            <AddCommentComponent
+                fetchUsers={fetchUsers}
+                user={currentUser}
+                onCreate={onCreate}
+                isRteEnabled={isRteEnabled}
+            />
             {comments
                 .sort((a, b) => (a.created > b.created ? -1 : 1))
                 .map((comment: JiraComment) => (
@@ -209,6 +229,7 @@ export const IssueCommentComponent: React.FC<IssueCommentComponentProps> = ({
                         onDelete={onDelete}
                         fetchUsers={fetchUsers}
                         isServiceDeskProject={isServiceDeskProject}
+                        isRteEnabled={isRteEnabled}
                     />
                 ))}
         </Box>