From 712d70e24f132ea8a27ffaccb31a94ea8af30328 Mon Sep 17 00:00:00 2001 From: Gilles Dubreuil Date: Fri, 17 Jun 2022 13:48:00 +0200 Subject: [PATCH 1/8] TACKLE-671: Application form - Packaging Tooltip --- pkg/client/public/locales/en/translation.json | 1 + pkg/client/public/locales/es/translation.json | 1 + .../application-form/application-form.tsx | 33 +++++++++---------- 3 files changed, 18 insertions(+), 17 deletions(-) diff --git a/pkg/client/public/locales/en/translation.json b/pkg/client/public/locales/en/translation.json index a09c3f91fb..570db8ee66 100644 --- a/pkg/client/public/locales/en/translation.json +++ b/pkg/client/public/locales/en/translation.json @@ -107,6 +107,7 @@ "appNotAssesedTitle": "Assessment has not been completed", "appNotAssessedBody": "In order to review an application it must be assessed first. Please assess the application", "assessmentStakeholderHeader": "Select the stakeholder(s) or stakeholder group(s) associated with this assessment.", + "binaryPackaging": "If undefined Packaging will default to 'jar'.", "continueConfirmation": "Yes, continue", "copyAssessmentAndReviewBody": "Some of the selected target applications have an in-progress or complete assessment/review. By continuing, the existing assessment(s)/review(s) will be replaced by the copied assessment/review. Do you wish to continue?", "copyAssessmentAndReviewQuestion": "Copy assessment and review?", diff --git a/pkg/client/public/locales/es/translation.json b/pkg/client/public/locales/es/translation.json index 3c87f9c469..d78272e868 100644 --- a/pkg/client/public/locales/es/translation.json +++ b/pkg/client/public/locales/es/translation.json @@ -107,6 +107,7 @@ "appNotAssesedTitle": "La evaluación no se ha completado", "appNotAssessedBody": "Para revisar una aplicación, esta debe de ser evaluada primero. Por favor evalúe la aplicación", "assessmentStakeholderHeader": "Seleccione a los interesados o grupo de interesados asociados a esta evaluación.", + "binaryPackaging": "Cuando no esté definido, se establecerá por defecto en 'jar'.", "continueConfirmation": "Si, continuar", "copyAssessmentAndReviewBody": "Algunas de las aplicaciones de destino seleccionadas tienen una evaluación/revisión en curso o completa. Al continuar, las evaluaciones/revisiones existentes serán reemplazadas por la evaluación/revisión copiada. ¿Desea continuar?", "copyAssessmentAndReviewQuestion": "¿Copiar evaluación y revisión?", diff --git a/pkg/client/src/app/pages/applications/components/application-form/application-form.tsx b/pkg/client/src/app/pages/applications/components/application-form/application-form.tsx index 4d2e24b89c..562cbd1861 100644 --- a/pkg/client/src/app/pages/applications/components/application-form/application-form.tsx +++ b/pkg/client/src/app/pages/applications/components/application-form/application-form.tsx @@ -13,6 +13,7 @@ import { FormGroup, TextArea, TextInput, + Tooltip, } from "@patternfly/react-core"; import { @@ -156,16 +157,12 @@ export const ApplicationForm: React.FC = ({ switch (fieldName) { case "group": return fieldList[0] || ""; - break; case "artifact": return fieldList[1] || ""; - break; case "version": return fieldList[2] || ""; - break; case "packaging": return fieldList[3] || ""; - break; default: return ""; } @@ -716,19 +713,21 @@ export const ApplicationForm: React.FC = ({ validated={getValidatedFromError(formik.errors.packaging)} helperTextInvalid={formik.errors.packaging} > - + + + From 006e32b00e1338aeb45a93c41314d9d390cb502b Mon Sep 17 00:00:00 2001 From: Gilles Dubreuil Date: Mon, 27 Jun 2022 12:17:48 +0200 Subject: [PATCH 2/8] Adjust message --- pkg/client/public/locales/en/translation.json | 2 +- pkg/client/public/locales/es/translation.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/pkg/client/public/locales/en/translation.json b/pkg/client/public/locales/en/translation.json index 570db8ee66..1211fff76e 100644 --- a/pkg/client/public/locales/en/translation.json +++ b/pkg/client/public/locales/en/translation.json @@ -107,7 +107,7 @@ "appNotAssesedTitle": "Assessment has not been completed", "appNotAssessedBody": "In order to review an application it must be assessed first. Please assess the application", "assessmentStakeholderHeader": "Select the stakeholder(s) or stakeholder group(s) associated with this assessment.", - "binaryPackaging": "If undefined Packaging will default to 'jar'.", + "binaryPackaging": "Packaging will default to JAR if left empty.", "continueConfirmation": "Yes, continue", "copyAssessmentAndReviewBody": "Some of the selected target applications have an in-progress or complete assessment/review. By continuing, the existing assessment(s)/review(s) will be replaced by the copied assessment/review. Do you wish to continue?", "copyAssessmentAndReviewQuestion": "Copy assessment and review?", diff --git a/pkg/client/public/locales/es/translation.json b/pkg/client/public/locales/es/translation.json index d78272e868..b244bbfa39 100644 --- a/pkg/client/public/locales/es/translation.json +++ b/pkg/client/public/locales/es/translation.json @@ -107,7 +107,7 @@ "appNotAssesedTitle": "La evaluación no se ha completado", "appNotAssessedBody": "Para revisar una aplicación, esta debe de ser evaluada primero. Por favor evalúe la aplicación", "assessmentStakeholderHeader": "Seleccione a los interesados o grupo de interesados asociados a esta evaluación.", - "binaryPackaging": "Cuando no esté definido, se establecerá por defecto en 'jar'.", + "binaryPackaging": "El valor de packaging será JAR for defecto si se dejase vacío.", "continueConfirmation": "Si, continuar", "copyAssessmentAndReviewBody": "Algunas de las aplicaciones de destino seleccionadas tienen una evaluación/revisión en curso o completa. Al continuar, las evaluaciones/revisiones existentes serán reemplazadas por la evaluación/revisión copiada. ¿Desea continuar?", "copyAssessmentAndReviewQuestion": "¿Copiar evaluación y revisión?", From e81ddf15ae94028c9c377ae201a6ae480d8adacb Mon Sep 17 00:00:00 2001 From: Gilles Dubreuil Date: Tue, 28 Jun 2022 10:24:24 +0200 Subject: [PATCH 3/8] Tooltip centered by default --- .../components/application-form/application-form.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/pkg/client/src/app/pages/applications/components/application-form/application-form.tsx b/pkg/client/src/app/pages/applications/components/application-form/application-form.tsx index 562cbd1861..423ff015ae 100644 --- a/pkg/client/src/app/pages/applications/components/application-form/application-form.tsx +++ b/pkg/client/src/app/pages/applications/components/application-form/application-form.tsx @@ -713,7 +713,7 @@ export const ApplicationForm: React.FC = ({ validated={getValidatedFromError(formik.errors.packaging)} helperTextInvalid={formik.errors.packaging} > - + Date: Tue, 28 Jun 2022 22:48:05 +0200 Subject: [PATCH 4/8] Use Popover with helpIcon instead --- .../application-form/application-form.tsx | 41 +++++++++++-------- 1 file changed, 25 insertions(+), 16 deletions(-) diff --git a/pkg/client/src/app/pages/applications/components/application-form/application-form.tsx b/pkg/client/src/app/pages/applications/components/application-form/application-form.tsx index 423ff015ae..8e0ebfb427 100644 --- a/pkg/client/src/app/pages/applications/components/application-form/application-form.tsx +++ b/pkg/client/src/app/pages/applications/components/application-form/application-form.tsx @@ -11,10 +11,12 @@ import { ExpandableSection, Form, FormGroup, + Popover, + PopoverPosition, TextArea, TextInput, - Tooltip, } from "@patternfly/react-core"; +import HelpIcon from "@patternfly/react-icons/dist/esm/icons/help-icon"; import { SingleSelectFetchOptionValueFormikField, @@ -709,25 +711,32 @@ export const ApplicationForm: React.FC = ({ + + + } fieldId="packaging" validated={getValidatedFromError(formik.errors.packaging)} helperTextInvalid={formik.errors.packaging} > - - - + From c074d99a8c6df18d64950ba9ff80fd0bd3fee3a1 Mon Sep 17 00:00:00 2001 From: Gilles Dubreuil Date: Thu, 30 Jun 2022 17:45:53 +0200 Subject: [PATCH 5/8] Add spacing for icon --- .../components/application-form/application-form.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/pkg/client/src/app/pages/applications/components/application-form/application-form.tsx b/pkg/client/src/app/pages/applications/components/application-form/application-form.tsx index 8e0ebfb427..5679ccf54d 100644 --- a/pkg/client/src/app/pages/applications/components/application-form/application-form.tsx +++ b/pkg/client/src/app/pages/applications/components/application-form/application-form.tsx @@ -17,6 +17,7 @@ import { TextInput, } from "@patternfly/react-core"; import HelpIcon from "@patternfly/react-icons/dist/esm/icons/help-icon"; +import spacing from "@patternfly/react-styles/css/utilities/Spacing/spacing"; import { SingleSelectFetchOptionValueFormikField, @@ -717,7 +718,7 @@ export const ApplicationForm: React.FC = ({ aria-label="binary-packaging-details" bodyContent={t("message.binaryPackaging")} > - + } fieldId="packaging" From 58847a9ff7c5d8a5ece73acb1aa9b3545c034d0e Mon Sep 17 00:00:00 2001 From: Gilles Dubreuil Date: Mon, 4 Jul 2022 15:24:38 +0200 Subject: [PATCH 6/8] Dark popover --- .../components/application-form/application-form.css | 6 ++++++ .../components/application-form/application-form.tsx | 4 ++-- 2 files changed, 8 insertions(+), 2 deletions(-) diff --git a/pkg/client/src/app/pages/applications/components/application-form/application-form.css b/pkg/client/src/app/pages/applications/components/application-form/application-form.css index 77fdaa9705..a202d99427 100644 --- a/pkg/client/src/app/pages/applications/components/application-form/application-form.css +++ b/pkg/client/src/app/pages/applications/components/application-form/application-form.css @@ -2,3 +2,9 @@ --pf-c-expandable-section__toggle--Color: #000; --pf-c-expandable-section__toggle--m-expanded--Color: #000; } + +.popover.pf-c-popover { + --pf-c-popover__content--BackgroundColor: #000; + --pf-c-popover__arrow--BackgroundColor: #000; + color: #fff; +} diff --git a/pkg/client/src/app/pages/applications/components/application-form/application-form.tsx b/pkg/client/src/app/pages/applications/components/application-form/application-form.tsx index 5679ccf54d..b61680625e 100644 --- a/pkg/client/src/app/pages/applications/components/application-form/application-form.tsx +++ b/pkg/client/src/app/pages/applications/components/application-form/application-form.tsx @@ -44,13 +44,12 @@ import { toITagDropdownOptionWithValue, toOptionLike, } from "@app/utils/model-utils"; - -import "./application-form.css"; import { useCreateApplicationMutation, useFetchApplications, useUpdateApplicationMutation, } from "@app/queries/applications"; +import "./application-form.css"; export interface FormValues { name: string; description: string; @@ -717,6 +716,7 @@ export const ApplicationForm: React.FC = ({ position={PopoverPosition.top} aria-label="binary-packaging-details" bodyContent={t("message.binaryPackaging")} + className="popover" > From ea5f018e0adb21b292667edfee89f1ef0d1616e7 Mon Sep 17 00:00:00 2001 From: Gilles Dubreuil Date: Tue, 12 Jul 2022 17:39:30 +0200 Subject: [PATCH 7/8] Wrapping icon with span and using QuestionCircleIcon --- .../components/application-form/application-form.tsx | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/pkg/client/src/app/pages/applications/components/application-form/application-form.tsx b/pkg/client/src/app/pages/applications/components/application-form/application-form.tsx index b61680625e..d3f576ccbf 100644 --- a/pkg/client/src/app/pages/applications/components/application-form/application-form.tsx +++ b/pkg/client/src/app/pages/applications/components/application-form/application-form.tsx @@ -16,7 +16,7 @@ import { TextArea, TextInput, } from "@patternfly/react-core"; -import HelpIcon from "@patternfly/react-icons/dist/esm/icons/help-icon"; +import QuestionCircleIcon from "@patternfly/react-icons/dist/esm/icons/question-circle-icon"; import spacing from "@patternfly/react-styles/css/utilities/Spacing/spacing"; import { @@ -718,7 +718,12 @@ export const ApplicationForm: React.FC = ({ bodyContent={t("message.binaryPackaging")} className="popover" > - + + + } fieldId="packaging" From 5c413a195703027c4df562044eca1df95ee943d6 Mon Sep 17 00:00:00 2001 From: Ian Bolton Date: Tue, 12 Jul 2022 12:31:36 -0400 Subject: [PATCH 8/8] Match MTC popover icon styling --- pkg/client/src/app/App.tsx | 1 + pkg/client/src/app/app.css | 49 ++ .../application-form/application-form.tsx | 612 +++++++++--------- 3 files changed, 359 insertions(+), 303 deletions(-) create mode 100644 pkg/client/src/app/app.css diff --git a/pkg/client/src/app/App.tsx b/pkg/client/src/app/App.tsx index 4e72095561..a6ea821f3a 100644 --- a/pkg/client/src/app/App.tsx +++ b/pkg/client/src/app/App.tsx @@ -15,6 +15,7 @@ import { ConfirmDialogContainer } from "./shared/containers/confirm-dialog-conta import { BulkCopyNotificationsContainer } from "./shared/containers/bulk-copy-notifications-container"; import { useFetchCookie } from "./queries/cookies"; import keycloak from "./keycloak"; +import "./app.css"; const App: React.FC = () => { // Automatically updates cookie diff --git a/pkg/client/src/app/app.css b/pkg/client/src/app/app.css new file mode 100644 index 0000000000..8a82ad2a39 --- /dev/null +++ b/pkg/client/src/app/app.css @@ -0,0 +1,49 @@ +.pf-c-icon { + --pf-c-icon--FontSize: var(--pf-global--FontSize--md); + --pf-c-icon--Color: #72767b; + + --pf-c-icon--m-sm--FontSize: var(--pf-global--icon--FontSize--sm); + --pf-c-icon--m-md--FontSize: var(--pf-global--icon--FontSize--md); + --pf-c-icon--m-lg--FontSize: var(--pf-global--icon--FontSize--lg); + --pf-c-icon--m-xl--FontSize: var(--pf-global--icon--FontSize--xl); + --pf-c-icon--m-2xl--FontSize: var(--pf-global--icon--FontSize--2xl); + + --pf-c-icon--m-info--Color: var(--pf-global--primary-color--100); + --pf-c-icon--m-success--Color: var(--pf-global--success-color--100); + --pf-c-icon--m-warning--Color: var(--pf-global--warning-color--100); + --pf-c-icon--m-danger--Color: var(--pf-global--danger-color--100); + + font-size: var(--pf-c-icon--FontSize); + color: var(--pf-c-icon--Color); +} +.pf-c-icon .pf-m-sm { + font-size: var(--pf-c-icon--m-sm--FontSize); +} + +.pf-c-icon .pf-m-lg { + font-size: var(--pf-c-icon--m-lg--FontSize); +} + +.pf-c-icon .pf-m-xl { + font-size: var(--pf-c-icon--m-xl--FontSize); +} + +.pf-c-icon .pf-m-default { + color: var(--pf-c-icon--Color); +} + +.pf-c-icon.pf-m-info { + color: var(--pf-c-icon--m-info--Color); +} + +.pf-c-icon .pf-m-success { + color: var(--pf-c-icon--m-success--Color); +} + +.pf-c-icon .pf-m-warning { + color: var(--pf-c-icon--m-warning--Color); +} + +.pf-c-icon .pf-m-danger { + color: var(--pf-c-icon--m-danger--Color); +} diff --git a/pkg/client/src/app/pages/applications/components/application-form/application-form.tsx b/pkg/client/src/app/pages/applications/components/application-form/application-form.tsx index d3f576ccbf..02321b0aaf 100644 --- a/pkg/client/src/app/pages/applications/components/application-form/application-form.tsx +++ b/pkg/client/src/app/pages/applications/components/application-form/application-form.tsx @@ -16,7 +16,8 @@ import { TextArea, TextInput, } from "@patternfly/react-core"; -import QuestionCircleIcon from "@patternfly/react-icons/dist/esm/icons/question-circle-icon"; +import QuestionCircleIcon from "@patternfly/react-icons/dist/js/icons/question-circle-icon"; + import spacing from "@patternfly/react-styles/css/utilities/Spacing/spacing"; import { @@ -424,138 +425,142 @@ export const ApplicationForm: React.FC = ({ onToggle={() => setBasicExpanded(!isBasicExpanded)} isExpanded={isBasicExpanded} > - - + - - - + + + + + + - - - - fieldConfig={{ - name: "businessService", - }} - selectConfig={{ - variant: "typeahead", - "aria-label": "business-service", - "aria-describedby": "business-service", - typeAheadAriaLabel: "business-service", - toggleAriaLabel: "business-service", - clearSelectionsAriaLabel: "business-service", - removeSelectionAriaLabel: "business-service", - placeholderText: t("composed.selectOne", { - what: t("terms.businessService").toLowerCase(), - }), - menuAppendTo: () => document.body, - maxHeight: DEFAULT_SELECT_MAX_HEIGHT, - isFetching: isFetchingBusinessServices, - fetchError: fetchErrorBusinessServices, - }} - options={(businessServices || []).map(toIBusinessServiceDropdown)} - toOptionWithValue={toIBusinessServiceDropdownOptionWithValue} - /> - - - - fieldConfig={{ - name: "tags", - }} - selectConfig={{ - variant: "typeaheadmulti", - "aria-label": "tags", - "aria-describedby": "tags", - typeAheadAriaLabel: "tags", - toggleAriaLabel: "tags", - clearSelectionsAriaLabel: "tags", - removeSelectionAriaLabel: "tags", - // t("terms.tag(s)") - placeholderText: t("composed.selectOne", { - what: t("terms.tag(s)").toLowerCase(), - }), - menuAppendTo: () => document.body, - maxHeight: DEFAULT_SELECT_MAX_HEIGHT, - isFetching: isFetchingTagTypes, - fetchError: fetchErrorTagTypes, - }} - options={(tags || []).map(toITagDropdown)} - toOptionWithValue={toITagDropdownOptionWithValue} - isEqual={isIModelEqual} - /> - - -