Line data    Source code

       1              : /*
       2              :  * Copyright (C) 2016 Red Hat, Inc.
       3              :  * SPDX-License-Identifier: LGPL-2.1-or-later
       4              :  */
       5              : 
       6           96 : import cockpit from "cockpit";
       7           96 : import React from "react";
       8              : 
       9              : import { Label, LabelGroup } from "@patternfly/react-core/dist/esm/components/Label/index.js";
      10              : import { Menu, MenuContent, MenuItem, MenuList } from "@patternfly/react-core/dist/esm/components/Menu/index.js";
      11              : import { Flex, FlexItem } from "@patternfly/react-core/dist/esm/layouts/Flex/index.js";
      12              : 
      13              : import "menu-select-widget.scss";
      14              : 
      15           96 : const _ = cockpit.gettext;
      16              : 
      17              : export interface Profile {
      18              :     name: string;
      19              :     recommended: boolean;
      20              :     active: boolean;
      21              :     inconsistent?: boolean;
      22              :     title: string;
      23              :     description: string;
      24              : }
      25              : 
      26            2 : export const ProfilesMenuDialogBody = ({ active_profile, profiles, change_selected, isDisabled }: {
      27              :     active_profile: string;
      28              :     profiles: Profile[];
      29              :     change_selected: (profile: string) => void;
      30              :     isDisabled?: boolean;
      31            2 : }) => {
      32            2 :     const [selected_profile, setSelectedProfile] = React.useState(active_profile);
      33              : 
      34            2 :     const menuProfiles = profiles.map((itm) => {
      35            2 :         return (
      36            2 :             <MenuItem itemId={itm.name} key={itm.name} data-value={itm.name}
      37            2 :                       description={itm.description} isDisabled={!!isDisabled}
      38            2 :                       isActive={itm.active}>
      39            2 :                 <Flex alignItems={{ default: 'alignItemsCenter' }}>
      40            2 :                     <p>{ itm.title }</p>
      41            2 :                     <FlexItem>
      42            2 :                         <LabelGroup>
      43            2 :                             {itm.recommended && <Label color="green" variant='filled'>{_("recommended")}</Label>}
      44            2 :                             {itm.active && <Label color="blue" variant='filled'>{_("active")}</Label>}
      45            1 :                             {itm.inconsistent && <Label color="orange" variant='filled'>{_("inconsistent")}</Label>}
      46            2 :                         </LabelGroup>
      47            2 :                     </FlexItem>
      48            2 :                 </Flex>
      49            2 :             </MenuItem>
      50              :         );
      51            2 :     });
      52            2 :     return (
      53            2 :         <Menu className="ct-menu-select-widget"
      54            2 :               isPlain
      55            2 :               isScrollable
      56            1 :               onSelect={(_, selected: string) => {
      57            1 :                   setSelectedProfile(selected);
      58            1 :                   change_selected(selected);
      59            1 :               }}
      60            2 :               selected={selected_profile}>
      61            2 :             <MenuContent>
      62            2 :                 <MenuList>
      63            2 :                     {menuProfiles}
      64            2 :                 </MenuList>
      65            2 :             </MenuContent>
      66            2 :         </Menu>
      67              :     );
      68            2 : };