Revert "Handle machine types with region-varying hardware [SVC-3814] (#1672)" (#1677)

This reverts commit b6f7fcc.

Author: erosdome

package-lock.json

@@ -45,7 +45,7 @@
     "knip": "knip"
   },
   "dependencies": {
-    "@bitrise/bitkit": "^13.318.0",
+    "@bitrise/bitkit": "^13.314.0",
     "@dagrejs/dagre": "^1.1.5",
     "@datadog/browser-rum": "^6.23.0",
     "@datadog/browser-rum-react": "^6.23.0",

package.json

@@ -1,18 +1,8 @@
-import {
-  Avatar,
-  Box,
-  BoxProps,
-  Dropdown,
-  DropdownDetailedOption,
-  DropdownGroup,
-  Text,
-  Toggletip,
-  TypeIconName,
-} from '@bitrise/bitkit';
-import { ReactNode, useMemo } from 'react';
+import { Avatar, Box, Dropdown, DropdownDetailedOption, DropdownGroup, Toggletip, TypeIconName } from '@bitrise/bitkit';
+import { ReactNode } from 'react';
 
-import { MachineRegionName, MachineTypeOption, MachineTypeOptionGroup } from '@/core/models/StackAndMachine';
-import { doesHardwareVaryByRegion, MachineTypeWithValue } from '@/core/services/StackAndMachineService';
+import { MachineTypeOption, MachineTypeOptionGroup } from '@/core/models/StackAndMachine';
+import { MachineTypeWithValue } from '@/core/services/StackAndMachineService';
 
 const getIconName = (osId?: string): TypeIconName | undefined => {
   switch (osId) {
@@ -26,62 +16,34 @@ const getIconName = (osId?: string): TypeIconName | undefined => {
   }
 };
 
-const renderOptions = (machineTypeOptions: MachineTypeOption[]) => {
-  return machineTypeOptions.map(({ isDisabled, label, os, subtitle, value }) => {
-    const iconName = getIconName(os);
-
+const renderOptions = (machines: MachineTypeOption[], isDisabled?: boolean) => {
+  return machines.map((machine) => {
+    const iconName = getIconName(machine.os);
     return (
       <DropdownDetailedOption
-        key={value}
-        value={value}
-        title={label}
-        subtitle={subtitle}
+        key={machine.value}
+        value={machine.value}
+        title={machine.label}
+        subtitle=""
         isDisabled={isDisabled}
-        icon={iconName && <Avatar variant="brand" size="32" iconName={iconName} />}
+        icon={iconName && <Avatar variant="brand" size="24" iconName={iconName} />}
       />
     );
   });
 };
 
-const renderFormLabel = (machineTypeOption: MachineTypeOption) => {
-  const { label, os } = machineTypeOption;
-  const iconName = getIconName(os);
-
-  return (
-    <Box display="flex" gap={12} alignItems="center">
-      {iconName && <Avatar variant="brand" size="24" iconName={iconName} />}
-      {label}
-    </Box>
-  );
-};
-
-type Props = Pick<BoxProps, 'width'> & {
+type Props = {
   isLoading: boolean;
   isInvalid: boolean;
   isDisabled: boolean;
   machineType: MachineTypeWithValue;
   optionGroups: MachineTypeOptionGroup[];
   onChange: (machineId: string) => void;
-  selectedRegion?: MachineRegionName;
 };
 
-const MachineTypeSelector = ({
-  isLoading,
-  isInvalid,
-  isDisabled,
-  machineType,
-  optionGroups,
-  onChange,
-  selectedRegion,
-  ...boxProps
-}: Props) => {
-  const doesHardwareVaryByRegionForSelectedMachineType = useMemo(
-    () => doesHardwareVaryByRegion(machineType),
-    [machineType],
-  );
-
+const MachineTypeSelector = ({ isLoading, isInvalid, isDisabled, machineType, optionGroups, onChange }: Props) => {
   const toggletip = (icon: ReactNode) => {
-    if (!optionGroups.find((group) => group.options.find((option) => option.isDisabled))) {
+    if (!optionGroups.find((group) => group.status === 'promoted')) {
       return null;
     }
 
@@ -97,48 +59,9 @@ const MachineTypeSelector = ({
     );
   };
 
-  const helperText = () => {
-    if (doesHardwareVaryByRegionForSelectedMachineType && !selectedRegion) {
-      return (
-        <Box as="span" display="flex" flexDir="column" gap={8}>
-          <Text as="span">Machine types may vary depending on high demand.</Text>
-          {Object.entries(machineType.availableInRegions).map(([regionName, machineTypeInfoText]) => {
-            return (
-              <Text as="span" color="input/text/helper" key={regionName} textStyle="body/sm/regular">
-                <Text as="span" fontWeight="bold">
-                  {regionName}:
-                </Text>{' '}
-                {machineTypeInfoText}
-              </Text>
-            );
-          })}
-        </Box>
-      );
-    }
-
-    const region = selectedRegion || (Object.keys(machineType.availableInRegions)[0] as MachineRegionName);
-
-    return (
-      <Text as="span" color="input/text/helper" textStyle="body/sm/regular">
-        {machineType.availableInRegions[region]}
-      </Text>
-    );
-  };
-
-  let selectedOption: MachineTypeOption | null = null;
-  optionGroups.find((group) => {
-    const option = group.options.find(({ value }) => value === machineType.value);
-    if (option) {
-      selectedOption = option;
-      return true;
-    }
-  });
-
   return (
     <Dropdown
-      {...boxProps}
       flex="1"
-      formLabel={selectedOption && renderFormLabel(selectedOption)}
       required
       search={false}
       label="Machine type"
@@ -147,7 +70,7 @@ const MachineTypeSelector = ({
       disabled={isLoading || isDisabled}
       isError={isInvalid}
       errorText={isInvalid ? 'Invalid machine type' : undefined}
-      helperText={helperText()}
+      helperText={machineType.creditPerMinute ? `${machineType.creditPerMinute} credits/min` : undefined}
       value={machineType.value}
       onChange={(e) => onChange(e.target.value ?? '')}
     >
@@ -156,7 +79,7 @@ const MachineTypeSelector = ({
         <>
           {optionGroups.map((group) => (
             <DropdownGroup key={group.label} label={group.label} labelProps={{ whiteSpace: 'nowrap' }}>
-              {renderOptions(group.options)}
+              {renderOptions(group.options, group.status === 'promoted')}
             </DropdownGroup>
           ))}
         </>

source/javascripts/components/StacksAndMachine/MachineTypeSelector.tsx

@@ -118,7 +118,6 @@ const StackAndMachine = ({
           }
           isRollbackVersionAvailable={!!availableRollbackVersion}
           useRollbackVersion={useRollbackVersion}
-          width={orientation === 'horizontal' ? '50%' : undefined}
         />
         <MachineTypeSelector
           machineType={selectedMachineType}
@@ -127,8 +126,6 @@ const StackAndMachine = ({
           isDisabled={isMachineTypeSelectionDisabled}
           optionGroups={machineOptionGroups}
           onChange={(selectedMachineTypeValue) => handleChange(selectedStack.value, selectedMachineTypeValue)}
-          selectedRegion={data?.region}
-          width={orientation === 'horizontal' ? '50%' : undefined}
         />
       </Box>
       {useRollbackVersion && (

source/javascripts/components/StacksAndMachine/StackAndMachine.tsx

@@ -1,7 +1,6 @@
 import {
   Avatar,
   Box,
-  BoxProps,
   Checkbox,
   Dropdown,
   DropdownDetailedOption,
@@ -70,13 +69,13 @@ const renderOptions = (stacks: StackOption[]) => {
         value={stack.value}
         title={stack.label}
         subtitle=""
-        icon={iconName && <Avatar variant="brand" size="32" iconName={iconName} />}
+        icon={iconName && <Avatar variant="brand" size="24" iconName={iconName} />}
       />
     );
   });
 };
 
-type Props = Pick<BoxProps, 'width'> & {
+type Props = {
   isLoading: boolean;
   isInvalid: boolean;
   isRollbackVersionAvailable: boolean;
@@ -94,10 +93,9 @@ const StackSelector = ({
   stack,
   optionGroups,
   onChange,
-  ...boxProps
 }: Props) => {
   return (
-    <Box {...boxProps} flex="1">
+    <Box flex="1">
       <Dropdown
         required
         search={false}