diff --git a/frontend/src/assets/img/changeRequestProcess.svg b/frontend/src/assets/img/changeRequestProcess.svg new file mode 100644 index 0000000000..6e8c755fd0 --- /dev/null +++ b/frontend/src/assets/img/changeRequestProcess.svg @@ -0,0 +1,90 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/frontend/src/component/project/Project/ProjectSettings/ChangeRequestConfiguration/ChangeRequestConfiguration.tsx b/frontend/src/component/project/Project/ProjectSettings/ChangeRequestConfiguration/ChangeRequestConfiguration.tsx index be3f998455..d9bc620f19 100644 --- a/frontend/src/component/project/Project/ProjectSettings/ChangeRequestConfiguration/ChangeRequestConfiguration.tsx +++ b/frontend/src/component/project/Project/ProjectSettings/ChangeRequestConfiguration/ChangeRequestConfiguration.tsx @@ -16,11 +16,12 @@ import PermissionSwitch from 'component/common/PermissionSwitch/PermissionSwitch import { useRequiredPathParam } from 'hooks/useRequiredPathParam'; import { Dialogue } from 'component/common/Dialogue/Dialogue'; import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender'; -import { useChangeRequestConfig } from '../../../../../hooks/api/getters/useChangeRequestConfig/useChangeRequestConfig'; -import { useChangeRequestApi } from '../../../../../hooks/api/actions/useChangeRequestApi/useChangeRequestApi'; +import { useChangeRequestConfig } from 'hooks/api/getters/useChangeRequestConfig/useChangeRequestConfig'; +import { useChangeRequestApi } from 'hooks/api/actions/useChangeRequestApi/useChangeRequestApi'; import { UPDATE_PROJECT } from '@server/types/permissions'; -import useToast from '../../../../../hooks/useToast'; -import { formatUnknownError } from '../../../../../utils/formatUnknownError'; +import useToast from 'hooks/useToast'; +import { formatUnknownError } from 'utils/formatUnknownError'; +import { ChangeRequestProcessHelp } from './ChangeRequestProcessHelp/ChangeRequestProcessHelp'; export const ChangeRequestConfiguration: VFC = () => { const [dialogState, setDialogState] = useState<{ @@ -130,7 +131,12 @@ export const ChangeRequestConfiguration: VFC = () => { ); return ( } + header={ + } + /> + } isLoading={loading} > diff --git a/frontend/src/component/project/Project/ProjectSettings/ChangeRequestConfiguration/ChangeRequestProcessHelp/ChangeRequestProcessHelp.tsx b/frontend/src/component/project/Project/ProjectSettings/ChangeRequestConfiguration/ChangeRequestProcessHelp/ChangeRequestProcessHelp.tsx new file mode 100644 index 0000000000..70e5ce1fff --- /dev/null +++ b/frontend/src/component/project/Project/ProjectSettings/ChangeRequestConfiguration/ChangeRequestProcessHelp/ChangeRequestProcessHelp.tsx @@ -0,0 +1,94 @@ +import { useRef, useState, VFC } from 'react'; +import { + useTheme, + IconButton, + Typography, + useMediaQuery, + Popover, + Box, +} from '@mui/material'; +import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender'; +import { HelpOutline } from '@mui/icons-material'; +import { ReactComponent as ChangeRequestProcessImage } from 'assets/img/changeRequestProcess.svg'; + +interface IChangeRequestProcessHelpProps {} + +export const ChangeRequestProcessHelp: VFC< + IChangeRequestProcessHelpProps +> = () => { + const ref = useRef(null); + const theme = useTheme(); + const isSmallScreen = useMediaQuery(theme.breakpoints.down('md')); + const [isOpen, setIsOpen] = useState(false); + + return ( + <> + + Show change request process{' '} + + } + /> + + setIsOpen(true)} /> + + setIsOpen(false)} + > + + + Change request process: + + +
    +
  1. + When changes are detected they are added into a + draft mode +
    2. +
  2. + The next step is for those changes to be sent + for review +
    3. +
  3. + These changes can be seen by everyone but only + who has “Review change request”{' '} + permission can Approve or Reject them +
    4. +
      +
    • + If changes are Approved then someone who has + “Apply change request”{' '} + permission needs to apply these changes to + be live on the feature toggles and request + is Closed +
      • +
    • + If changes are Rejected then these goes + automatically to Cancelled and request is + Closed. +
      • +
    +
+ + + + + + + + ); +}; diff --git a/frontend/src/component/project/ProjectAccess/ProjectAccessTable/ProjectAccessTable.tsx b/frontend/src/component/project/ProjectAccess/ProjectAccessTable/ProjectAccessTable.tsx index 06492531df..75155fb46c 100644 --- a/frontend/src/component/project/ProjectAccess/ProjectAccessTable/ProjectAccessTable.tsx +++ b/frontend/src/component/project/ProjectAccess/ProjectAccessTable/ProjectAccessTable.tsx @@ -1,4 +1,4 @@ -import { useEffect, useMemo, useState, VFC } from 'react'; +import { useCallback, useEffect, useMemo, useState, VFC } from 'react'; import { SortingRule, useFlexLayout, useSortBy, useTable } from 'react-table'; import { VirtualizedTable, TablePlaceholder } from 'component/common/Table'; import { styled, useMediaQuery, useTheme } from '@mui/material'; @@ -15,6 +15,7 @@ import { ActionCell } from 'component/common/Table/cells/ActionCell/ActionCell'; import { SearchHighlightProvider } from 'component/common/Table/SearchHighlightContext/SearchHighlightContext'; import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender'; import { useSearch } from 'hooks/useSearch'; +import useHiddenColumns from 'hooks/useHiddenColumns'; import { Link, Route, @@ -42,7 +43,6 @@ import ResponsiveButton from 'component/common/ResponsiveButton/ResponsiveButton import { ProjectAccessCreate } from 'component/project/ProjectAccess/ProjectAccessCreate/ProjectAccessCreate'; import { ProjectAccessEditUser } from 'component/project/ProjectAccess/ProjectAccessEditUser/ProjectAccessEditUser'; import { ProjectAccessEditGroup } from 'component/project/ProjectAccess/ProjectAccessEditGroup/ProjectAccessEditGroup'; -import useHiddenColumns from 'hooks/useHiddenColumns'; import { ProjectAccessRoleCell } from './ProjectAccessRoleCell/ProjectAccessRoleCell'; import { PA_ASSIGN_BUTTON_ID, @@ -71,6 +71,7 @@ const StyledUserAvatars = styled('div')(({ theme }) => ({ const StyledEmptyAvatar = styled(UserAvatar)(({ theme }) => ({ marginRight: theme.spacing(-3.5), })); + const StyledGroupAvatar = styled(UserAvatar)(({ theme }) => ({ outline: `${theme.spacing(0.25)} solid ${theme.palette.background.paper}`, })); @@ -133,10 +134,17 @@ export const ProjectAccessTable: VFC = () => { subtitle={`${row.entity.users?.length} users`} /> } - elseShow={} + elseShow={ + + } /> ), - maxWidth: 125, + minWidth: 100, searchable: true, }, {