Fleet UI: Remove creating an operating system policy in the UI (#14799)

changes/14643-retire-creating-os-policy

@@ -0,0 +1 @@
+- Retired creating OS policy in the UI from a host's operating system

frontend/pages/hosts/details/HostDetailsPage/HostDetailsPage.tsx

@@ -18,7 +18,6 @@ import hostAPI from "services/entities/hosts";
 import queryAPI from "services/entities/queries";
 import teamAPI, { ILoadTeamsResponse } from "services/entities/teams";
 import { AppContext } from "context/app";
-import { PolicyContext } from "context/policy";
 import { QueryContext } from "context/query";
 import { NotificationContext } from "context/notification";
 import {
@@ -67,13 +66,10 @@ import PoliciesCard from "../cards/Policies";
 import ScheduleCard from "../cards/Schedule";
 import PacksCard from "../cards/Packs";
 import PolicyDetailsModal from "../cards/Policies/HostPoliciesTable/PolicyDetailsModal";
-import OSPolicyModal from "./modals/OSPolicyModal";
 import UnenrollMdmModal from "./modals/UnenrollMdmModal";
 import TransferHostModal from "../../components/TransferHostModal";
 import DeleteHostModal from "../../components/DeleteHostModal";
 
-import parseOsVersion from "./modals/OSPolicyModal/helpers";
-
 import DiskEncryptionKeyModal from "./modals/DiskEncryptionKeyModal";
 import HostActionDropdown from "./HostActionsDropdown/HostActionsDropdown";
 import MacSettingsModal from "../MacSettingsModal";
@@ -137,14 +133,6 @@ const HostDetailsPage = ({
     availableTeams,
     setCurrentTeam,
   } = useContext(AppContext);
-  const {
-    setLastEditedQueryName,
-    setLastEditedQueryDescription,
-    setLastEditedQueryBody,
-    setLastEditedQueryResolution,
-    setLastEditedQueryCritical,
-    setPolicyTeamId,
-  } = useContext(PolicyContext);
   const { setSelectedQueryTargetsByType } = useContext(QueryContext);
   const { renderFlash } = useContext(NotificationContext);
 
@@ -154,7 +142,6 @@ const HostDetailsPage = ({
   const [showTransferHostModal, setShowTransferHostModal] = useState(false);
   const [showSelectQueryModal, setShowSelectQueryModal] = useState(false);
   const [showPolicyDetailsModal, setPolicyDetailsModal] = useState(false);
-  const [showOSPolicyModal, setShowOSPolicyModal] = useState(false);
   const [showMacSettingsModal, setShowMacSettingsModal] = useState(false);
   const [showUnenrollMdmModal, setShowUnenrollMdmModal] = useState(false);
   const [showDiskEncryptionModal, setShowDiskEncryptionModal] = useState(false);
@@ -413,8 +400,6 @@ const HostDetailsPage = ({
     ])
   );
 
-  const [osPolicyLabel, osPolicyQuery] = parseOsVersion(host?.os_version);
-
   const aboutData = normalizeEmptyValues(
     pick(host, [
       "seen_time",
@@ -446,10 +431,6 @@ const HostDetailsPage = ({
     [showPolicyDetailsModal, setPolicyDetailsModal, setSelectedPolicy]
   );
 
-  const toggleOSPolicyModal = useCallback(() => {
-    setShowOSPolicyModal(!showOSPolicyModal);
-  }, [showOSPolicyModal, setShowOSPolicyModal]);
-
   const toggleMacSettingsModal = useCallback(() => {
     setShowMacSettingsModal(!showMacSettingsModal);
   }, [showMacSettingsModal, setShowMacSettingsModal]);
@@ -467,23 +448,6 @@ const HostDetailsPage = ({
     setShowUnenrollMdmModal(!showUnenrollMdmModal);
   }, [showUnenrollMdmModal, setShowUnenrollMdmModal]);
 
-  const onCreateNewPolicy = () => {
-    const { NEW_POLICY } = PATHS;
-    host?.team_name
-      ? setLastEditedQueryName(`${osPolicyLabel} (${host.team_name})`)
-      : setLastEditedQueryName(osPolicyLabel);
-    setPolicyTeamId(host?.team_id ? host?.team_id : 0);
-    setLastEditedQueryDescription(
-      "Checks to see if the required minimum operating system version is installed."
-    );
-    setLastEditedQueryBody(osPolicyQuery);
-    setLastEditedQueryResolution("");
-    setLastEditedQueryCritical(false);
-    router.replace(
-      `${NEW_POLICY}${host?.team_id ? `?team_id=${host?.team_id}` : ""}`
-    );
-  };
-
   const onDestroyHost = async () => {
     if (host) {
       setIsUpdatingHost(true);
@@ -536,7 +500,6 @@ const HostDetailsPage = ({
   };
 
   const onQueryHostCustom = () => {
-    setLastEditedQueryBody(DEFAULT_QUERY.query);
     setSelectedQueryTargetsByType(DEFAULT_TARGETS_BY_TYPE);
     router.push(
       PATHS.NEW_QUERY() + TAGGED_TEMPLATES.queryByHostRoute(host?.id)
@@ -738,7 +701,6 @@ const HostDetailsPage = ({
           isPremiumTier={isPremiumTier}
           isSandboxMode={isSandboxMode}
           isOnlyObserver={isOnlyObserver}
-          toggleOSPolicyModal={toggleOSPolicyModal}
           toggleMacSettingsModal={toggleMacSettingsModal}
           toggleBootstrapPackageModal={toggleBootstrapPackageModal}
           hostMdmProfiles={host?.mdm.profiles ?? []}
@@ -871,16 +833,6 @@ const HostDetailsPage = ({
             policy={selectedPolicy}
           />
         )}
-        {showOSPolicyModal && (
-          <OSPolicyModal
-            onCancel={() => setShowOSPolicyModal(false)}
-            onCreateNewPolicy={onCreateNewPolicy}
-            osVersion={host?.os_version}
-            detailsUpdatedAt={host?.detail_updated_at}
-            osPolicy={osPolicyQuery}
-            osPolicyLabel={osPolicyLabel}
-          />
-        )}
         {showMacSettingsModal && (
           <MacSettingsModal
             platform={host?.platform}

frontend/pages/hosts/details/HostDetailsPage/modals/OSPolicyModal/OSPolicyModal.tsx

@@ -1,108 +0,0 @@
-import React, { useState } from "react";
-
-import { humanHostDetailUpdated } from "utilities/helpers";
-import { stringToClipboard } from "utilities/copy_text";
-
-// @ts-ignore
-import InputField from "components/forms/fields/InputField";
-import Modal from "components/Modal";
-import TooltipWrapper from "components/TooltipWrapper";
-import Button from "components/buttons/Button";
-import Icon from "components/Icon/Icon";
-
-import { ITeam } from "interfaces/team";
-
-interface IOSPolicyModal {
-  onCreateNewPolicy: (team: ITeam) => void;
-  onCancel: () => void;
-  osVersion?: string;
-  detailsUpdatedAt?: string;
-  osPolicy: string;
-  osPolicyLabel: string;
-}
-
-const baseClass = "os-policy-modal";
-
-const OSPolicyModal = ({
-  onCancel,
-  onCreateNewPolicy,
-  osVersion,
-  detailsUpdatedAt,
-  osPolicy,
-  osPolicyLabel,
-}: IOSPolicyModal): JSX.Element => {
-  const [copyMessage, setCopyMessage] = useState("");
-
-  const renderOsPolicyLabel = () => {
-    const onCopyOsPolicy = (evt: React.MouseEvent) => {
-      evt.preventDefault();
-
-      stringToClipboard(osPolicy)
-        .then(() => setCopyMessage("Copied!"))
-        .catch(() => setCopyMessage("Copy failed"));
-
-      // Clear message after 1 second
-      setTimeout(() => setCopyMessage(""), 1000);
-
-      return false;
-    };
-
-    return (
-      <div>
-        <span className={`${baseClass}__cta`}>{osPolicyLabel}</span>{" "}
-        <span className={`${baseClass}__name`}>
-          <span className="buttons">
-            {copyMessage && (
-              <span
-                className={`${baseClass}__copy-message`}
-              >{`${copyMessage} `}</span>
-            )}
-            <Button
-              variant="unstyled"
-              className={`${baseClass}__os-policy-copy-icon`}
-              onClick={onCopyOsPolicy}
-            >
-              <Icon name="copy" />
-            </Button>
-          </span>
-        </span>
-      </div>
-    );
-  };
-
-  return (
-    <Modal title="Operating system" onExit={onCancel} className={baseClass}>
-      <>
-        <p>
-          <span className={`${baseClass}__os-modal-title`}>{osVersion} </span>
-          <span className={`${baseClass}__os-modal-updated`}>
-            Reported {humanHostDetailUpdated(detailsUpdatedAt)}
-          </span>
-        </p>
-        <span className={`${baseClass}__os-modal-example-title`}>
-          <TooltipWrapper tipContent="A policy is a yes or no question you can ask all your devices.">
-            Example policy:
-          </TooltipWrapper>
-        </span>
-        <InputField
-          disabled
-          inputWrapperClass={`${baseClass}__os-policy`}
-          name="os-policy"
-          label={renderOsPolicyLabel()}
-          type={"textarea"}
-          value={osPolicy}
-        />
-        <div className="modal-cta-wrap">
-          <Button onClick={onCreateNewPolicy} variant="brand">
-            Create new policy
-          </Button>
-          <Button onClick={onCancel} variant="inverse">
-            Close
-          </Button>
-        </div>
-      </>
-    </Modal>
-  );
-};
-
-export default OSPolicyModal;

frontend/pages/hosts/details/HostDetailsPage/modals/OSPolicyModal/_styles.scss

@@ -1,48 +0,0 @@
-.os-policy-modal {
-  &__os-modal-title {
-    padding-right: $pad-medium;
-    font-size: $medium;
-    font-weight: $bold;
-  }
-  &__os-modal-updated {
-    font-style: italic;
-  }
-  &__os-modal-example-title {
-    font-size: $x-small;
-    font-weight: $bold;
-  }
-  &__os-policy {
-    padding-top: $pad-medium;
-
-    .form-field__label {
-      font-weight: normal;
-    }
-    #os-policy {
-      color: $core-fleet-purple;
-      line-height: 20px;
-      font-size: $x-small;
-      font-family: "SourceCodePro", $monospace;
-      min-height: 55px;
-      padding-right: $pad-xxlarge;
-    }
-  }
-
-  &__name {
-    .buttons {
-      margin-top: 20px;
-      right: 45px;
-      height: 20px; // Fix height diff of copy message
-    }
-  }
-  &__os-policy-copy-icon {
-    margin-left: $pad-small;
-    margin-right: $pad-medium;
-  }
-
-  &__copy-message {
-    background-color: $ui-light-grey;
-    border: solid 1px #e2e4ea;
-    border-radius: $border-radius-xlarge;
-    padding: 2px 6px;
-  }
-}

frontend/pages/hosts/details/HostDetailsPage/modals/OSPolicyModal/helpers.ts

@@ -1,49 +0,0 @@
-/**
- * parseOsVersion accepts an `os_version` string (e.g., "Ubuntu 16.04.7" or "CentOS 8.3.2011") and
- * returns the label text and SQL strings expected by the `OSPolicyModal`.
- */
-export const parseOsVersion = (os_version = ""): string[] => {
-  let name = "";
-  let version = "";
-
-  if (os_version.startsWith("Ubuntu")) {
-    // Ubuntu `os_version` may contain additional text after the point release (e.g., "Ubuntu
-    // 16.04.7 LTS")
-    name = "Ubuntu";
-    version = os_version
-      .replace("Ubuntu ", "")
-      .slice(0, os_version.indexOf(" ") + 1)
-      .trim();
-  } else {
-    name = os_version.slice(0, os_version.lastIndexOf(" "));
-    version = os_version.slice(os_version.lastIndexOf(" ") + 1);
-  }
-
-  const policyLabel = `Is ${name}, version ${version} or later, installed?`;
-  let policyQuery = "";
-
-  if (name.includes("Windows")) {
-    // Windows query is different from Darwin and Linux
-    policyQuery = `SELECT 1 from os_version WHERE instr(lower(name), '${name.toLowerCase()}') AND (SELECT data FROM registry WHERE path = 'HKEY_LOCAL_MACHINE\\SOFTWARE\\Microsoft\\Windows NT\\CurrentVersion\\DisplayVersion' LIMIT 1) >= '${version}'`;
-
-    return [policyLabel, policyQuery];
-  }
-
-  // Each component of the point release must be compared as a number because simple string comparisons
-  // yield unexpected results (e.g., the string "10.0.0" is considered less than "9.0.0")
-  const [major, minor, patch] = version
-    .split(".")
-    .map((str) => parseInt(str, 10) || 0);
-
-  policyQuery = `SELECT 1 from os_version WHERE instr(lower(name), '${name.toLowerCase()}') AND (major > ${major} OR (major = ${major} AND (minor > ${minor} OR (minor = ${minor} AND ${
-    // For Ubuntu, the osquery `patch` field is not updated so we need to parse the `version` string
-    // using more complicated SQLite dialect
-    name !== "Ubuntu"
-      ? `patch >= ${patch}`
-      : `cast(replace(substr(substr(version, instr(version, '.')+1), instr(substr(version, instr(version, '.')+1), '.')+1), substr(version, instr(version, ' ')), '') as integer) >= ${patch}`
-  }))));`;
-
-  return [policyLabel, policyQuery];
-};
-
-export default parseOsVersion;

frontend/pages/hosts/details/HostDetailsPage/modals/OSPolicyModal/index.ts

@@ -1 +0,0 @@
-export { default } from "./OSPolicyModal";

frontend/pages/hosts/details/cards/HostSummary/HostSummary.tsx

@@ -42,7 +42,6 @@ interface IHostSummaryProps {
   isPremiumTier?: boolean;
   isSandboxMode?: boolean;
   isOnlyObserver?: boolean;
-  toggleOSPolicyModal?: () => void;
   toggleMacSettingsModal?: () => void;
   toggleBootstrapPackageModal?: () => void;
   hostMdmProfiles?: IHostMdmProfile[];
@@ -63,7 +62,6 @@ const HostSummary = ({
   isPremiumTier,
   isSandboxMode = false,
   isOnlyObserver,
-  toggleOSPolicyModal,
   toggleMacSettingsModal,
   toggleBootstrapPackageModal,
   hostMdmProfiles,
@@ -277,19 +275,7 @@ const HostSummary = ({
         </div>
         <div className="info-flex__item info-flex__item--title">
           <span className="info-flex__header">Operating system</span>
-          <span className="info-flex__data">
+          <span className="info-flex__data">{titleData.os_version}</span>
-            {isOnlyObserver || deviceUser ? (
-              `${titleData.os_version}`
-            ) : (
-              <Button
-                onClick={() => toggleOSPolicyModal?.()}
-                variant="text-link"
-                className={`${baseClass}__os-policy-button`}
-              >
-                {titleData.os_version}
-              </Button>
-            )}
-          </span>
         </div>
         <div className="info-flex__item info-flex__item--title">
           <span className="info-flex__header">Osquery</span>