feat: update dialog to accept permissions (#627)

* feat: update dialog to accept permissions

* refactor: make dialog component accept permission button

* fix: remove unused dependencies

* fix: update button permissions

Co-authored-by: Fredrik Oseberg <fredrik.no@gmail.com>

frontend/src/component/common/Dialogue/Dialogue.tsx

@@ -23,6 +23,7 @@ interface IDialogue {
     maxWidth?: 'lg' | 'sm' | 'xs' | 'md' | 'xl';
     disabledPrimaryButton?: boolean;
     formId?: string;
+    permissionButton?: React.ReactNode;
 }
 
 const Dialogue: React.FC<IDialogue> = ({
@@ -37,6 +38,7 @@ const Dialogue: React.FC<IDialogue> = ({
     maxWidth = 'sm',
     fullWidth = false,
     formId,
+    permissionButton,
 }) => {
     const styles = useStyles();
     const handleClick = formId
@@ -66,20 +68,26 @@ const Dialogue: React.FC<IDialogue> = ({
 
             <DialogActions>
                 <ConditionallyRender
-                    condition={Boolean(onClick)}
+                    condition={Boolean(permissionButton)}
-                    show={
+                    show={permissionButton}
-                        <Button
+                    elseShow={
-                            form={formId}
+                        <ConditionallyRender
-                            color="primary"
+                            condition={Boolean(onClick)}
-                            variant="contained"
+                            show={
-                            onClick={handleClick}
+                                <Button
-                            autoFocus={!formId}
+                                    form={formId}
-                            disabled={disabledPrimaryButton}
+                                    color="primary"
-                            data-test={DIALOGUE_CONFIRM_ID}
+                                    variant="contained"
-                            type={formId ? 'submit' : 'button'}
+                                    onClick={handleClick}
-                        >
+                                    autoFocus={!formId}
-                            {primaryButtonText || "Yes, I'm sure"}
+                                    disabled={disabledPrimaryButton}
-                        </Button>
+                                    data-test={DIALOGUE_CONFIRM_ID}
+                                    type={formId ? 'submit' : 'button'}
+                                >
+                                    {primaryButtonText || "Yes, I'm sure"}
+                                </Button>
+                            }
+                        />
                     }
                 />
 

frontend/src/component/common/EnvironmentStrategiesDialog/EnvironmentStrategyDialog.tsx

@@ -1,6 +1,7 @@
-import React from 'react';
 import { useHistory } from 'react-router-dom';
+import { CREATE_FEATURE_STRATEGY } from '../../providers/AccessProvider/permissions';
 import Dialogue from '../Dialogue';
+import PermissionButton from '../PermissionButton/PermissionButton';
 import { useStyles } from './EnvironmentStrategyDialog.styles';
 
 interface IEnvironmentStrategyDialogProps {
@@ -25,10 +26,19 @@ const EnvironmentStrategyDialog = ({
         <Dialogue
             open={open}
             maxWidth="sm"
-            onClick={() => history.push(strategiesLink)}
             onClose={() => onClose()}
             title="You need to add a strategy to your toggle"
             primaryButtonText="Take me directly to add strategy"
+            permissionButton={
+                <PermissionButton
+                    permission={CREATE_FEATURE_STRATEGY}
+                    projectId={projectId}
+                    environmentId={environmentName}
+                    onClick={() => history.push(strategiesLink)}
+                >
+                    Take me directly to add strategy
+                </PermissionButton>
+            }
             secondaryButtonText="Cancel"
         >
             <p className={styles.infoText}>
@@ -36,8 +46,8 @@ const EnvironmentStrategyDialog = ({
                 add an activation strategy.
             </p>
             <p className={styles.infoText}>
-                You can add the activation strategy by selecting the toggle, open
+                You can add the activation strategy by selecting the toggle,
-                the environment accordion and add the activation strategy.
+                open the environment accordion and add the activation strategy.
             </p>
         </Dialogue>
     );

frontend/src/component/common/PermissionButton/PermissionButton.tsx

@@ -4,7 +4,7 @@ import { useContext } from 'react';
 import AccessContext from '../../../contexts/AccessContext';
 import ConditionallyRender from '../ConditionallyRender';
 
-interface IPermissionIconButtonProps
+export interface IPermissionIconButtonProps
     extends React.HTMLProps<HTMLButtonElement> {
     permission: string | string[];
     tooltip?: string;

frontend/src/component/feature/FeatureView2/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironmentStrategies/FeatureOverviewEnvironmentStrategy/FeatureOverviewEnvironmentStrategy.tsx

@@ -8,7 +8,7 @@ import {
     getHumanReadableStrategyName,
 } from '../../../../../../../../utils/strategy-names';
 import PermissionIconButton from '../../../../../../../common/PermissionIconButton/PermissionIconButton';
-import { UPDATE_FEATURE } from '../../../../../../../providers/AccessProvider/permissions';
+import { UPDATE_FEATURE_STRATEGY } from '../../../../../../../providers/AccessProvider/permissions';
 import FeatureStrategyExecution from '../../../../../FeatureStrategies/FeatureStrategyExecution/FeatureStrategyExecution';
 import { useStyles } from './FeatureOverviewEnvironmentStrategy.styles';
 
@@ -36,7 +36,8 @@ const FeatureOverviewEnvironmentStrategy = ({
                 {getHumanReadableStrategyName(strategy.name)}
                 <div className={styles.editStrategy}>
                     <PermissionIconButton
-                        permission={UPDATE_FEATURE}
+                        permission={UPDATE_FEATURE_STRATEGY}
+                        environmentId={environmentName}
                         projectId={projectId}
                         component={Link}
                         to={`/projects/${projectId}/features2/${featureId}/strategies?environment=${environmentName}`}