fix: Attempt a third merge of the reverted PR

package.json

@@ -75,8 +75,8 @@
         "devcompile:extension": "webpack --mode development --config webpack.extension.dev.js",
         "release:stable": "scripts/release.sh",
         "watch": "concurrently -r \"npm:watch:*\"",
-        "watch:extension": "WATCH=true webpack --mode development --config webpack.react.dev.js --progress --watch",
-        "watch:react": "WATCH=true webpack --mode development --config webpack.extension.dev.js --progress --watch",
+        "watch:react": "WATCH=true webpack --mode development --config webpack.react.dev.js --progress --watch",
+        "watch:extension": "WATCH=true webpack --mode development --config webpack.extension.dev.js --progress --watch",
         "dev": "concurrently -r npm:watch:extension npm:watch:react",
         "mui:atlascodeSettings:dark": "cross-env PAGETSX=\"config/ConfigPage.tsx\" VIEW=\"atlascodeSettingsV2\" THEME=\"dark\" webpack-dev-server --open --config webpack.mui.webview.js",
         "mui:atlascodeSettings:light": "cross-env PAGETSX=\"config/ConfigPage.tsx\" VIEW=\"atlascodeSettingsV2\" THEME=\"light\" webpack-dev-server --open --config webpack.mui.webview.js",
@@ -1461,38 +1461,42 @@
         }
     },
     "dependencies": {
-        "@atlaskit/analytics-next": "^8.3.0",
-        "@atlaskit/avatar": "^20.5.1",
-        "@atlaskit/avatar-group": "^8.5.4",
-        "@atlaskit/breadcrumbs": "^11.5.0",
-        "@atlaskit/button": "^16.1.3",
-        "@atlaskit/checkbox": "^12.3.4",
-        "@atlaskit/comment": "^10.3.0",
-        "@atlaskit/datetime-picker": "^11.1.1",
+        "@atlaskit/analytics-next": "^10.3.1",
+        "@atlaskit/avatar": "^21.18.4",
+        "@atlaskit/avatar-group": "^11.2.0",
+        "@atlaskit/breadcrumbs": "^14.2.0",
+        "@atlaskit/button": "^20.5.3",
+        "@atlaskit/checkbox": "^15.4.0",
+        "@atlaskit/comment": "^12.2.0",
+        "@atlaskit/datetime-picker": "^15.13.1",
         "@atlaskit/dropdown-menu": "^12.26.5",
+        "@atlaskit/empty-state": "^8.3.0",
         "@atlaskit/feature-gate-js-client": "^4.20.0",
         "@atlaskit/form": "^11.2.0",
         "@atlaskit/heading": "^4.3.1",
-        "@atlaskit/icon": "^21.9.3",
+        "@atlaskit/icon": "^23.11.0",
         "@atlaskit/icon-lab": "^2.8.0",
-        "@atlaskit/inline-dialog": "^13.1.8",
+        "@atlaskit/inline-dialog": "^16.2.0",
+        "@atlaskit/inline-edit": "^14.3.1",
+        "@atlaskit/link": "^2.2.0",
         "@atlaskit/lozenge": "^11.14.0",
         "@atlaskit/modal-dialog": "^12.1.0",
         "@atlaskit/page": "^12.0.7",
-        "@atlaskit/page-header": "^10.2.2",
-        "@atlaskit/panel": "^0.4.7",
-        "@atlaskit/radio": "^5.3.3",
-        "@atlaskit/section-message": "^6.8.2",
-        "@atlaskit/select": "^15.2.4",
-        "@atlaskit/spinner": "^15.1.3",
-        "@atlaskit/table-tree": "^9.0.12",
+        "@atlaskit/page-header": "^11.2.0",
+        "@atlaskit/primitives": "^13.6.0",
+        "@atlaskit/radio": "^7.3.0",
+        "@atlaskit/section-message": "^7.0.0",
+        "@atlaskit/select": "^18.10.0",
+        "@atlaskit/skeleton": "^1.2.0",
+        "@atlaskit/spinner": "^17.2.0",
+        "@atlaskit/table-tree": "^10.1.2",
         "@atlaskit/tag": "^13.1.0",
         "@atlaskit/textarea": "^7.1.0",
         "@atlaskit/textfield": "^7.0.0",
         "@atlaskit/theme": "^16.0.0",
         "@atlaskit/tokens": "^3.3.2",
-        "@atlaskit/tooltip": "^17.5.1",
-        "@atlaskit/width-detector": "^3.0.6",
+        "@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",
@@ -1515,6 +1519,7 @@
         "base64-arraybuffer-es6": "^3.1.0",
         "clsx": "^1.1.0",
         "date-fns": "^3.2.0",
+        "dompurify": "^3.2.5",
         "dotenv": "^16.4.5",
         "eslint-plugin-prettier": "^5.2.1",
         "eventemitter3": "^4.0.0",
@@ -1554,13 +1559,16 @@
         "prosemirror-state": "^1.3.3",
         "prosemirror-view": "^1.15.2",
         "react": "^16.13.1",
+        "react-animate-height": "^3.2.3",
         "react-async-hook": "^3.6.1",
         "react-collapsible": "2.6.3",
         "react-dom": "^16.13.1",
         "react-dropzone": "^10.2.1",
         "react-editext": "3.6.1",
+        "react-focus-within": "^2.0.2",
         "react-hook-form": "^4.9.8",
         "react-uid": "^2.2.0",
+        "sanitize-html": "^2.15.0",
         "scheduler": "^0.19.0",
         "semver": "^7.6.3",
         "slash": "^3.0.0",
@@ -1593,6 +1601,7 @@
         "@types/react": "^16.9.34",
         "@types/react-dom": "^16.9.6",
         "@types/react-tabs": "^2.3.1",
+        "@types/sanitize-html": "^2.15.0",
         "@types/scheduler": "^0.16.1",
         "@types/semver": "^7.1.0",
         "@types/terser-webpack-plugin": "^2.2.0",
@@ -1657,4 +1666,4 @@
         "webpack-node-externals": "^3.0.0"
     },
     "packageManager": "[email protected]+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
-}
+}

scripts/check-atlaskit-packages.js

@@ -0,0 +1,37 @@
+const fs = require('fs');
+const { dirname, join } = require('path');
+
+const repoRoot = dirname(__dirname);
+
+// Read the package.json file
+const packageJson = JSON.parse(fs.readFileSync(join(repoRoot, 'package-lock.json'), 'utf8'));
+
+const PACKAGE_EXTRACT_REGEX = /.*(\@atlaskit\/[^\/]+)$/;
+
+const packages = Object.entries(packageJson['packages'])
+    .map(([pkg, { version }]) => {
+        const result = PACKAGE_EXTRACT_REGEX.exec(pkg);
+        if (result) {
+            return {
+                name: result[1],
+                version,
+            };
+        }
+        return null;
+    })
+    .filter(Boolean);
+
+const packagePerVersion = {};
+packages.forEach((pkg) => {
+    if (!packagePerVersion[pkg.name]) {
+        packagePerVersion[pkg.name] = [pkg.version];
+    } else if (!packagePerVersion[pkg.name].includes(pkg.version)) {
+        packagePerVersion[pkg.name].push(pkg.version);
+    }
+});
+
+Object.entries(packagePerVersion)
+    .filter(([, versions]) => versions.length > 1)
+    .forEach(([pkg, versions], idx) => {
+        console.log(`(${idx + 1}) ${pkg}: ${versions.join(', ')}`);
+    });

src/react/.eslintrc.js

@@ -3,17 +3,19 @@ module.exports = {
         'no-var': 'error',
         'prefer-const': 'error',
         'no-multi-assign': 'error',
-        'no-unused-expressions': ['error', {
-            "allowShortCircuit": true,
-            "allowTernary": true,
-        }],
+        'no-unused-expressions': [
+            'error',
+            {
+                allowShortCircuit: true,
+                allowTernary: true,
+            },
+        ],
         'no-restricted-imports': [
             'error',
             {
                 paths: ['vscode'],
                 patterns: [
                     '@material-ui/core/*',
-                    '@atlaskit/*',
                     '@atlassianlabs/guipi-core-components/*',
                     '@atlassianlabs/guipi-core-controller/*',
                     '@atlassianlabs/guipi-jira-components/*',

src/react/atlascode/common/AtlGlobalStyles.tsx

@@ -7,6 +7,90 @@ const useStyles = makeStyles(
     (theme: Theme) =>
         ({
             '@global': {
+                // Using Atlassian specific tokens
+                '.vscode-dark': {
+                    '--ds-icon-success': '#2ABB7F',
+                    '--ds-icon-warning': '#F5CD47',
+                    '--ds-skeleton': '#CECED912',
+                    '--ds-skeleton-subtle': '#BDBDBD0A',
+                },
+                '.vscode-light': {
+                    '--ds-icon-success': '#22A06B',
+                    '--ds-icon-warning': '#E56910',
+                    '--ds-skeleton': '#0515240F',
+                    '--ds-skeleton-subtle': '#17171708',
+                },
+                ':root': {
+                    /* Spacing tokens: Using Atlassian defaults */
+                    '--ds-space-0': '0rem',
+                    '--ds-space-025': '0.125rem',
+                    '--ds-space-050': '0.25rem',
+                    '--ds-space-075': '0.375rem',
+                    '--ds-space-100': '0.5rem',
+                    '--ds-space-150': '0.75rem',
+                    '--ds-space-200': '1rem',
+                    '--ds-space-250': '1.25rem',
+                    '--ds-space-300': '1.5rem',
+                    '--ds-space-400': '2rem',
+                    '--ds-space-500': '2.5rem',
+                    '--ds-space-600': '3rem',
+                    '--ds-space-800': '4rem',
+                    '--ds-space-1000': '5rem',
+                    '--ds-space-negative-025': '-0.125rem',
+                    '--ds-space-negative-050': '-0.25rem',
+                    '--ds-space-negative-075': '-0.375rem',
+                    '--ds-space-negative-100': '-0.5rem',
+                    '--ds-space-negative-150': '-0.75rem',
+                    '--ds-space-negative-200': '-1rem',
+                    '--ds-space-negative-250': '-1.25rem',
+                    '--ds-space-negative-300': '-1.5rem',
+                    '--ds-space-negative-400': '-2rem',
+                    /* Color Tokens: Text: Mapping to VSCode Tokens */
+                    '--ds-text-inverse': 'var(--vscode-button-foreground)',
+                    '--ds-text': 'var(--vscode-foreground)',
+                    '--ds-text-input': 'var(--vscode-input-foreground)',
+                    '--ds-text-selected': 'var(--vscode-list-activeSelectionForeground)',
+                    /* Color Tokens: Borders: Mapping to VSCode Tokens */
+                    '--ds-border': 'var(--vscode-input-border)',
+                    '--ds-border-disabled': 'var(--vscode-radio-inactiveBorder)',
+                    '--ds-border-focused': 'var(--vscode-inputOption-activeBorder)',
+                    '--ds-border-input': 'var(--vscode-input-border)',
+                    '--ds-border-inverse': 'var(--vscode-input-border)',
+                    '--ds-border-selected': 'var(--vscode-inputOption-activeBorder)',
+                    '--ds-border-danger': 'var(--vscode-inputValidation-errorBorder)',
+                    '--ds-border-warning': 'var(--vscode-inputValidation-warningBorder)',
+                    '--ds-border-success': 'var(--vscode-inputValidation-infoBorder)',
+                    '--ds-border-discovery': 'var(--vscode-inputValidation-infoBorder)',
+                    '--ds-border-information': 'var(--vscode-inputValidation-infoBorder)',
+                    '--ds-border-bold': 'var(--vscode-input-border)',
+                    /* Color Tokens: Backgrounds: Mapping to VSCode Tokens */
+                    '--ds-background-brand-bold': 'var(--vscode-button-background)',
+                    '--ds-background-input': 'var(--vscode-input-background)',
+                    '--ds-background-input-hovered': 'var(--vscode-inputOption-hoverBackground)',
+                    '--ds-background-input-pressed': 'var(--vscode-input-background)',
+                    '--ds-background-selected': 'var(--vscode-list-activeSelectionBackground)',
+                    '--ds-background-neutral': 'var(--vscode-input-background)',
+                    '--ds-background-neutral-hovered': 'var(--vscode-inputOption-hoverBackground)',
+                    '--ds-background-neutral-pressed': 'var(--vscode-inputOption-activeBackground)',
+                    '--ds-background-neutral-subtle': 'var(--vscode-input-background)',
+                    '--ds-background-neutral-subtle-hovered': 'var(--vscode-inputOption-hoverBackground)',
+                    '--ds-background-neutral-subtle-pressed': 'var(--vscode-inputOption-activeBackground)',
+                    /* Color Tokens: Overlays: Mapping to VSCode Tokens */
+                    '--ds-surface-overlay': 'var(--vscode-menu-background)',
+                    '--ds-surface-overlay-hovered': 'var(--vscode-menu-selectionBackground)',
+                    /* Shape tokens: Using Atlassian defaults */
+                    '--ds-border-radius-050': '0.125rem',
+                    '--ds-border-radius': '0.25rem',
+                    '--ds-border-radius-100': '0.25rem',
+                    '--ds-border-radius-200': '0.5rem',
+                    '--ds-border-radius-300': '0.75rem',
+                    '--ds-border-radius-400': '1rem',
+                    '--ds-border-radius-circle': '2002rem',
+                    '--ds-border-width': '0.0625rem',
+                    '--ds-border-width-0': '0rem',
+                    '--ds-border-width-indicator': '0.1875rem',
+                    '--ds-border-width-outline': '0.125rem',
+                },
                 p: {
                     margin: 0,
                 },
@@ -259,6 +343,42 @@ const useStyles = makeStyles(
                 '.suggestion-item-list': { background: '#fff', border: '1px solid #999' },
                 '.suggestion-item': { padding: '5px' },
                 '.suggestion-item:before': { borderTop: '1px solid' },
+                '[data-testid="editable-title-textfield"]': {
+                    fontSize: '24px !important',
+                    fontWeight: '500 !important',
+                    padding: '4px 0px !important',
+                    letterSpacing: '0px !important',
+                    height: 'inherit !important',
+                },
+                '[data-testid="vscode-dropdown--trigger"]': {
+                    backgroundColor: 'var(--vscode-settings-textInputBackground)!important',
+                    ':hover': {
+                        backgroundColor: 'var(--vscode-editor-selectionHighlightBackground)!important',
+                    },
+                },
+                '[data-testid="vscode-dropdown-item"]': {
+                    background: 'var(--vscode-settings-textInputBackground)!important',
+                    color: 'var(--vscode-settings-textInputForeground)!important',
+                    ':hover': {
+                        background: 'var(--vscode-editor-selectionHighlightBackground) !important',
+                    },
+                },
+                '[data-testid="vscode-breadcrumbs"] *': {
+                    'background-color': 'transparent !important',
+                },
+                '[.ac-inputField::placeholder': {
+                    color: 'var(--vscode-input-placeholderForeground) !important',
+                },
+                '.rendered-description': {
+                    ':hover': {
+                        backgroundColor: 'var(--vscode-editor-selectionHighlightBackground)!important',
+                        cursor: 'pointer !important',
+                    },
+                    paddingLeft: 0,
+                    paddingBottom: '4px',
+                    display: 'flex',
+                    alignItems: 'flex-start',
+                },
             },
         }) as const,
 );

src/react/atlascode/common/BasicPanel.tsx

@@ -1,16 +1,11 @@
-import {
-    Box,
-    CircularProgress,
-    ExpansionPanel,
-    ExpansionPanelDetails,
-    ExpansionPanelSummary,
-    makeStyles,
-} from '@material-ui/core';
+import Skeleton from '@atlaskit/skeleton';
+import { Box, ExpansionPanel, ExpansionPanelDetails, ExpansionPanelSummary, makeStyles } from '@material-ui/core';
 import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
 import React, { memo, useCallback, useState } from 'react';
 
 import { PanelTitle } from '../common/PanelTitle';
 import { PanelSubtitle } from './PanelSubtitle';
+
 interface BasicPanelProps {
     title: string;
     subtitle?: string;
@@ -69,7 +64,9 @@ export const BasicPanel: React.FC<BasicPanelProps> = memo(
                         <PanelTitle>{title}</PanelTitle>
                         {subtitle && <PanelSubtitle>{subtitle}</PanelSubtitle>}
                     </ExpansionPanelSummary>
-                    <ExpansionPanelDetails>{isLoading ? <CircularProgress /> : children}</ExpansionPanelDetails>
+                    <ExpansionPanelDetails>
+                        {isLoading ? <Skeleton width="100%" height="80px" borderRadius={3} /> : children}
+                    </ExpansionPanelDetails>
                 </ExpansionPanel>
             </Box>
         );

src/react/atlascode/pullrequest/ApproveButton.tsx

@@ -1,32 +1,36 @@
-import { Box, Button, Typography } from '@material-ui/core';
-import CheckCircleIcon from '@material-ui/icons/CheckCircle';
+import CheckCircleIcon from '@atlaskit/icon/glyph/check-circle';
+import { token } from '@atlaskit/tokens';
 import React, { useCallback } from 'react';
 
 import { ApprovalStatus } from '../../../bitbucket/model';
+import { ReviewerActionButton } from './ReviewActionButton';
 
 type ApproveButtonProps = {
-    hidden?: boolean;
     status: ApprovalStatus;
     onApprove: (status: ApprovalStatus) => void;
+    isDisabled: boolean;
 };
 
-export const ApproveButton: React.FunctionComponent<ApproveButtonProps> = ({ hidden, status, onApprove }) => {
+export const ApproveButton: React.FunctionComponent<ApproveButtonProps> = ({ status, onApprove, isDisabled }) => {
     const handleOnApprove = useCallback(() => {
         onApprove(status === 'APPROVED' ? 'UNAPPROVED' : 'APPROVED');
     }, [onApprove, status]);
 
     return (
-        <Box hidden={hidden}>
-            <Button
-                startIcon={<CheckCircleIcon htmlColor={'#07b82b'} />}
-                color={'primary'}
-                variant={'contained'}
-                onClick={handleOnApprove}
-            >
-                <Typography variant={'button'} noWrap>
-                    {status === 'APPROVED' ? 'Unapprove' : 'Approve'}
-                </Typography>
-            </Button>
-        </Box>
+        <ReviewerActionButton
+            mainIcon={
+                <CheckCircleIcon
+                    primaryColor={status === 'APPROVED' ? token('color.icon.success') : 'default'}
+                    label=""
+                    size="small"
+                />
+            }
+            label={status === 'APPROVED' ? 'Approved' : 'Approve'}
+            isSelected={status === 'APPROVED'}
+            onClick={handleOnApprove}
+            isLoading={false}
+            isDisabled={isDisabled}
+            isError={false}
+        />
     );
 };