Merge pull request #19 from aligent/fix/story-points-updates

Fix/story points updates

manifest.config.ts

@@ -1,10 +1,11 @@
 import { defineManifest } from '@crxjs/vite-plugin';
+
 import packageJson from './package.json';
 const { version } = packageJson;
 
 export default defineManifest(async (env) => ({
   manifest_version: 3,
-  name: 'PERT With Wings',
+  name: `PERT With Wings${env.mode === 'development' ? ' - Dev Build' : ''}`,
   description: 'Helper to make PERT estimates in JIRA / Azure DevOps tickets',
   version,
   action: {},

package.json

@@ -1,7 +1,7 @@
 {
   "name": "pert-with-wings",
   "private": true,
-  "version": "1.4.4",
+  "version": "2.0.3",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -16,6 +16,7 @@
   "dependencies": {
     "classnames": "^2.3.2",
     "i18next": "^22.4.15",
+    "partysocket": "^1.0.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-i18next": "^12.2.2",
@@ -26,14 +27,15 @@
   "devDependencies": {
     "@crxjs/vite-plugin": "^2.0.0-beta.7",
     "@types/chrome": "^0.0.203",
+    "@types/dom-navigation": "^1.0.3",
     "@types/puppeteer": "^7.0.4",
     "@types/react": "^18.0.24",
     "@types/react-dom": "^18.0.8",
     "@types/react-modal": "^3.13.1",
     "@types/uuid": "^9.0.0",
     "@typescript-eslint/eslint-plugin": "^5.48.2",
     "@typescript-eslint/parser": "^5.48.2",
-    "@vitejs/plugin-react": "^2.2.0",
+    "@vitejs/plugin-react": "^4.2.1",
     "dotenv": "^16.0.3",
     "eslint": "^8.32.0",
     "eslint-config-prettier": "^8.6.0",
@@ -45,7 +47,7 @@
     "prettier": "^2.8.3",
     "puppeteer": "^19.5.2",
     "rimraf": "^4.1.1",
-    "typescript": "^4.6.4",
+    "typescript": "^5.4.5",
     "uuid-by-string": "^4.0.0",
     "vite": "^4.0.4",
     "vitest": "^0.28.3"

src/__tests__/azuredevops.spec.ts

@@ -28,30 +28,30 @@ describe('test PERT with wings extension in Azure DevOps.', async () => {
       timeout,
     });
     await page.type('[name="loginfmt"]', AZUREDEVOPS_USER);
-    await page.waitForSelector('[data-report-event="Signin_Submit"]', {
+    await page.waitForSelector('[type="submit"]', {
       visible: true,
       timeout,
     });
-    await page.click('[data-report-event="Signin_Submit"]');
+    await page.click('[type="submit"]');
 
     // password screen
     const a = await page.waitForSelector('#otcLoginLink', {
       visible: true,
       timeout,
     });
     await page.type('[name="passwd"]', AZUREDEVOPS_PASSWORD);
-    await page.waitForSelector('[data-report-event="Signin_Submit"]', {
+    await page.waitForSelector('[type="submit"]', {
       visible: true,
       timeout,
     });
-    await page.click('[data-report-event="Signin_Submit"]');
+    await page.click('[type="submit"]');
 
     // Stay signed in screen
-    await page.waitForSelector('[data-report-event="Signin_Submit"]', {
+    await page.waitForSelector('[id="acceptButton"]', {
       visible: true,
       timeout,
     });
-    await page.click('[data-report-event="Signin_Submit"]');
+    await page.click('[id="acceptButton"]');
   });
 
   it('should render a button in Azure DevOps ticket.', async () => {

src/components/ActionButton/ActionButton.tsx

@@ -0,0 +1,49 @@
+import { FC, Fragment, ReactNode, SyntheticEvent, useState } from 'react';
+import { MdCheckCircle } from 'react-icons/md';
+
+import { waitFor } from '@/utils';
+
+interface ActionButtonProps {
+  clickAction: (e: SyntheticEvent) => void;
+  actionLabel: ReactNode;
+  progressLabel?: string;
+  className?: string;
+  disabled?: boolean;
+}
+
+const ActionButton: FC<ActionButtonProps> = (props) => {
+  const {
+    clickAction,
+    actionLabel,
+    progressLabel = '',
+    className = '',
+    disabled = false,
+  } = props;
+  const [inProgress, setInProgress] = useState(false);
+
+  const handleOnClick = async (e: SyntheticEvent) => {
+    setInProgress(true);
+    clickAction(e);
+    await waitFor(700);
+    setInProgress(false);
+  };
+
+  return (
+    <button
+      onClick={handleOnClick}
+      type="button"
+      className={className}
+      disabled={disabled}
+    >
+      {inProgress && progressLabel ? (
+        <Fragment>
+          <MdCheckCircle /> {progressLabel}
+        </Fragment>
+      ) : (
+        <Fragment>{actionLabel}</Fragment>
+      )}
+    </button>
+  );
+};
+
+export default ActionButton;

src/components/ActionButton/index.ts

@@ -0,0 +1 @@
+export { default } from './ActionButton';

src/components/Header/Header.tsx

@@ -1,6 +1,6 @@
 import { FC, useContext } from 'react';
-import { MdClose, MdMinimize } from 'react-icons/md';
 import { useTranslation } from 'react-i18next';
+import { MdClose, MdMinimize } from 'react-icons/md';
 
 import { PertContextType } from '@/@types/pertData';
 import Message from '@/components/Message';

src/components/PertModal/PertModal.module.css

@@ -15,6 +15,7 @@
   --pert-modal-backdrop: #091e427d;
   --pert-modal-shadow: 0px 8px 12px #091e4226, 0px 0px 1px #091e424f;
   --pert-secondary-button-hover: rgba(9, 30, 66, 0.08);
+  --pert-gutter: 24px;
 }
 
 :root[data-color-mode='dark'],
@@ -36,12 +37,24 @@
     0px 0px 1px #03040480;
 }
 
-.openPertModalButton {
+.pertButtons {
+  position: fixed;
+  right: var(--pert-gutter);
+  bottom: var(--pert-gutter);
+  z-index: 401287331;
+  display: flex;
+  align-items: flex-end;
+  gap: 1rem;
+}
+
+.pertButtons button {
   --to: #9061f9;
   --from: #e74694;
 
-  background-image: linear-gradient(to right, var(--from), var(--to));
-  box-shadow: 0 10px 15px -3px rgba(231, 70, 148, 0.5),
+  background-image: linear-gradient(100deg, var(--from), var(--to));
+  background-size: 150% 100%;
+  background-position: left;
+  box-shadow: 0 5px 10px -3px rgba(231, 70, 148, 0.5),
     0 4px 6px -4px rgba(231, 70, 148, 0.5);
   color: var(--pert-modal-button-color);
   white-space: nowrap;
@@ -51,37 +64,102 @@
   font-size: 1rem;
   font-weight: bold;
   cursor: pointer;
-  position: fixed;
-  right: 20px;
-  bottom: 20px;
-  z-index: 401287331;
+  transition: all ease-in-out 0.3s;
+  position: relative;
+  z-index: 1;
 }
 
-.openPertModalButton:hover {
-  background-image: linear-gradient(to right, var(--to), var(--from));
+.pertButtons button sup {
+  color: var(--pert-modal-button-color);
+  text-transform: uppercase;
+  font-weight: bold;
+  font-size: 9px;
+}
+
+.jiraWithWingsTools {
+  display: flex;
+  flex-direction: column-reverse;
+  align-items: flex-end;
+  gap: 1rem;
+  margin: 0;
+  padding: 0;
+  position: relative;
+  left: 100%;
+  opacity: 0;
+  transition: all 0.3s ease-in-out;
+  z-index: 0;
+  width: 0;
+  height: 0;
+  pointer-events: none;
+}
+
+.pert:has(.planningPokerContainer) .pertButtons {
+  display: none;
+}
+
+.pertButtons:hover .jiraWithWingsTools {
+  left: 0;
+  opacity: 1;
+  width: auto;
+  height: auto;
+  pointer-events: auto;
+}
+
+.jiraWithWingsTools button {
+  position: static;
+}
+
+/*.jiraWithWingsTools:not(:hover) dd {*/
+/*  display: none;*/
+/*}*/
+
+.pertButtons button:hover {
+  background-position: right;
 }
 
 :global(body:not(:has([contenteditable='true'])) #pert-button-jira) {
   display: none;
 }
 
-:global(body:has(#jira-issue-header) #pert-button-jira) {
+.planningPokerButton {
+  display: block;
+}
+
+:global(body:not(:has([contenteditable='true']))) .planningPokerButton {
+  display: none;
+}
+
+:global(body:has(#jira-issue-header) #pert-button-jira),
+:global(body:has(#jira-issue-header)) .planningPokerButton {
   display: block;
 }
 
-:global(body:not(:has([aria-label="Discussion"])) #pert-button-azure) {
+:global(body:not(:has([aria-label='Discussion'])) #pert-button-azure) {
   /* hide in non ticket pages in Azure Devops */
   display: none;
 }
 
-:global(body#com-atlassian-confluence #pert-button-jira) {
+:global(body#com-atlassian-confluence) .pert {
   /* hide in confluence pages */
   display: none;
 }
 
+/* move pert buttons away from mini create account modal (modal width + twice the gutter) */
+:global(body:has([data-testid="minimizable-modal.ui.modal-container.mini"])) .pertButtons {
+  right: calc(436px + (var(--pert-gutter) * 2));
+}
+
+/* hide planning poker container when create issue modal is visible */
+:global(body:has([data-testid="layout-controller.ui.bottom-right-corner.container.styled-container"]:not(:empty))) .planningPokerContainer {
+  display: none;
+}
+/* hide planning poker button when create issue modal is visible */
+:global(body:has([data-testid="layout-controller.ui.bottom-right-corner.container.styled-container"]:not(:empty))) .planningPokerButton  {
+  display: none;
+}
+
 .content {
   color: var(--pert-color);
-  font-size: 1rem;
   border-radius: 0.5rem;
   background: var(--pert-modal-bg);
   display: flex;