feat(frontend): add UI components to allow user actions (#3118)

kubeshop · Sep 4, 2023 · 336563b · 336563b
1 parent d8d1ba8
commit 336563b
Show file tree

Hide file tree

Showing 22 changed files with 118 additions and 47 deletions.
diff --git a/web/src/components/AllowButton/AllowButton.tsx b/web/src/components/AllowButton/AllowButton.tsx
@@ -11,7 +11,7 @@ const AllowButton = ({operation, ...props}: IProps) => {
 
   return (
     <Tooltip title={!isAllowed ? 'You are not allowed to perform this operation' : ''}>
-      <Button {...props} disabled={!isAllowed} />
+      <Button {...props} disabled={!isAllowed || props.disabled} />
     </Tooltip>
   );
 };

diff --git a/web/src/components/EditTest/EditTest.tsx b/web/src/components/EditTest/EditTest.tsx
@@ -1,4 +1,5 @@
 import {Button, Form} from 'antd';
+import AllowButton, {Operation} from 'components/AllowButton';
 import EditTestForm from 'components/EditTestForm';
 import {TriggerTypeToPlugin} from 'constants/Plugins.constants';
 import useValidateTestDraft from 'hooks/useValidateTestDraft';
@@ -43,15 +44,16 @@ const EditTest = ({test}: IProps) => {
           <Button data-cy="edit-test-reset" onClick={() => form.resetFields()}>
             Reset
           </Button>
-          <Button
+          <AllowButton
+            operation={Operation.Edit}
             data-cy="edit-test-submit"
             loading={isEditLoading}
             disabled={!isValid || !stateIsFinished}
             type="primary"
             onClick={() => form.submit()}
           >
             Save & Run
-          </Button>
+          </AllowButton>
         </S.ButtonsContainer>
       </S.FormContainer>
     </S.Wrapper>

diff --git a/web/src/components/EditTestSuite/EditTestSuite.tsx b/web/src/components/EditTestSuite/EditTestSuite.tsx
@@ -1,5 +1,6 @@
 import {Button, Form} from 'antd';
 import {useCallback, useState} from 'react';
+import AllowButton, {Operation} from 'components/AllowButton';
 import {TDraftTestSuite} from 'types/TestSuite.types';
 import {useTestSuite} from 'providers/TestSuite';
 import useValidateTestSuiteDraft from 'hooks/useValidateTestSuiteDraft';
@@ -37,15 +38,16 @@ const EditTestSuite = ({testSuite, testSuiteRun}: IProps) => {
           <Button data-cy="edit-testsuite-reset" onClick={() => form.resetFields()}>
             Reset
           </Button>
-          <Button
+          <AllowButton
+            operation={Operation.Edit}
             data-cy="edit-testsuite-submit"
             loading={isEditLoading}
             disabled={!isFormValid || !stateIsFinished}
             type="primary"
             onClick={() => form.submit()}
           >
             Save & Run
-          </Button>
+          </AllowButton>
         </S.ButtonsContainer>
       </S.FormContainer>
     </S.Wrapper>

diff --git a/web/src/components/ResourceCard/ResourceCardActions.tsx b/web/src/components/ResourceCard/ResourceCardActions.tsx
@@ -1,6 +1,7 @@
 import {Dropdown, Menu} from 'antd';
 import {useCallback, useMemo} from 'react';
 
+import {Operation, useCustomization} from 'providers/Customization';
 import * as S from './ResourceCard.styled';
 
 interface IProps {
@@ -11,6 +12,8 @@ interface IProps {
 }
 
 const ResourceCardActions = ({id, shouldEdit = true, onDelete, onEdit}: IProps) => {
+  const {getIsAllowed} = useCustomization();
+
   const onDeleteClick = useCallback(
     ({domEvent}) => {
       domEvent?.stopPropagation();
@@ -28,17 +31,30 @@ const ResourceCardActions = ({id, shouldEdit = true, onDelete, onEdit}: IProps)
   );
 
   const menuItems = useMemo(() => {
-    const defaultItems = [{key: 'delete', label: <span data-cy="test-card-delete">Delete</span>, onClick: onDeleteClick}];
+    const defaultItems = [
+      {
+        key: 'delete',
+        label: <span data-cy="test-card-delete">Delete</span>,
+        onClick: onDeleteClick,
+        disabled: !getIsAllowed(Operation.Edit),
+      },
+    ];
 
-    return shouldEdit ? [{key: 'edit', label: <span data-cy="test-card-edit">Edit</span>, onClick: onEditClick}, ...defaultItems] : defaultItems;
-  }, [onDeleteClick, onEditClick, shouldEdit]);
+    return shouldEdit
+      ? [
+          {
+            key: 'edit',
+            label: <span data-cy="test-card-edit">Edit</span>,
+            onClick: onEditClick,
+            disabled: !getIsAllowed(Operation.Edit),
+          },
+          ...defaultItems,
+        ]
+      : defaultItems;
+  }, [getIsAllowed, onDeleteClick, onEditClick, shouldEdit]);
 
   return (
-    <Dropdown
-      overlay={<Menu items={menuItems} />}
-      placement="bottomLeft"
-      trigger={['click']}
-    >
+    <Dropdown overlay={<Menu items={menuItems} />} placement="bottomLeft" trigger={['click']}>
       <span data-cy={`test-actions-button-${id}`} className="ant-dropdown-link" onClick={e => e.stopPropagation()}>
         <S.ActionButton />
       </span>

diff --git a/web/src/components/RunActionsMenu/RunActionsMenu.tsx b/web/src/components/RunActionsMenu/RunActionsMenu.tsx
@@ -2,6 +2,7 @@ import {Dropdown, Menu} from 'antd';
 
 import {useFileViewerModal} from 'components/FileViewerModal/FileViewerModal.provider';
 import useDeleteResourceRun from 'hooks/useDeleteResourceRun';
+import {Operation, useCustomization} from 'providers/Customization';
 import {useDashboard} from 'providers/Dashboard/Dashboard.provider';
 import TestRunAnalyticsService from 'services/Analytics/TestRunAnalytics.service';
 import {ResourceType} from 'types/Resource.type';
@@ -16,6 +17,7 @@ interface IProps {
 }
 
 const RunActionsMenu = ({resultId, testId, testSuiteId, testSuiteRunId, isRunView = false}: IProps) => {
+  const {getIsAllowed} = useCustomization();
   const {onJUnit} = useFileViewerModal();
   const {navigate} = useDashboard();
   const onDelete = useDeleteResourceRun({id: testId, isRunView, type: ResourceType.Test});
@@ -62,6 +64,7 @@ const RunActionsMenu = ({resultId, testId, testSuiteId, testSuiteRunId, isRunVie
                 navigate(`/test/${testId}/run/${resultId}`);
               }}
               key="edit"
+              disabled={!getIsAllowed(Operation.Edit)}
             >
               Edit
             </Menu.Item>
@@ -72,6 +75,7 @@ const RunActionsMenu = ({resultId, testId, testSuiteId, testSuiteRunId, isRunVie
                 onDelete(resultId);
               }}
               key="delete"
+              disabled={!getIsAllowed(Operation.Edit)}
             >
               Delete
             </Menu.Item>

diff --git a/web/src/components/Settings/Analytics/AnalyticsForm.tsx b/web/src/components/Settings/Analytics/AnalyticsForm.tsx
@@ -1,4 +1,5 @@
-import {Button, Form, Switch} from 'antd';
+import {Form, Switch} from 'antd';
+import AllowButton, {Operation} from 'components/AllowButton';
 import {useSettings} from 'providers/Settings/Settings.provider';
 import {useSettingsValues} from 'providers/SettingsValues/SettingsValues.provider';
 import {useCallback} from 'react';
@@ -40,9 +41,9 @@ const AnalyticsForm = () => {
       </S.SwitchContainer>
 
       <S.FooterContainer>
-        <Button htmlType="submit" loading={isLoading} type="primary">
+        <AllowButton operation={Operation.Configure} htmlType="submit" loading={isLoading} type="primary">
           Save
-        </Button>
+        </AllowButton>
       </S.FooterContainer>
     </Form>
   );

diff --git a/web/src/components/Settings/DataStoreForm/DataStoreForm.tsx b/web/src/components/Settings/DataStoreForm/DataStoreForm.tsx
@@ -81,9 +81,16 @@ const DataStoreForm = ({
           </S.TopContainer>
           <S.ButtonsContainer>
             {isConfigReady ? (
-              <Button disabled={isLoading} type="primary" ghost onClick={onDeleteConfig} danger>
+              <AllowButton
+                operation={Operation.Configure}
+                disabled={isLoading}
+                type="primary"
+                ghost
+                onClick={onDeleteConfig}
+                danger
+              >
                 {`Delete ${SupportedDataStoresToName[dataStoreConfig.defaultDataStore.type]} Data Store`}
-              </Button>
+              </AllowButton>
             ) : (
               <div />
             )}

diff --git a/web/src/components/Settings/Demo/DemoForm.tsx b/web/src/components/Settings/Demo/DemoForm.tsx
@@ -1,6 +1,7 @@
-import {Button, Form, Switch} from 'antd';
+import {Form, Switch} from 'antd';
 import {useCallback} from 'react';
 
+import AllowButton, {Operation} from 'components/AllowButton';
 import {useSettings} from 'providers/Settings/Settings.provider';
 import {useSettingsValues} from 'providers/SettingsValues/SettingsValues.provider';
 import SettingService from 'services/Setting.service';
@@ -63,9 +64,15 @@ const DemoForm = () => {
       {otelEnabled && <OtelFields />}
 
       <S.FooterContainer>
-        <Button htmlType="submit" loading={isLoading} type="primary" data-cy="demo-form-save-button">
+        <AllowButton
+          operation={Operation.Configure}
+          htmlType="submit"
+          loading={isLoading}
+          type="primary"
+          data-cy="demo-form-save-button"
+        >
           Save
-        </Button>
+        </AllowButton>
       </S.FooterContainer>
     </Form>
   );

diff --git a/web/src/components/Settings/Linter/LinterForm.tsx b/web/src/components/Settings/Linter/LinterForm.tsx
@@ -1,5 +1,6 @@
-import {Button, Col, Form, Input, Row, Switch} from 'antd';
+import {Col, Form, Input, Row, Switch} from 'antd';
 import {useEffect} from 'react';
+import AllowButton, {Operation} from 'components/AllowButton';
 import {useSettings} from 'providers/Settings/Settings.provider';
 import {useSettingsValues} from 'providers/SettingsValues/SettingsValues.provider';
 import SettingService from 'services/Setting.service';
@@ -80,9 +81,9 @@ const LinterForm = () => {
       </Row>
 
       <S.FooterContainer>
-        <Button htmlType="submit" loading={isLoading} type="primary">
+        <AllowButton operation={Operation.Configure} htmlType="submit" loading={isLoading} type="primary">
           Save
-        </Button>
+        </AllowButton>
       </S.FooterContainer>
     </Form>
   );

diff --git a/web/src/components/Settings/Polling/PollingForm.tsx b/web/src/components/Settings/Polling/PollingForm.tsx
@@ -1,8 +1,9 @@
 import {useEffect} from 'react';
-import {Button, Col, Form, Input, Row} from 'antd';
+import {Col, Form, Input, Row} from 'antd';
+
+import AllowButton, {Operation} from 'components/AllowButton';
 import {useSettings} from 'providers/Settings/Settings.provider';
 import {useSettingsValues} from 'providers/SettingsValues/SettingsValues.provider';
-
 import {ResourceType, TDraftPollingProfiles} from 'types/Settings.types';
 import SettingService from 'services/Setting.service';
 import * as S from '../common/Settings.styled';
@@ -58,9 +59,9 @@ const PollingForm = () => {
       </Row>
 
       <S.FooterContainer>
-        <Button htmlType="submit" loading={isLoading} type="primary">
+        <AllowButton operation={Operation.Configure} htmlType="submit" loading={isLoading} type="primary">
           Save
-        </Button>
+        </AllowButton>
       </S.FooterContainer>
     </Form>
   );

diff --git a/web/src/components/Settings/TestRunner/TestRunnerForm.tsx b/web/src/components/Settings/TestRunner/TestRunnerForm.tsx
@@ -1,5 +1,6 @@
 import {useCallback, useEffect} from 'react';
-import {Button, Form} from 'antd';
+import {Form} from 'antd';
+import AllowButton, {Operation} from 'components/AllowButton';
 import {ResourceType, TDraftTestRunner} from 'types/Settings.types';
 import {useSettings} from 'providers/Settings/Settings.provider';
 import SettingService from 'services/Setting.service';
@@ -42,9 +43,9 @@ const TestRunnerForm = () => {
       </Form.Item>
 
       <S.FooterContainer>
-        <Button htmlType="submit" loading={isLoading} type="primary">
+        <AllowButton operation={Operation.Configure} htmlType="submit" loading={isLoading} type="primary">
           Save
-        </Button>
+        </AllowButton>
       </S.FooterContainer>
     </Form>
   );

diff --git a/web/src/components/TestOutputForm/TestOutputForm.tsx b/web/src/components/TestOutputForm/TestOutputForm.tsx
@@ -4,6 +4,7 @@ import {Button, Form, Input, Tag} from 'antd';
 import {delay} from 'lodash';
 import {useEffect} from 'react';
 
+import AllowButton, {Operation} from 'components/AllowButton';
 import Editor from 'components/Editor';
 import {EXPRESSIONS_DOCUMENTATION_URL, SELECTOR_LANGUAGE_CHEAT_SHEET_URL} from 'constants/Common.constants';
 import {SupportedEditors} from 'constants/Editor.constants';
@@ -131,9 +132,16 @@ const TestOutputForm = ({
           <Button data-cy="output-modal-cancel-button" onClick={onCancel}>
             Cancel
           </Button>
-          <Button data-cy="output-save-button" disabled={!isValid} htmlType="submit" loading={isLoading} type="primary">
+          <AllowButton
+            operation={Operation.Edit}
+            data-cy="output-save-button"
+            disabled={!isValid}
+            htmlType="submit"
+            loading={isLoading}
+            type="primary"
+          >
             Save Test Output
-          </Button>
+          </AllowButton>
         </S.Footer>
       </Form>
     </S.Container>

diff --git a/web/src/components/TestSpecForm/TestSpecForm.tsx b/web/src/components/TestSpecForm/TestSpecForm.tsx
@@ -2,6 +2,7 @@ import {Button, Form, Input, Tag} from 'antd';
 import {LoadingOutlined} from '@ant-design/icons';
 import {useEffect} from 'react';
 
+import AllowButton, {Operation} from 'components/AllowButton';
 import {SELECTOR_LANGUAGE_CHEAT_SHEET_URL} from 'constants/Common.constants';
 import {CompareOperator} from 'constants/Operator.constants';
 import {useAppSelector} from 'redux/hooks';
@@ -184,9 +185,15 @@ const TestSpecForm = ({
 
         <S.AssertionFromActions>
           <Button onClick={onCancel}>Cancel</Button>
-          <Button type="primary" disabled={!isValid} onClick={form.submit} data-cy="assertion-form-submit-button">
+          <AllowButton
+            operation={Operation.Edit}
+            type="primary"
+            disabled={!isValid}
+            onClick={form.submit}
+            data-cy="assertion-form-submit-button"
+          >
             Save Test Spec
-          </Button>
+          </AllowButton>
         </S.AssertionFromActions>
       </Form>
     </S.AssertionForm>

diff --git a/web/src/components/TestSuiteRunActionsMenu/TestSuiteRunActionsMenu.tsx b/web/src/components/TestSuiteRunActionsMenu/TestSuiteRunActionsMenu.tsx
@@ -1,6 +1,7 @@
 import {Dropdown, Menu} from 'antd';
 
 import useDeleteResourceRun from 'hooks/useDeleteResourceRun';
+import {Operation, useCustomization} from 'providers/Customization';
 import {useDashboard} from 'providers/Dashboard/Dashboard.provider';
 import {ResourceType} from 'types/Resource.type';
 import * as S from './TestSuiteRunActionsMenu.styled';
@@ -12,6 +13,7 @@ interface IProps {
 }
 
 const TestSuiteRunActionsMenu = ({runId, testSuiteId, isRunView = false}: IProps) => {
+  const {getIsAllowed} = useCustomization();
   const {navigate} = useDashboard();
   const onDelete = useDeleteResourceRun({id: testSuiteId, isRunView, type: ResourceType.TestSuite});
 
@@ -29,6 +31,7 @@ const TestSuiteRunActionsMenu = ({runId, testSuiteId, isRunView = false}: IProps
                 domEvent.stopPropagation();
                 navigate(`/testsuite/${testSuiteId}/run/${runId}`);
               }}
+              disabled={!getIsAllowed(Operation.Edit)}
             >
               Edit
             </Menu.Item>
@@ -38,6 +41,7 @@ const TestSuiteRunActionsMenu = ({runId, testSuiteId, isRunView = false}: IProps
                 domEvent.stopPropagation();
                 onDelete(runId);
               }}
+              disabled={!getIsAllowed(Operation.Edit)}
             >
               Delete
             </Menu.Item>

diff --git a/web/src/components/VariableSetSelector/VariableSetSelector.tsx b/web/src/components/VariableSetSelector/VariableSetSelector.tsx
@@ -1,12 +1,14 @@
 import {DownOutlined} from '@ant-design/icons';
 import {Dropdown, Menu, Space} from 'antd';
 import type {ItemType} from 'antd/lib/menu/hooks/useItems';
+import {Operation, useCustomization} from 'providers/Customization';
 import {useVariableSet} from 'providers/VariableSet';
 import {useMemo, useState} from 'react';
 import AddVariableSet from './AddVariableSet';
 import VariableSetSelectorEntry from './VariableSetSelectorEntry';
 
 const VariableSetSelector = () => {
+  const {getIsAllowed} = useCustomization();
   const {variableSetList, selectedVariableSet, setSelectedVariableSet, isLoading, onOpenModal} = useVariableSet();
   const [hoveredOption, setHoveredOption] = useState<string>();
 
@@ -29,6 +31,7 @@ const VariableSetSelector = () => {
                 onEditClick={onOpenModal}
                 variableSet={variableSet}
                 isHovering={hoveredOption === variableSet.id}
+                isAllowed={getIsAllowed(Operation.Edit)}
               />
             ),
             onClick: () => setSelectedVariableSet(variableSet),
@@ -43,9 +46,10 @@ const VariableSetSelector = () => {
             key: 'add-variable-set',
             label: <AddVariableSet />,
             onClick: () => onOpenModal(),
+            disabled: !getIsAllowed(Operation.Edit),
           },
         ]),
-    [hoveredOption, onOpenModal, setSelectedVariableSet, variableSetList]
+    [getIsAllowed, hoveredOption, onOpenModal, setSelectedVariableSet, variableSetList]
   );
 
   return !isLoading ? (