Merge pull request #50 from alirezamirian/document-action-system

Document action system
alirezamirian · Oct 3, 2023 · 51b163b · 51b163b
2 parents ca99f92 + aadcfea
commit 51b163b
Show file tree

Hide file tree

Showing 73 changed files with 1,446 additions and 564 deletions.
diff --git a/.github/workflows/CI.yaml b/.github/workflows/CI.yaml
@@ -20,11 +20,11 @@ jobs:
 
       - uses: actions/setup-node@v3
         with:
-          node-version: 14.17.0
+          node-version: 16.16.0
           cache: yarn
 
       - name: Install Dependencies 🔧
-        run: yarn
+        run: yarn install --immutable
 
   build_and_test:
     runs-on: ubuntu-latest
@@ -40,11 +40,11 @@ jobs:
 
       - uses: actions/setup-node@v3
         with:
-          node-version: 14.17.0
+          node-version: 16.16.0
           cache: yarn
 
       - name: Install Dependencies 🔧
-        run: yarn
+        run: yarn install --immutable
 
       - name: Type Check ʦ
         run: yarn run type-check
@@ -72,7 +72,7 @@ jobs:
       matrix:
         group: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
     runs-on: ubuntu-latest # note: macos doesn't have docker installed!
-    container: cypress/browsers:node14.17.0-chrome91-ff89
+    container: cypress/browsers:node16.16.0-chrome107-ff107-edge
 
     env:
       CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}
@@ -89,11 +89,11 @@ jobs:
 
       - uses: actions/setup-node@v3
         with:
-          node-version: 14.17.0
+          node-version: 16.16.0
           cache: yarn
 
       - name: Install Dependencies 🔧
-        run: yarn
+        run: yarn install --immutable
 
       - name: Run Cypress Tests ✅
         if: ${{ env.IS_PR_JUST_MERGED == 'true' || env.IS_PR_WITH_PERCY == 'true' }}

diff --git a/README.md b/README.md
@@ -119,15 +119,15 @@ https://user-images.githubusercontent.com/3150694/232305636-e8b63780-4777-4d27-8
             <td>❌</td>
         </tr>
         <tr>
-            <td colspan="3"><a href="https://jetbrains.github.io/ui/controls/icon_button/">Action Button</a></td>
+            <td colspan="3"><a href="https://jetbrains.github.io/ui/controls/icon_button/">Icon Button (aka ActionButton)</a></td>
             <td>✅</td>
         </tr>
         <tr>
-            <td colspan="3">Action Button with menu 🧬</td>
+            <td colspan="3">Icon Button with menu 🧬</td>
             <td>✅</td>
         </tr>
         <tr>
-            <td colspan="3"><a href="https://jetbrains.github.io/ui/controls/toolbar/">Action Toolbar</a></td>
+            <td colspan="3"><a href="https://jetbrains.github.io/ui/controls/toolbar/">Toolbar</a></td>
             <td>✅</td>
         </tr>
         <tr>

diff --git a/packages/example-app/package.json b/packages/example-app/package.json
@@ -10,7 +10,6 @@
   "alias": {
     "caf": "caf/dist/esm/index.mjs",
     "@intellij-platform/core/utils/tree-utils": "@intellij-platform/core/src/utils/tree-utils",
-    "@intellij-platform/core/ActionSystem/components": "@intellij-platform/core/src/ActionSystem/components",
     "@intellij-platform/core/utils/array-utils": "@intellij-platform/core/src/utils/array-utils"
   },
   "dependencies": {

diff --git a/packages/example-app/src/Project/Project.tsx b/packages/example-app/src/Project/Project.tsx
@@ -69,9 +69,6 @@ export const Project = ({
                 }}
                 windows={toolWindows}
                 containerProps={shortcutHandlerProps}
-                // To make it not annoying when the whole app is a part of a bigger page. It's fine to disable focus trap,
-                // because the focusable element, the editor, fills the whole main content.
-                allowBlurOnInteractionOutside
               >
                 <FileEditor />
               </DefaultToolWindows>

diff --git a/packages/example-app/src/ProjectView/ProjectToolWindow.tsx b/packages/example-app/src/ProjectView/ProjectToolWindow.tsx
@@ -1,13 +1,13 @@
 import React from "react";
 import { useRecoilValue } from "recoil";
 import {
+  ActionButton,
   ActionDefinition,
   CommonActionId,
   DefaultToolWindow,
   PlatformIcon,
   useTreeActions,
 } from "@intellij-platform/core";
-import { Action } from "@intellij-platform/core/ActionSystem/components";
 
 import {
   projectViewTreeRefState,
@@ -33,9 +33,9 @@ export function ProjectToolWindow() {
       actions={[...actions, ...projectViewActions]}
       additionalActions={
         <>
-          <Action.Button actionId={SELECT_IN_PROJECT_VIEW} />
-          <Action.Button actionId={CommonActionId.EXPAND_ALL} />
-          <Action.Button actionId={CommonActionId.COLLAPSE_ALL} />
+          <ActionButton actionId={SELECT_IN_PROJECT_VIEW} />
+          <ActionButton actionId={CommonActionId.EXPAND_ALL} />
+          <ActionButton actionId={CommonActionId.COLLAPSE_ALL} />
         </>
       }
     >

diff --git a/packages/example-app/src/SearchEverywhere/SearchEverywherePopup.tsx b/packages/example-app/src/SearchEverywhere/SearchEverywherePopup.tsx
@@ -1,7 +1,7 @@
 import React, { useEffect, useMemo, useRef, useState } from "react";
 import { useRecoilState, useSetRecoilState } from "recoil";
 import {
-  ActionButton,
+  IconButton,
   ActionDefinition,
   ActionsProvider,
   FocusScope,
@@ -350,9 +350,9 @@ export function SearchEverywherePopup() {
                         </Tabs>
                       </div>
                       {currentTabContributor?.headerFilters}
-                      <ActionButton style={{ margin: "0 0.5rem" }} isDisabled>
+                      <IconButton style={{ margin: "0 0.5rem" }} isDisabled>
                         <PlatformIcon icon="actions/moveToLeftBottom" />
-                      </ActionButton>
+                      </IconButton>
                     </StyledHeader>
                   </Popup.Header>
                   <StyledSearchFieldContainer>

diff --git a/packages/example-app/src/VersionControl/Branches/BranchesPopup.tsx b/packages/example-app/src/VersionControl/Branches/BranchesPopup.tsx
@@ -1,8 +1,8 @@
 import path from "path";
 import React, { useState } from "react";
 import {
-  ActionButton,
-  ActionToolbar,
+  IconButton,
+  Toolbar,
   ActionTooltip,
   BalloonActionLink,
   Bounds,
@@ -108,21 +108,21 @@ export function BranchesPopup({ onClose }: { onClose: () => void }) {
           <Popup.Header hasControls>
             <StyledHeader>
               <StyledTitle>{title}</StyledTitle>
-              <ActionToolbar>
+              <Toolbar>
                 <TooltipTrigger tooltip={<ActionTooltip actionName="Fetch" />}>
-                  <ActionButton
+                  <IconButton
                     onPress={() => {
                       notImplemented();
                       onClose();
                     }}
                   >
                     <PlatformIcon icon="vcs/fetch.svg" />
-                  </ActionButton>
+                  </IconButton>
                 </TooltipTrigger>
                 <TooltipTrigger
                   tooltip={<ActionTooltip actionName="Restore Popup Size" />}
                 >
-                  <ActionButton
+                  <IconButton
                     isDisabled={branchesPopupPersistedSize === undefined}
                     onPress={() => {
                       setBranchesPopupPersistedSize(undefined);
@@ -134,9 +134,9 @@ export function BranchesPopup({ onClose }: { onClose: () => void }) {
                     }}
                   >
                     <PlatformIcon icon="general/fitContent.svg" />
-                  </ActionButton>
+                  </IconButton>
                 </TooltipTrigger>
-              </ActionToolbar>
+              </Toolbar>
             </StyledHeader>
           </Popup.Header>
         }

diff --git a/...mple-app/src/VersionControl/Changes/ChangesView/ActionButtons/ChangeListsActionButton.tsx b/...mple-app/src/VersionControl/Changes/ChangesView/ActionButtons/ChangeListsActionButton.tsx
@@ -1,11 +1,11 @@
 import React from "react";
 import {
-  ActionButtonWithMenu,
+  IconButtonWithMenu,
   PlatformIcon,
   useAction,
 } from "@intellij-platform/core";
 import { VcsActionIds } from "../../../VcsActionIds";
-import { ActionsMenu } from "@intellij-platform/core/ActionSystem/components";
+import { ActionsMenu } from "@intellij-platform/core";
 import { notNull } from "@intellij-platform/core/utils/array-utils";
 
 export const ChangeListsActionButton = (): React.ReactElement => {
@@ -18,12 +18,12 @@ export const ChangeListsActionButton = (): React.ReactElement => {
   ].filter(notNull);
 
   return (
-    <ActionButtonWithMenu
+    <IconButtonWithMenu
       renderMenu={({ menuProps }) => (
         <ActionsMenu menuProps={menuProps} actions={actions} />
       )}
     >
       <PlatformIcon icon="vcs/changelist.svg" />
-    </ActionButtonWithMenu>
+    </IconButtonWithMenu>
   );
 };
diff --git a/.../example-app/src/VersionControl/Changes/ChangesView/ActionButtons/GroupByActionButton.tsx b/.../example-app/src/VersionControl/Changes/ChangesView/ActionButtons/GroupByActionButton.tsx
@@ -6,7 +6,7 @@ import {
   GroupingIds,
 } from "../ChangesView.state";
 import {
-  ActionButtonWithMenu,
+  IconButtonWithMenu,
   Item,
   Menu,
   PlatformIcon,
@@ -27,7 +27,7 @@ export const GroupByActionButton = (): React.ReactElement => {
   );
 
   return (
-    <ActionButtonWithMenu
+    <IconButtonWithMenu
       renderMenu={({ menuProps }) => (
         <Menu
           {...menuProps}
@@ -52,6 +52,6 @@ export const GroupByActionButton = (): React.ReactElement => {
       )}
     >
       <PlatformIcon icon="actions/groupBy.svg" />
-    </ActionButtonWithMenu>
+    </IconButtonWithMenu>
   );
 };
diff --git a/...mple-app/src/VersionControl/Changes/ChangesView/ActionButtons/ViewOptionsActionButton.tsx b/...mple-app/src/VersionControl/Changes/ChangesView/ActionButtons/ViewOptionsActionButton.tsx
@@ -5,7 +5,7 @@ import {
   showRelatedFilesState,
 } from "../ChangesView.state";
 import {
-  ActionButtonWithMenu,
+  IconButtonWithMenu,
   Item,
   Menu,
   PlatformIcon,
@@ -21,7 +21,7 @@ export const ViewOptionsActionButton = (): React.ReactElement => {
   const viewOptions = { showRelatedFiles, showIgnoredFiles };
 
   return (
-    <ActionButtonWithMenu
+    <IconButtonWithMenu
       renderMenu={({ menuProps }) => (
         <Menu
           {...menuProps}
@@ -45,6 +45,6 @@ export const ViewOptionsActionButton = (): React.ReactElement => {
       )}
     >
       <PlatformIcon icon="actions/show.svg" />
-    </ActionButtonWithMenu>
+    </IconButtonWithMenu>
   );
 };
diff --git a/packages/example-app/src/VersionControl/Changes/ChangesView/ChangesViewToolbar.tsx b/packages/example-app/src/VersionControl/Changes/ChangesView/ChangesViewToolbar.tsx
@@ -1,37 +1,37 @@
 import {
-  ActionToolbar,
-  ActionToolbarSeparator,
+  Toolbar,
+  ToolbarSeparator,
   ActionTooltip,
   CommonActionId,
   TooltipTrigger,
+  ActionButton,
 } from "@intellij-platform/core";
 import { ChangeListsActionButton } from "./ActionButtons/ChangeListsActionButton";
 import { GroupByActionButton } from "./ActionButtons/GroupByActionButton";
 import { ViewOptionsActionButton } from "./ActionButtons/ViewOptionsActionButton";
 import React from "react";
-import { Action } from "@intellij-platform/core/ActionSystem/components";
 
 import { VcsActionIds } from "../../VcsActionIds";
 
 export function ChangesViewToolbar() {
   return (
-    <ActionToolbar hasBorder>
-      <Action.Button actionId={VcsActionIds.REFRESH} />
-      <Action.Button actionId={VcsActionIds.ROLLBACK} />
-      <Action.Button actionId={VcsActionIds.SHOW_DIFF} />
+    <Toolbar hasBorder>
+      <ActionButton actionId={VcsActionIds.REFRESH} />
+      <ActionButton actionId={VcsActionIds.ROLLBACK} />
+      <ActionButton actionId={VcsActionIds.SHOW_DIFF} />
       <TooltipTrigger tooltip={<ActionTooltip actionName="Changelists" />}>
         <ChangeListsActionButton />
       </TooltipTrigger>
-      <Action.Button actionId={VcsActionIds.SHELVE_SILENTLY} />
-      <ActionToolbarSeparator />
+      <ActionButton actionId={VcsActionIds.SHELVE_SILENTLY} />
+      <ToolbarSeparator />
       <TooltipTrigger tooltip={<ActionTooltip actionName="Group By" />}>
         <GroupByActionButton />
       </TooltipTrigger>
       <TooltipTrigger tooltip={<ActionTooltip actionName="View Options" />}>
         <ViewOptionsActionButton />
       </TooltipTrigger>
-      <Action.Button actionId={CommonActionId.EXPAND_ALL} />
-      <Action.Button actionId={CommonActionId.COLLAPSE_ALL} />
-    </ActionToolbar>
+      <ActionButton actionId={CommonActionId.EXPAND_ALL} />
+      <ActionButton actionId={CommonActionId.COLLAPSE_ALL} />
+    </Toolbar>
   );
 }
diff --git a/packages/example-app/src/VersionControl/Changes/ChangesView/ChangesViewTreeContextMenu.tsx b/packages/example-app/src/VersionControl/Changes/ChangesView/ChangesViewTreeContextMenu.tsx
@@ -3,7 +3,7 @@ import { selectedKeysState } from "./ChangesView.state";
 import { DividerItem, useAction } from "@intellij-platform/core";
 import React from "react";
 import { VcsActionIds } from "../../VcsActionIds";
-import { ActionsMenu } from "@intellij-platform/core/ActionSystem/components";
+import { ActionsMenu } from "@intellij-platform/core";
 import { notNull } from "@intellij-platform/core/utils/array-utils";
 
 export const ChangesViewTreeContextMenu = () => {

diff --git a/packages/example-app/src/VersionControl/Changes/ChangesView/CommitActionsRow.tsx b/packages/example-app/src/VersionControl/Changes/ChangesView/CommitActionsRow.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import { useRecoilState, useRecoilValue } from "recoil";
 import {
-  ActionButton,
+  IconButton,
   ActionHelpTooltip,
   ActionTooltip,
   Checkbox,
@@ -68,16 +68,16 @@ export function CommitActionsRow() {
       <TooltipTrigger
         tooltip={<ActionTooltip actionName="Show Commit Options" />}
       >
-        <ActionButton onPress={notImplemented}>
+        <IconButton onPress={notImplemented}>
           <PlatformIcon icon="general/gear.svg" />
-        </ActionButton>
+        </IconButton>
       </TooltipTrigger>
       <TooltipTrigger
         tooltip={<ActionTooltip actionName="Commit Message History" />}
       >
-        <ActionButton isDisabled onPress={notImplemented}>
+        <IconButton isDisabled onPress={notImplemented}>
           <PlatformIcon icon="vcs/historyInline.svg" />
-        </ActionButton>
+        </IconButton>
       </TooltipTrigger>
       <StyledChangesSummaryContainer>
         <ChangesViewChangesSummary />