CodeWhisperer: Simplify Learn UX (#3996)

* CodeWhisperer: Simplify Learn UX

Remove other sections expect for generate suggestion,
and only use Java as the example and 3 types of tasks

* Remove banner component

* change text

Author: andrewyuq

jetbrains-core/src/software/aws/toolkits/jetbrains/services/codewhisperer/explorer/CodeWhispererExplorerActionManager.kt

@@ -56,10 +56,6 @@ class CodeWhispererExplorerActionManager : PersistentStateComponent<CodeWhispere
         actionState.value[CodeWhispererExploreStateType.IsAutoEnabled] = isAutoEnabled
     }
 
-    fun hasShownOldOnboardingPage(): Boolean = actionState.value.getOrDefault(CodeWhispererExploreStateType.HasShownHowToUseCodeWhisperer, false)
-
-    fun hasShownNewOnboardingPage(): Boolean = actionState.value.getOrDefault(CodeWhispererExploreStateType.HasShownNewOnboardingPage, false)
-
     fun setHasShownNewOnboardingPage(hasShownNewOnboardingPage: Boolean) {
         actionState.value[CodeWhispererExploreStateType.HasShownNewOnboardingPage] = hasShownNewOnboardingPage
     }

jetbrains-core/src/software/aws/toolkits/jetbrains/services/codewhisperer/learn/LearnCodeWhispererEditor.kt

@@ -9,51 +9,27 @@ import com.intellij.openapi.fileEditor.FileEditorLocation
 import com.intellij.openapi.fileEditor.FileEditorState
 import com.intellij.openapi.fileEditor.FileEditorStateLevel
 import com.intellij.openapi.project.Project
-import com.intellij.openapi.ui.OnePixelDivider
 import com.intellij.openapi.util.UserDataHolderBase
 import com.intellij.openapi.vfs.VirtualFile
-import com.intellij.ui.JBColor
-import com.intellij.ui.SeparatorComponent
 import com.intellij.ui.dsl.builder.Align
-import com.intellij.ui.dsl.builder.AlignX
 import com.intellij.ui.dsl.builder.AlignY
 import com.intellij.ui.dsl.builder.BottomGap
-import com.intellij.ui.dsl.builder.Cell
 import com.intellij.ui.dsl.builder.Panel
-import com.intellij.ui.dsl.builder.Row
 import com.intellij.ui.dsl.builder.TopGap
 import com.intellij.ui.dsl.builder.panel
 import com.intellij.ui.dsl.gridLayout.Gaps
 import icons.AwsIcons
-import software.aws.toolkits.jetbrains.services.codewhisperer.language.CodeWhispererProgrammingLanguage
-import software.aws.toolkits.jetbrains.services.codewhisperer.language.languages.CodeWhispererCsharp
-import software.aws.toolkits.jetbrains.services.codewhisperer.language.languages.CodeWhispererJava
-import software.aws.toolkits.jetbrains.services.codewhisperer.language.languages.CodeWhispererJavaScript
-import software.aws.toolkits.jetbrains.services.codewhisperer.language.languages.CodeWhispererPython
-import software.aws.toolkits.jetbrains.services.codewhisperer.language.languages.CodeWhispererTypeScript
-import software.aws.toolkits.jetbrains.services.codewhisperer.learn.LearnCodeWhispererEditorProvider.Companion.NEW_ONBOARDING_UX_KEY
-import software.aws.toolkits.jetbrains.services.codewhisperer.learn.LearnCodeWhispererUIComponents.bannerPanel
-import software.aws.toolkits.jetbrains.services.codewhisperer.learn.LearnCodeWhispererUIComponents.codeScanDescriptionPanel
-import software.aws.toolkits.jetbrains.services.codewhisperer.learn.LearnCodeWhispererUIComponents.commandsPanel
 import software.aws.toolkits.jetbrains.services.codewhisperer.learn.LearnCodeWhispererUIComponents.examplesDescriptionPanel
-import software.aws.toolkits.jetbrains.services.codewhisperer.learn.LearnCodeWhispererUIComponents.resourcesPanel
 import software.aws.toolkits.jetbrains.services.codewhisperer.learn.LearnCodeWhispererUIComponents.tryExamplePanel
-import software.aws.toolkits.jetbrains.services.codewhisperer.learn.LearnCodeWhispererUIComponents.workshopPanel
 import software.aws.toolkits.resources.message
-import java.awt.Font
 import java.beans.PropertyChangeListener
-import javax.swing.BorderFactory
-import javax.swing.ImageIcon
-import javax.swing.JButton
 import javax.swing.JComponent
-import javax.swing.JPanel
 
 class LearnCodeWhispererEditor(val project: Project, val virtualFile: VirtualFile) : UserDataHolderBase(), FileEditor {
-    private val languageButtons = mutableListOf<Cell<JButton>>()
     private val contentPanel = panel {
         row {
             panel {
-                customize(Gaps(0, 50, 0, 0))
+                customize(Gaps(20, 50, 0, 0))
                 row {
                     icon(AwsIcons.Logos.CODEWHISPERER_LARGE)
 
@@ -68,77 +44,22 @@ class LearnCodeWhispererEditor(val project: Project, val virtualFile: VirtualFil
         }.topGap(TopGap.MEDIUM).bottomGap(BottomGap.MEDIUM)
 
         row {
-            // Left panel
+            // Single panel
             panel {
                 customize(Gaps(0, 50, 0, 0))
                 align(AlignY.TOP)
-                addToLeftPanel(commandsPanel(project))
-                addToLeftPanel(workshopPanel())
-                addToLeftPanel(resourcesPanel(project))
-            }
 
-            // Right panel
-            panel {
-                customize(Gaps(0, 40, 50, 60))
-                align(AlignY.TOP)
-
-                title(message("codewhisperer.learn_page.examples.title"))
+                title(message("codewhisperer.learn_page.examples.title")).bottomGap(BottomGap.MEDIUM)
                 row {
-                    cell(examplesDescriptionPanel)
+                    cell(tryExamplePanel(project)).widthGroup(FIRST_COLUMN_WIDTH_GROUP)
                 }.bottomGap(BottomGap.MEDIUM)
-                buttonsGroup {
-                    row {
-                        val javaButton = learnCodeWhispererLanguageButton(CodeWhispererJava.INSTANCE)
-                        val pythonButton = learnCodeWhispererLanguageButton(CodeWhispererPython.INSTANCE)
-                        val javascriptButton = learnCodeWhispererLanguageButton(CodeWhispererJavaScript.INSTANCE)
-                        val typescriptButton = learnCodeWhispererLanguageButton(CodeWhispererTypeScript.INSTANCE)
-                        val csharpButton = learnCodeWhispererLanguageButton(CodeWhispererCsharp.INSTANCE)
-                        languageButtons.add(javaButton)
-                        languageButtons.add(pythonButton)
-                        languageButtons.add(javascriptButton)
-                        languageButtons.add(typescriptButton)
-                        languageButtons.add(csharpButton)
-                        javaButton.component.doClick()
-                    }.bottomGap(BottomGap.MEDIUM)
-                }
                 row {
-                    cell(tryExamplePanel(project)).widthGroup(RIGHT_PANEL_WIDTH_GROUP)
+                    cell(examplesDescriptionPanel).widthGroup(FIRST_COLUMN_WIDTH_GROUP)
                 }.bottomGap(BottomGap.MEDIUM)
-
-                // A separator with width adjusted to its sibling components
-                row {
-                    cell(SeparatorComponent(0, OnePixelDivider.BACKGROUND, null))
-                        .widthGroup(RIGHT_PANEL_WIDTH_GROUP)
-                }.bottomGap(BottomGap.MEDIUM)
-
-                title(message("codewhisperer.learn_page.codescan.title"))
-                row {
-                    cell(codeScanDescriptionPanel)
-                }.bottomGap(BottomGap.SMALL)
-                row {
-                    icon(ImageIcon(LearnCodeWhispererUIComponents.javaClass.classLoader.getResource("codewhisperer/codescan.png")))
-                        .widthGroup(RIGHT_PANEL_WIDTH_GROUP).align(AlignX.LEFT)
-                }
             }
         }
     }
-    private val banner = panel {
-        panel {
-            customize(Gaps(10, 20, 10, 10))
-            row {
-                cell(bannerPanel()).resizableColumn().align(Align.FILL)
-            }
-        }
-    }.apply {
-        background = JBColor.BLUE.darker().darker()
-    }
     private val rootPanel = panel {
-        val hasUserSeenNewUX = virtualFile.getUserData(NEW_ONBOARDING_UX_KEY) ?: false
-        if (!hasUserSeenNewUX) {
-            row {
-                cell(banner).resizableColumn().align(Align.FILL)
-            }
-        }
         row {
             scrollCell(contentPanel).align(Align.FILL)
         }.resizableRow()
@@ -174,52 +95,11 @@ class LearnCodeWhispererEditor(val project: Project, val virtualFile: VirtualFil
 
     override fun getFile(): VirtualFile = virtualFile
 
-    private fun Row.learnCodeWhispererLanguageButton(buttonLanguage: CodeWhispererProgrammingLanguage): Cell<JButton> {
-        val buttonContext = when (buttonLanguage) {
-            CodeWhispererJava.INSTANCE -> "Java " to AwsIcons.Misc.JAVA
-            CodeWhispererPython.INSTANCE -> "Python " to AwsIcons.Misc.PYTHON
-            CodeWhispererJavaScript.INSTANCE -> "JavaScript " to AwsIcons.Misc.JAVASCRIPT
-            CodeWhispererTypeScript.INSTANCE -> "TypeScript " to AwsIcons.Misc.TYPESCRIPT
-            CodeWhispererCsharp.INSTANCE -> "C# " to AwsIcons.Misc.CSHARP
-            else -> "Java " to AwsIcons.Misc.JAVA
-        }
-        val text = buttonContext.first
-        val buttonIcon = buttonContext.second
-
-        return button(text) {
-            LearnCodeWhispererManager.getInstance(project).language = buttonLanguage
-            languageButtons.forEach { button ->
-                button.applyToComponent {
-                    border = BorderFactory.createEmptyBorder(3, 3, 3, 3)
-                    font = font.deriveFont(Font.PLAIN)
-                }
-            }
-            languageButtons.filter { button -> button.component.text == text }[0].applyToComponent {
-                border = BorderFactory.createCompoundBorder(
-                    CustomRadiusRoundedBorder(1, 30, JBColor.BLUE),
-                    BorderFactory.createEmptyBorder(2, 2, 2, 2)
-                )
-                font = font.deriveFont(Font.BOLD)
-            }
-        }.applyToComponent {
-            icon = buttonIcon
-            isOpaque = false
-            isContentAreaFilled = false
-            border = BorderFactory.createEmptyBorder(3, 3, 3, 3)
-            isSelected = LearnCodeWhispererManager.getInstance(project).language == buttonLanguage
-        }.customize(Gaps(0, 10, 2, 10))
-    }
-
     private fun Panel.title(text: String) = row {
         label(text).bold().applyToComponent { font = font.deriveFont(24f) }
     }
 
-    private fun Panel.addToLeftPanel(panel: JPanel) = row {
-        cell(panel).widthGroup(LEFT_PANEL_WIDTH_GROUP).customize(Gaps(22, 18, 11, 18))
-    }.bottomGap(BottomGap.MEDIUM)
-
     companion object {
-        private const val LEFT_PANEL_WIDTH_GROUP = "leftPanel"
-        private const val RIGHT_PANEL_WIDTH_GROUP = "rightPanel"
+        private const val FIRST_COLUMN_WIDTH_GROUP = "firstColumn"
     }
 }

jetbrains-core/src/software/aws/toolkits/jetbrains/services/codewhisperer/learn/LearnCodeWhispererEditorProvider.kt

@@ -11,7 +11,6 @@ import com.intellij.openapi.fileEditor.FileEditorProvider
 import com.intellij.openapi.fileEditor.OpenFileDescriptor
 import com.intellij.openapi.project.DumbAware
 import com.intellij.openapi.project.Project
-import com.intellij.openapi.util.Key
 import com.intellij.openapi.vfs.VirtualFile
 import software.aws.toolkits.core.utils.debug
 import software.aws.toolkits.core.utils.getLogger
@@ -30,19 +29,13 @@ class LearnCodeWhispererEditorProvider : FileEditorProvider, DumbAware {
 
     companion object {
         private val LOG = getLogger<LearnCodeWhispererEditorProvider>()
-        val NEW_ONBOARDING_UX_KEY = Key.create<Boolean>("NEW_ONBOARDING_UX")
 
         // Will be called every time the getting started page is opened
         fun openEditor(project: Project) {
             if (isRunningOnRemoteBackend()) return
 
             val virtualFile = LearnCodeWhispererVirtualFile()
 
-            // The "hasShown" status will be passed as local states to the page rendering process each time
-            virtualFile.putUserData(
-                NEW_ONBOARDING_UX_KEY,
-                CodeWhispererExplorerActionManager.getInstance().hasShownNewOnboardingPage()
-            )
             runInEdt {
                 try {
                     FileEditorManager.getInstance(project).openFileEditor(OpenFileDescriptor(project, virtualFile), true)

jetbrains-core/src/software/aws/toolkits/jetbrains/services/codewhisperer/learn/LearnCodeWhispererManager.kt

@@ -7,53 +7,22 @@ import com.intellij.openapi.components.service
 import com.intellij.openapi.project.Project
 import com.intellij.openapi.vfs.VirtualFile
 import software.aws.toolkits.jetbrains.services.codewhisperer.language.CodeWhispererProgrammingLanguage
-import software.aws.toolkits.jetbrains.services.codewhisperer.language.languages.CodeWhispererCsharp
 import software.aws.toolkits.jetbrains.services.codewhisperer.language.languages.CodeWhispererJava
-import software.aws.toolkits.jetbrains.services.codewhisperer.language.languages.CodeWhispererJavaScript
-import software.aws.toolkits.jetbrains.services.codewhisperer.language.languages.CodeWhispererPython
-import software.aws.toolkits.jetbrains.services.codewhisperer.language.languages.CodeWhispererTypeScript
-import software.aws.toolkits.resources.message
 import software.aws.toolkits.telemetry.CodewhispererGettingStartedTask
-import javax.swing.JButton
 
 class LearnCodeWhispererManager(private val project: Project) {
-    val tryExampleButtons = mutableListOf<JButton>()
-    var language: CodeWhispererProgrammingLanguage = CodeWhispererJava.INSTANCE
-        set(value) {
-            field = value
-            tryExampleButtons.forEach {
-                it.text = message("codewhisperer.learn_page.examples.tasks.button", getButtonSuffix())
-            }
-        }
+    // Only supporting Java at the moment
+    val language: CodeWhispererProgrammingLanguage = CodeWhispererJava.INSTANCE
+    val fileExtension = ".java"
 
     fun getEditor(file: VirtualFile) = LearnCodeWhispererEditor(project, file)
 
-    fun getFileExtension() = when (language) {
-        CodeWhispererJava.INSTANCE -> ".java"
-        CodeWhispererPython.INSTANCE -> ".py"
-        CodeWhispererJavaScript.INSTANCE -> ".js"
-        CodeWhispererTypeScript.INSTANCE -> ".ts"
-        CodeWhispererCsharp.INSTANCE -> ".cs"
-        else -> ".java"
-    }
-
-    fun getButtonSuffix() = when (language) {
-        CodeWhispererJava.INSTANCE -> "Java"
-        CodeWhispererPython.INSTANCE -> "Python"
-        CodeWhispererJavaScript.INSTANCE -> "JavaScript"
-        CodeWhispererTypeScript.INSTANCE -> "TypeScript"
-        CodeWhispererCsharp.INSTANCE -> "C#"
-        else -> "Java"
-    }
-
     companion object {
         fun getInstance(project: Project) = project.service<LearnCodeWhispererManager>()
         val taskTypeToFilename = mapOf(
             CodewhispererGettingStartedTask.AutoTrigger to "CodeWhisperer_generate_suggestion",
             CodewhispererGettingStartedTask.ManualTrigger to "CodeWhisperer_manual_invoke",
-            CodewhispererGettingStartedTask.CommentAsPrompt to "CodeWhisperer_use_comments",
             CodewhispererGettingStartedTask.UnitTest to "CodeWhisperer_generate_unit_tests",
-            CodewhispererGettingStartedTask.Navigation to "CodeWhisperer_navigate_suggestions",
         )
     }
 }