Please select the teams you want to deploy this software to.
-
Cancel
diff --git a/ee/server/service/vpp.go b/ee/server/service/vpp.go
index dc1c1c461e74..453bdcee132d 100644
--- a/ee/server/service/vpp.go
+++ b/ee/server/service/vpp.go
@@ -86,6 +86,12 @@ func (svc *Service) BatchAssociateVPPApps(ctx context.Context, teamName string,
}}...)
}
+ if dryRun {
+ // On dry runs return early because the VPP token might not exist yet
+ // and we don't want to apply the VPP apps.
+ return nil
+ }
+
var vppAppTeams []fleet.VPPAppTeam
// Don't check for token if we're only disassociating assets
if len(payloads) > 0 {
@@ -136,35 +142,33 @@ func (svc *Service) BatchAssociateVPPApps(ctx context.Context, teamName string,
}
}
- if !dryRun {
- if len(vppAppTeams) > 0 {
- apps, err := getVPPAppsMetadata(ctx, vppAppTeams)
- if err != nil {
- return ctxerr.Wrap(ctx, err, "refreshing VPP app metadata")
- }
- if len(apps) == 0 {
- return fleet.NewInvalidArgumentError("app_store_apps",
- "no valid apps found matching the provided app store IDs and platforms")
- }
-
- if err := svc.ds.BatchInsertVPPApps(ctx, apps); err != nil {
- return ctxerr.Wrap(ctx, err, "inserting vpp app metadata")
- }
- // Filter out the apps with invalid platforms
- if len(apps) != len(vppAppTeams) {
- vppAppTeams = make([]fleet.VPPAppTeam, 0, len(apps))
- for _, app := range apps {
- vppAppTeams = append(vppAppTeams, app.VPPAppTeam)
- }
- }
+ if len(vppAppTeams) > 0 {
+ apps, err := getVPPAppsMetadata(ctx, vppAppTeams)
+ if err != nil {
+ return ctxerr.Wrap(ctx, err, "refreshing VPP app metadata")
+ }
+ if len(apps) == 0 {
+ return fleet.NewInvalidArgumentError("app_store_apps",
+ "no valid apps found matching the provided app store IDs and platforms")
+ }
+ if err := svc.ds.BatchInsertVPPApps(ctx, apps); err != nil {
+ return ctxerr.Wrap(ctx, err, "inserting vpp app metadata")
}
- if err := svc.ds.SetTeamVPPApps(ctx, &team.ID, vppAppTeams); err != nil {
- if errors.Is(err, sql.ErrNoRows) {
- return fleet.NewUserMessageError(ctxerr.Wrap(ctx, err, "no vpp token to set team vpp assets"), http.StatusUnprocessableEntity)
+ // Filter out the apps with invalid platforms
+ if len(apps) != len(vppAppTeams) {
+ vppAppTeams = make([]fleet.VPPAppTeam, 0, len(apps))
+ for _, app := range apps {
+ vppAppTeams = append(vppAppTeams, app.VPPAppTeam)
}
- return ctxerr.Wrap(ctx, err, "set team vpp assets")
}
+
+ }
+ if err := svc.ds.SetTeamVPPApps(ctx, &team.ID, vppAppTeams); err != nil {
+ if errors.Is(err, sql.ErrNoRows) {
+ return fleet.NewUserMessageError(ctxerr.Wrap(ctx, err, "no vpp token to set team vpp assets"), http.StatusUnprocessableEntity)
+ }
+ return ctxerr.Wrap(ctx, err, "set team vpp assets")
}
return nil
diff --git a/frontend/components/ActionsDropdown/ActionsDropdown.tests.tsx b/frontend/components/ActionsDropdown/ActionsDropdown.tests.tsx
new file mode 100644
index 000000000000..a1f7a71c14c5
--- /dev/null
+++ b/frontend/components/ActionsDropdown/ActionsDropdown.tests.tsx
@@ -0,0 +1,92 @@
+import React from "react";
+import { screen } from "@testing-library/react";
+import { renderWithSetup } from "test/test-utils";
+
+import ActionsDropdown from "./ActionsDropdown";
+
+const DROPDOWN_OPTIONS = [
+ { disabled: false, label: "Edit", value: "edit-query" },
+ { disabled: false, label: "Show query", value: "show-query" },
+ { disabled: true, label: "Delete", value: "delete-query" },
+];
+const PLACEHOLDER = "Actions";
+const ON_CHANGE = (value: string) => {
+ console.log(value);
+};
+
+describe("Actions dropdown", () => {
+ it("renders dropdown placeholder and options", async () => {
+ const { user } = renderWithSetup(
+
+ );
+
+ await user.click(screen.getByText("Actions"));
+
+ expect(screen.queryAllByText(/edit/i)[1]).toBeInTheDocument(); // Aria shows Edit twice since it's focused
+ expect(screen.queryByText(/show query/i)).toBeInTheDocument();
+ expect(screen.queryByText(/delete/i)).toBeInTheDocument();
+ });
+
+ it("renders dropdown as disabled when disabled prop is true", () => {
+ renderWithSetup(
+
+ );
+ expect(screen.getByRole("combobox")).toBeDisabled();
+ });
+
+ it("calls onChange with correct value when an option is selected", async () => {
+ const mockOnChange = jest.fn();
+ const { user } = renderWithSetup(
+
+ );
+
+ await user.click(screen.getByText("Actions"));
+ await user.click(screen.getByText("Edit"));
+
+ expect(mockOnChange).toHaveBeenCalledWith("edit-query");
+ });
+
+ it("renders disabled option as non-selectable", async () => {
+ const { user } = renderWithSetup(
+
+ );
+
+ await user.click(screen.getByText("Actions"));
+ const deleteOption = screen.getByText("Delete");
+
+ expect(deleteOption).toHaveAttribute("aria-disabled", "true");
+ });
+
+ it("closes the dropdown when clicking outside", async () => {
+ const { user } = renderWithSetup(
+
+ );
+
+ await user.click(screen.getByText("Actions"));
+ expect(screen.getByText("Edit")).toBeVisible();
+
+ await user.click(document.body);
+ expect(screen.queryByText(/edit/i)).not.toBeInTheDocument();
+ });
+});
diff --git a/frontend/components/ActionsDropdown/ActionsDropdown.tsx b/frontend/components/ActionsDropdown/ActionsDropdown.tsx
new file mode 100644
index 000000000000..9e068bf735d6
--- /dev/null
+++ b/frontend/components/ActionsDropdown/ActionsDropdown.tsx
@@ -0,0 +1,252 @@
+import React from "react";
+import Select, {
+ StylesConfig,
+ DropdownIndicatorProps,
+ OptionProps,
+ components,
+} from "react-select-5";
+
+import { PADDING } from "styles/var/padding";
+import { COLORS } from "styles/var/colors";
+import classnames from "classnames";
+
+import { IDropdownOption } from "interfaces/dropdownOption";
+
+import Icon from "components/Icon";
+import DropdownOptionTooltipWrapper from "components/forms/fields/Dropdown/DropdownOptionTooltipWrapper";
+
+const baseClass = "actions-dropdown";
+
+interface IActionsDropdownProps {
+ options: IDropdownOption[];
+ placeholder: string;
+ onChange: (value: string) => void;
+ disabled?: boolean;
+ isSearchable?: boolean;
+ className?: string;
+ menuAlign?: "right" | "left" | "default";
+}
+
+const getOptionBackgroundColor = (state: any) => {
+ return state.isSelected || state.isFocused
+ ? COLORS["ui-vibrant-blue-10"]
+ : "transparent";
+};
+
+const getLeftMenuAlign = (menuAlign: "right" | "left" | "default") => {
+ switch (menuAlign) {
+ case "right":
+ return "auto";
+ case "left":
+ return "0";
+ default:
+ return "-12px";
+ }
+};
+
+const getRightMenuAlign = (menuAlign: "right" | "left" | "default") => {
+ switch (menuAlign) {
+ case "right":
+ return "0";
+ default:
+ return "undefined";
+ }
+};
+
+const CustomDropdownIndicator = (
+ props: DropdownIndicatorProps
+) => {
+ const { isFocused, selectProps } = props;
+ // no access to hover state here from react-select so that is done in the scss
+ // file of ActionsDropdown.
+ const color =
+ isFocused || selectProps.menuIsOpen
+ ? "core-fleet-blue"
+ : "core-fleet-black";
+
+ return (
+
+
+
+ );
+};
+
+const CustomOption: React.FC> = (props) => {
+ const { innerProps, innerRef, data, isDisabled } = props;
+
+ const optionContent = (
+
+ {data.label}
+ {data.helpText && (
+ {data.helpText}
+ )}
+
+ );
+
+ return (
+
+ {data.tooltipContent ? (
+
+ {optionContent}
+
+ ) : (
+ optionContent
+ )}
+
+ );
+};
+
+const ActionsDropdown = ({
+ options,
+ placeholder,
+ onChange,
+ disabled,
+ isSearchable = false,
+ className,
+ menuAlign = "default",
+}: IActionsDropdownProps): JSX.Element => {
+ const dropdownClassnames = classnames(baseClass, className);
+
+ const handleChange = (newValue: IDropdownOption | null) => {
+ if (newValue) {
+ onChange(newValue.value.toString());
+ }
+ };
+
+ const customStyles: StylesConfig = {
+ container: (provided) => ({
+ ...provided,
+ width: "80px",
+ }),
+ control: (provided, state) => ({
+ ...provided,
+ display: "flex",
+ flexDirection: "row",
+ width: "max-content",
+ padding: "8px 0",
+ backgroundColor: "initial",
+ border: 0,
+ boxShadow: "none",
+ cursor: "pointer",
+ "&:hover": {
+ boxShadow: "none",
+ ".actions-dropdown-select__placeholder": {
+ color: COLORS["core-vibrant-blue-over"],
+ },
+ ".actions-dropdown-select__indicator path": {
+ stroke: COLORS["core-vibrant-blue-over"],
+ },
+ },
+ "&:active .actions-dropdown-select__indicator path": {
+ stroke: COLORS["core-vibrant-blue-down"],
+ },
+ // TODO: Figure out a way to apply separate &:focus-visible styling
+ // Currently only relying on &:focus styling for tabbing through app
+ ...(state.menuIsOpen && {
+ ".actions-dropdown-select__indicator svg": {
+ transform: "rotate(180deg)",
+ transition: "transform 0.25s ease",
+ },
+ }),
+ }),
+ placeholder: (provided, state) => ({
+ ...provided,
+ color: state.isFocused
+ ? COLORS["core-fleet-blue"]
+ : COLORS["core-fleet-black"],
+ fontSize: "14px",
+ lineHeight: "normal",
+ paddingLeft: 0,
+ marginTop: "1px",
+ }),
+ dropdownIndicator: (provided) => ({
+ ...provided,
+ display: "flex",
+ padding: "2px",
+ svg: {
+ transition: "transform 0.25s ease",
+ },
+ }),
+ menu: (provided) => ({
+ ...provided,
+ boxShadow: "0 2px 6px rgba(0, 0, 0, 0.1)",
+ borderRadius: "4px",
+ zIndex: 6,
+ overflow: "hidden",
+ border: 0,
+ marginTop: 0,
+ minWidth: "158px",
+ maxHeight: "220px",
+ position: "absolute",
+ left: getLeftMenuAlign(menuAlign),
+ right: getRightMenuAlign(menuAlign),
+ animation: "fade-in 150ms ease-out",
+ }),
+ menuList: (provided) => ({
+ ...provided,
+ padding: PADDING["pad-small"],
+ }),
+ valueContainer: (provided) => ({
+ ...provided,
+ padding: 0,
+ }),
+ option: (provided, state) => ({
+ ...provided,
+ padding: "10px 8px",
+ fontSize: "14px",
+ backgroundColor: getOptionBackgroundColor(state),
+ "&:hover": {
+ backgroundColor: state.isDisabled
+ ? "transparent"
+ : COLORS["ui-vibrant-blue-10"],
+ },
+ "&:active": {
+ backgroundColor: state.isDisabled
+ ? "transparent"
+ : COLORS["ui-vibrant-blue-10"],
+ },
+ ...(state.isDisabled && {
+ color: COLORS["ui-fleet-black-50"],
+ fontStyle: "italic",
+ // pointerEvents: "none", // Prevents any mouse interaction
+ }),
+ }),
+ };
+
+ return (
+
+
+ options={options}
+ placeholder={placeholder}
+ onChange={handleChange}
+ isDisabled={disabled}
+ isSearchable={isSearchable}
+ styles={customStyles}
+ components={{
+ DropdownIndicator: CustomDropdownIndicator,
+ IndicatorSeparator: () => null,
+ Option: CustomOption,
+ SingleValue: () => null, // Doesn't replace placeholder text with selected text
+ // Note: react-select doesn't support skipping disabled options when keyboarding through
+ }}
+ controlShouldRenderValue={false} // Doesn't change placeholder text to selected text
+ isOptionSelected={() => false} // Hides any styling on selected option
+ className={dropdownClassnames}
+ classNamePrefix={`${baseClass}-select`}
+ isOptionDisabled={(option) => !!option.disabled}
+ />
+
+ );
+};
+
+export default ActionsDropdown;
diff --git a/frontend/components/ActionsDropdown/_styles.scss b/frontend/components/ActionsDropdown/_styles.scss
new file mode 100644
index 000000000000..ba8549808dd8
--- /dev/null
+++ b/frontend/components/ActionsDropdown/_styles.scss
@@ -0,0 +1,6 @@
+// All styling in customStyles part of react-select-5
+.actions-dropdown-select__control {
+ &:focus-visible {
+ background-color: $core-fleet-blue;
+ }
+}
diff --git a/frontend/components/ActionsDropdown/index.ts b/frontend/components/ActionsDropdown/index.ts
new file mode 100644
index 000000000000..92d81527a2c7
--- /dev/null
+++ b/frontend/components/ActionsDropdown/index.ts
@@ -0,0 +1 @@
+export { default } from "./ActionsDropdown";
diff --git a/frontend/components/Editor/Editor.tsx b/frontend/components/Editor/Editor.tsx
index b724a296c39e..0ad54be1cf68 100644
--- a/frontend/components/Editor/Editor.tsx
+++ b/frontend/components/Editor/Editor.tsx
@@ -2,6 +2,7 @@ import classnames from "classnames";
import TooltipWrapper from "components/TooltipWrapper";
import React, { ReactNode } from "react";
import AceEditor from "react-ace";
+import { IAceEditor } from "react-ace/lib/types";
const baseClass = "editor";
@@ -66,6 +67,19 @@ const Editor = ({
[`${baseClass}__error`]: !!error,
});
+ const onLoadHandler = (editor: IAceEditor) => {
+ // Lose focus using the Escape key so you can Tab forward (or Shift+Tab backwards) through app
+ editor.commands.addCommand({
+ name: "escapeToBlur",
+ bindKey: { win: "Esc", mac: "Esc" },
+ exec: (aceEditor) => {
+ aceEditor.blur(); // Lose focus from the editor
+ return true;
+ },
+ readOnly: true,
+ });
+ };
+
const renderLabel = () => {
const labelText = error || label;
const labelClassName = classnames(`${baseClass}__label`, {
@@ -117,6 +131,7 @@ const Editor = ({
tabSize={2}
focus={focus}
onChange={onChange}
+ onLoad={onLoadHandler}
/>
{renderHelpText()}
diff --git a/frontend/components/FileUploader/FileUploader.tsx b/frontend/components/FileUploader/FileUploader.tsx
index 6ba3bfa42f02..9951ae3509a0 100644
--- a/frontend/components/FileUploader/FileUploader.tsx
+++ b/frontend/components/FileUploader/FileUploader.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useState, useRef } from "react";
import classnames from "classnames";
import Button from "components/buttons/Button";
@@ -74,18 +74,32 @@ export const FileUploader = ({
fileDetails,
}: IFileUploaderProps) => {
const [isFileSelected, setIsFileSelected] = useState(!!fileDetails);
+ const fileInputRef = useRef