fix(content-releases): add disabled state to action radio buttons (#19420)

* fix(content-releases): change action radio buttons behaviour and ui

* fix(content-releases): change the hover effect and remove the publish check

* fix(content-releases): show hover effect only on enabled radio buttons

packages/core/content-releases/admin/src/components/ReleaseActionOptions.tsx

@@ -40,30 +40,51 @@ const FieldWrapper = styled(Field)<FieldWrapperProps>`
     text-transform: capitalize;
   }
 
-  &:active,
   &[data-checked='true'] {
-    color: ${({ theme }) => theme.colors.primary700};
-    background-color: ${({ theme }) => theme.colors.primary100};
-    border-color: ${({ theme }) => theme.colors.primary700};
+    color: ${({ theme, actionType }) =>
+      actionType === 'publish' ? theme.colors.primary700 : theme.colors.danger600};
+    background-color: ${({ theme, actionType }) =>
+      actionType === 'publish' ? theme.colors.primary100 : theme.colors.danger100};
+    border-color: ${({ theme, actionType }) =>
+      actionType === 'publish' ? theme.colors.primary700 : theme.colors.danger600};
   }
 
   &[data-checked='false'] {
     border-left: ${({ actionType }) => actionType === 'unpublish' && 'none'};
     border-right: ${({ actionType }) => actionType === 'publish' && 'none'};
   }
+
+  &[data-checked='false'][data-disabled='false']:hover {
+    color: ${({ theme }) => theme.colors.neutral700};
+    background-color: ${({ theme }) => theme.colors.neutral100};
+    border-color: ${({ theme }) => theme.colors.neutral200};
+  }
+
+  &[data-disabled='true'] {
+    color: ${({ theme }) => theme.colors.neutral600};
+    background-color: ${({ theme }) => theme.colors.neutral150};
+    border-color: ${({ theme }) => theme.colors.neutral300};
+  }
 `;
 
 interface ActionOptionProps {
   selected: 'publish' | 'unpublish';
   handleChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
   name: string;
+  disabled?: boolean;
 }
 
 interface OptionProps extends ActionOptionProps {
   actionType: 'publish' | 'unpublish';
 }
 
-const ActionOption = ({ selected, actionType, handleChange, name }: OptionProps) => {
+const ActionOption = ({
+  selected,
+  actionType,
+  handleChange,
+  name,
+  disabled = false,
+}: OptionProps) => {
   return (
     <FieldWrapper
       actionType={actionType}
@@ -73,6 +94,7 @@ const ActionOption = ({ selected, actionType, handleChange, name }: OptionProps)
       position="relative"
       cursor="pointer"
       data-checked={selected === actionType}
+      data-disabled={disabled && selected !== actionType}
     >
       <FieldLabel htmlFor={`${name}-${actionType}`}>
         <VisuallyHidden>
@@ -83,6 +105,7 @@ const ActionOption = ({ selected, actionType, handleChange, name }: OptionProps)
             checked={selected === actionType}
             onChange={handleChange}
             value={actionType}
+            disabled={disabled}
           />
         </VisuallyHidden>
         {actionType}
@@ -91,7 +114,12 @@ const ActionOption = ({ selected, actionType, handleChange, name }: OptionProps)
   );
 };
 
-export const ReleaseActionOptions = ({ selected, handleChange, name }: ActionOptionProps) => {
+export const ReleaseActionOptions = ({
+  selected,
+  handleChange,
+  name,
+  disabled = false,
+}: ActionOptionProps) => {
   return (
     <Flex>
       <ActionOption
@@ -99,12 +127,14 @@ export const ReleaseActionOptions = ({ selected, handleChange, name }: ActionOpt
         selected={selected}
         handleChange={handleChange}
         name={name}
+        disabled={disabled}
       />
       <ActionOption
         actionType="unpublish"
         selected={selected}
         handleChange={handleChange}
         name={name}
+        disabled={disabled}
       />
     </Flex>
   );

packages/core/content-releases/admin/src/pages/ReleaseDetailsPage.tsx

@@ -501,6 +501,9 @@ const ReleaseDetailsBody = () => {
     isError: isReleaseError,
     error: releaseError,
   } = useGetReleaseQuery({ id: releaseId });
+  const {
+    allowedActions: { canUpdate },
+  } = useRBAC(PERMISSIONS);
 
   const release = releaseData?.data;
   const selectedGroupBy = query?.groupBy || 'contentType';
@@ -754,6 +757,7 @@ const ReleaseDetailsBody = () => {
                               selected={type}
                               handleChange={(e) => handleChangeType(e, id, [key, actionIndex])}
                               name={`release-action-${id}-type`}
+                              disabled={!canUpdate}
                             />
                           )}
                         </Td>