Repository: getsentry/sentry
Pull request: feat(framework-suggestion-modal): Add Java and its frameworks to the modal
closes https://github.com/getsentry/sentry/issues/50224

**Preview:**


https://github.com/getsentry/sentry/assets/29228205/a3b93422-825c-4ac8-ab30-765916249da6



Problem statement:
Java Modal for Project Selection
### Problem Statement

When Creating a Java project users might miss that they should use a framework specific SDK. Today they are sent on a generic flow

### Solution Brainstorm

Add the modal framework selection window same as Node, Python, and JS Browser

### Product Area

Projects

Hints from issue discussion:
Assigning to @getsentry/support for [routing](https://open.sentry.io/triage/#2-route), due by **<time datetime=2023-06-03T00:00:00.000Z>Friday, June 2nd at 5:00 pm</time> (sfo)**. ⏲️
@smeubank could you please add the list of frameworks in the order we should display them in the modal? Thank you!
> @smeubank could you please add the list of frameworks in the order we should display them in the modal? Thank you!

![image](https://github.com/getsentry/sentry/assets/1633368/795c4396-8cad-4178-9b2f-5b60c2041b9b)


I propose this order:
SB, Spring, Servlet, logback, log4j2, java.util.logging, regular Java

But we only have these wizards:

![image](https://github.com/getsentry/sentry/assets/1633368/e85f13ca-0c69-4ab6-bf0d-7a59753552e8)

So how about:
SB, Spring, logback, log4j2, regular Java



@matejminar @priscilawebdev 

Below is the SVG art required to complete this modal
![art-java-frameworks](https://github.com/getsentry/sentry/assets/6508377/a75722eb-106c-431d-8613-419d146cd184)

Commit message: feat(framework-suggestion-modal): Add java and its frameworks to the modal

Patch to review:
diff --git a/static/app/components/onboarding/frameworkSuggestionModal.tsx b/static/app/components/onboarding/frameworkSuggestionModal.tsx
index 053e373a6b3023..59120257f4e15e 100644
--- a/static/app/components/onboarding/frameworkSuggestionModal.tsx
+++ b/static/app/components/onboarding/frameworkSuggestionModal.tsx
@@ -5,6 +5,7 @@ import partition from 'lodash/partition';
 import sortBy from 'lodash/sortBy';
 import {PlatformIcon} from 'platformicons';
 
+import onboardingFrameworkSelectionJava from 'sentry-images/spot/onboarding-framework-selection-java.svg';
 import onboardingFrameworkSelectionJavascript from 'sentry-images/spot/onboarding-framework-selection-javascript.svg';
 import onboardingFrameworkSelectionNode from 'sentry-images/spot/onboarding-framework-selection-node.svg';
 import onboardingFrameworkSelectionPython from 'sentry-images/spot/onboarding-framework-selection-python.svg';
@@ -28,6 +29,7 @@ export enum SupportedLanguages {
   JAVASCRIPT = 'javascript',
   PYTHON = 'python',
   NODE = 'node',
+  JAVA = 'java',
 }
 
 export const topJavascriptFrameworks = [
@@ -56,25 +58,39 @@ const topNodeFrameworks = [
   'node-koa',
 ];
 
+const topJavaFrameworks = [
+  'java-spring-boot',
+  'java-spring',
+  'java-logback',
+  'java-log4j2',
+  'java',
+];
+
 export const languageDetails = {
   [SupportedLanguages.JAVASCRIPT]: {
     description: t(
-      'Our JavaScript framework SDK’s include all the features of our Browser Javascript SDK with additional features specific to that framework'
+      'Our JavaScript framework SDKs include all the features of our Browser Javascript SDK with additional features specific to that framework'
     ),
     topFrameworksImage: onboardingFrameworkSelectionJavascript,
   },
   [SupportedLanguages.NODE]: {
     description: t(
-      'Our Node framework SDK’s include all the features of our Node SDK with instructions specific to that framework'
+      'Our Node framework SDKs include all the features of our Node SDK with instructions specific to that framework'
     ),
     topFrameworksImage: onboardingFrameworkSelectionNode,
   },
   [SupportedLanguages.PYTHON]: {
     description: t(
-      'Our Python framework SDK’s include all the features of our Python SDK with instructions specific to that framework'
+      'Our Python framework SDKs include all the features of our Python SDK with instructions specific to that framework'
     ),
     topFrameworksImage: onboardingFrameworkSelectionPython,
   },
+  [SupportedLanguages.JAVA]: {
+    description: t(
+      'Our Java framework SDKs include all the features of our Java SDK with instructions specific to that framework'
+    ),
+    topFrameworksImage: onboardingFrameworkSelectionJava,
+  },
 };
 
 type Props = ModalRenderProps & {
@@ -112,6 +128,9 @@ export function FrameworkSuggestionModal({
     if (selectedPlatform.key === SupportedLanguages.PYTHON) {
       return topPythonFrameworks.includes(framework.id);
     }
+    if (selectedPlatform.key === SupportedLanguages.JAVA) {
+      return topJavaFrameworks.includes(framework.id);
+    }
     return topJavascriptFrameworks.includes(framework.id);
   });
 
@@ -123,6 +142,9 @@ export function FrameworkSuggestionModal({
     if (selectedPlatform.key === SupportedLanguages.PYTHON) {
       return topPythonFrameworks.indexOf(framework.id);
     }
+    if (selectedPlatform.key === SupportedLanguages.JAVA) {
+      return topJavaFrameworks.indexOf(framework.id);
+    }
     return topJavascriptFrameworks.indexOf(framework.id);
   });
 
diff --git a/static/images/spot/onboarding-framework-selection-java.svg b/static/images/spot/onboarding-framework-selection-java.svg
new file mode 100644
index 00000000000000..c9f1aa8c4b17de
--- /dev/null
+++ b/static/images/spot/onboarding-framework-selection-java.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="304" height="157" fill="none"><g filter="url(#a)"><path fill="#fff" d="M25.8 60.815a8 8 0 0 1 4.054-10.562l62.121-27.658a8 8 0 0 1 10.563 4.054l27.658 62.121a8 8 0 0 1-4.055 10.563l-62.12 27.658a8 8 0 0 1-10.563-4.055L25.8 60.816Z"/><path fill="#EBE6EF" fill-rule="evenodd" d="m29.448 49.34 62.12-27.659a9 9 0 0 1 11.883 4.562l27.658 62.12a9 9 0 0 1-4.561 11.883l-62.121 27.658a9 9 0 0 1-11.883-4.561L24.886 61.222a9 9 0 0 1 4.562-11.883Zm.406.913A8 8 0 0 0 25.8 60.815l27.658 62.121a8 8 0 0 0 10.562 4.055l62.121-27.658a8 8 0 0 0 4.055-10.563l-27.658-62.12a8 8 0 0 0-10.563-4.055l-62.12 27.658Z" clip-rule="evenodd"/><g clip-path="url(#b)"><path fill="#6DB33F" d="M88.964 43.18c.058 2.02-.145 4.04-.604 6.009a27.919 27.919 0 0 0-20.917 51.77c.486.213.987.39 1.499.528l1.322.423a27.913 27.913 0 0 0 33.979-36.323c-2.095-6.684-7.71-14.045-15.279-22.406Zm-16.222 56.93a2.375 2.375 0 0 1-3.345 1.505 2.37 2.37 0 0 1-1.313-2.286 2.373 2.373 0 0 1 2.987-2.13 2.422 2.422 0 0 1 1.671 2.911Zm31.135-23.004c-2.536 11.152-17.28 14.314-25.668 18.554 0 0-1.483.783-2.917 1.675 0 0 .465-.522 1.084-1.111 5.119-4.8 7.756-6.519 10.608-10.026 5.331-6.596 8.78-17.402 6.603-26.027.788 8.844-4.257 19.06-10.335 24.976-4.194 4.074-12.386 9.905-12.386 9.905l-.459-.048c-7.43-.324-13.572-13.481-4.312-22.715 4.044-4.1 9.152-5.086 13.912-8.715 5.047-3.826 9.687-10.941 9.868-17.642 6.883 7.594 16.631 19.782 14.002 31.174Z"/><path fill="#fff" d="M103.877 77.106c-2.536 11.152-17.28 14.314-25.668 18.554 0 0-1.483.783-2.917 1.675 0 0 .465-.522 1.084-1.111 5.119-4.8 7.756-6.519 10.608-10.026 5.331-6.596 8.78-17.402 6.603-26.027.788 8.844-4.257 19.06-10.335 24.976-4.194 4.074-12.386 9.905-12.386 9.905l-.459-.048c-7.43-.324-13.572-13.481-4.312-22.715 4.044-4.1 9.152-5.086 13.912-8.715 5.047-3.826 9.687-10.941 9.868-17.642 6.883 7.594 16.631 19.782 14.002 31.174ZM72.742 100.11a2.375 2.375 0 0 1-3.345 1.505 2.37 2.37 0 0 1-1.313-2.286 2.372 2.372 0 0 1 2.987-2.13 2.422 2.422 0 0 1 1.671 2.911Z"/></g></g><g filter="url(#c)"><path fill="#fff" d="M201.462 26.629a8 8 0 0 1 10.563-4.055l62.121 27.658a8 8 0 0 1 4.054 10.563l-27.658 62.121a8 8 0 0 1-10.562 4.054l-62.121-27.658a8 8 0 0 1-4.055-10.562l27.658-62.121Z"/><path fill="#069C02" d="M230.523 63.656c-7.08-3.153-14.146-7.995-12.793-11.032 1.352-3.038 9.646-1.05 16.761 2.118 7.116 3.168 14.139 7.991 12.783 11.036-1.355 3.044-9.636 1.045-16.751-2.123Zm3.19-7.165c-8.595-3.827-13.872-3.903-14.235-3.089-.362.814 3.228 4.678 11.823 8.505 8.595 3.827 13.865 3.9 14.225 3.092.359-.807-3.225-4.685-11.813-8.508Z"/><path fill="#069C02" d="m220.234 86.764-.51-.227c-6.369-3.243-8.286-7.93-8.365-8.135-3.158-6.607 5.992-25.023 6.397-25.8l1.714.856c-2.547 5.093-8.621 19.364-6.341 24.188.043.095 1.785 4.299 7.48 7.19.272.138.551.262.835.372 5.952 2.294 10.249.78 10.29.764 5.198-1.538 11.711-15.613 13.784-20.917l1.783.7c-.356.8-7.877 19.942-14.961 22.039-.141.048-4.91 1.767-11.582-.796l-.524-.234Z"/><path fill="#069C02" d="m219.023 89.483-.41-.183a22.655 22.655 0 0 1-4.919-3.165 6.745 6.745 0 0 1-1.872-7.553l1.749.779a4.845 4.845 0 0 0 1.393 5.388 20.928 20.928 0 0 0 4.483 2.887l.666.296a21.066 21.066 0 0 0 5.108 1.426 4.884 4.884 0 0 0 4.999-2.652l1.748.778a6.773 6.773 0 0 1-6.911 3.71 22.811 22.811 0 0 1-5.626-1.52l-.408-.19Zm17.608-5.65.581-1.819c2.351.652 4.833.672 7.194.056 3.178-.697 5.383-3.058 6.217-6.666.764-3.316-5.117-6.036-5.789-6.335l.781-1.756c1.884.838 7.93 3.93 6.87 8.522-1.005 4.37-3.756 7.235-7.665 8.107a15.593 15.593 0 0 1-8.189-.108Z"/><path fill="#069C02" d="m238.674 81.036.556-1.84c1.507.328 3.059.387 4.587.177 1.959-.265 3.127-1.459 3.795-3.893.329-1.177-1.102-2.594-3.847-3.765l-.134-.06.779-1.749.332.148c4.9 2.182 5.051 4.642 4.7 5.927-.885 3.187-2.646 4.913-5.395 5.276-1.79.252-3.61.177-5.373-.22Z"/><path fill="#069C02" d="M217.255 94.694c-15.88-7.07-25.798-18.273-22.555-25.558 2.103-4.723 9.233-6.58 19.075-4.963l-.308 1.891c-8.8-1.441-15.29.047-16.99 3.863-2.729 6.055 7.156 16.606 21.557 23.018 14.4 6.412 28.856 6.697 31.557.63 1.224-2.747-.09-6.522-3.678-10.64l1.414-1.27c4.163 4.73 5.567 9.198 4.013 12.688-3.234 7.264-18.205 7.411-34.085.34Z"/><path fill="#069C02" d="M243.951 80.883a43.23 43.23 0 0 0-3.684-3.159l1.163-1.526a45.149 45.149 0 0 1 3.871 3.31l-1.35 1.375Zm-25.798 11.793c-9.558-4.256-15.416-10.495-13.613-14.544.883-1.983 3.467-3.004 7.265-2.866l-.07 1.912c-2.923-.105-4.903.532-5.439 1.735-1.116 2.507 3.809 8.042 12.652 11.979 8.843 3.937 16.223 3.957 17.355 1.415.586-1.317-.514-3.478-2.945-5.79l1.315-1.392c3.145 2.978 4.344 5.811 3.385 7.964-1.79 4.021-10.347 3.842-19.905-.413Z"/><path fill="#EBE6EF" fill-rule="evenodd" d="m212.431 21.66 62.121 27.659a9 9 0 0 1 4.562 11.882l-27.658 62.121a9.001 9.001 0 0 1-11.883 4.562l-62.121-27.658a9 9 0 0 1-4.561-11.883l27.658-62.121a9 9 0 0 1 11.882-4.561Zm-.406.914a8 8 0 0 0-10.563 4.055l-27.658 62.12a8 8 0 0 0 4.055 10.563l62.121 27.658a8 8 0 0 0 10.562-4.054L278.2 60.795a8 8 0 0 0-4.054-10.563l-62.121-27.658Z" clip-rule="evenodd"/></g><g filter="url(#d)"><path fill="#fff" d="M110.001 41.772a8 8 0 0 1 8-8h68a8 8 0 0 1 8 8v68a8 8 0 0 1-8 8h-68a8 8 0 0 1-8-8v-68Z"/><path fill="#65A741" fill-rule="evenodd" d="M164.993 48.871h-25.757a4.246 4.246 0 0 0-3.676 2.123L122.682 73.3a4.252 4.252 0 0 0 0 4.246l12.878 22.307a4.246 4.246 0 0 0 3.676 2.122h25.757a4.239 4.239 0 0 0 3.675-2.122l12.879-22.307a4.261 4.261 0 0 0 0-4.246l-12.879-22.306a4.25 4.25 0 0 0-3.675-2.123Zm-12.879 27.797a1.697 1.697 0 0 1-1.695-1.695V58.6a1.698 1.698 0 0 1 1.695-1.695 1.695 1.695 0 0 1 1.695 1.695v16.374a1.694 1.694 0 0 1-1.695 1.695Zm-9.76 10.395a15.861 15.861 0 0 0 9.76 3.361A15.861 15.861 0 0 0 167.5 78.407a15.865 15.865 0 0 0-7.923-17.842 1.703 1.703 0 0 0-2.495 1.332 1.7 1.7 0 0 0 .89 1.668 12.464 12.464 0 0 1 6.237 14.023 12.466 12.466 0 1 1-17.953-14.023 1.702 1.702 0 1 0-1.605-3 15.86 15.86 0 0 0-7.923 17.842 15.864 15.864 0 0 0 5.626 8.656Z" clip-rule="evenodd"/><path fill="#EBE6EF" fill-rule="evenodd" d="M118.001 32.772h68a9 9 0 0 1 9 9v68a9 9 0 0 1-9 9h-68a9 9 0 0 1-9-9v-68a9 9 0 0 1 9-9Zm0 1a8 8 0 0 0-8 8v68a8 8 0 0 0 8 8h68a8 8 0 0 0 8-8v-68a8 8 0 0 0-8-8h-68Z" clip-rule="evenodd"/></g><defs><filter id="a" width="155.784" height="155.784" x=".106" y=".901" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dy="4"/><feGaussianBlur stdDeviation="12"/><feComposite in2="hardAlpha" operator="out"/><feColorMatrix values="0 0 0 0 0.168627 0 0 0 0 0.133333 0 0 0 0 0.2 0 0 0 0.12 0"/><feBlend in2="BackgroundImageFix" result="effect1_dropShadow_202_7012"/><feBlend in="SourceGraphic" in2="effect1_dropShadow_202_7012" result="shape"/></filter><filter id="c" width="155.784" height="155.784" x="148.11" y=".88" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dy="4"/><feGaussianBlur stdDeviation="12"/><feComposite in2="hardAlpha" operator="out"/><feColorMatrix values="0 0 0 0 0.168627 0 0 0 0 0.133333 0 0 0 0 0.2 0 0 0 0.12 0"/><feBlend in2="BackgroundImageFix" result="effect1_dropShadow_202_7012"/><feBlend in="SourceGraphic" in2="effect1_dropShadow_202_7012" result="shape"/></filter><filter id="d" width="134" height="134" x="85.001" y="12.772" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dy="4"/><feGaussianBlur stdDeviation="12"/><feComposite in2="hardAlpha" operator="out"/><feColorMatrix values="0 0 0 0 0.168627 0 0 0 0 0.133333 0 0 0 0 0.2 0 0 0 0.12 0"/><feBlend in2="BackgroundImageFix" result="effect1_dropShadow_202_7012"/><feBlend in="SourceGraphic" in2="effect1_dropShadow_202_7012" result="shape"/></filter><clipPath id="b"><path fill="#fff" d="M41.012 60.837 92.171 38.06l22.777 51.158-51.159 22.777z"/></clipPath></defs></svg>
\ No newline at end of file


Code review comments:
diff_hunk: @@ -56,25 +58,39 @@ const topNodeFrameworks = [
   'node-koa',
 ];
 
+const topJavaFrameworks = [
+  'java-spring-boot',
+  'java-spring',
+  'java-logback',
+  'java-log4j2',
+  'java',
path: static/app/components/onboarding/frameworkSuggestionModal.tsx
text: @author:
```suggestion
```

removing as this has to be part of the skip