services/workbench2/src/components/icon/icon.tsx

   1 // Copyright (C) The Arvados Authors. All rights reserved.
   2 //
   3 // SPDX-License-Identifier: AGPL-3.0
   4
   5 import React from "react";
   6 import { Badge, SvgIcon, Tooltip } from "@mui/material";
   7 import Add from "@mui/icons-material/Add";
   8 import ArrowBack from "@mui/icons-material/ArrowBack";
   9 import ArrowDropDown from "@mui/icons-material/ArrowDropDown";
  10 import Build from "@mui/icons-material/Build";
  11 import Cached from "@mui/icons-material/Cached";
  12 import DescriptionIcon from "@mui/icons-material/Description";
  13 import ChevronLeft from "@mui/icons-material/ChevronLeft";
  14 import CloudUpload from "@mui/icons-material/CloudUpload";
  15 import Code from "@mui/icons-material/Code";
  16 import Create from "@mui/icons-material/Create";
  17 import ImportContacts from "@mui/icons-material/ImportContacts";
  18 import ChevronRight from "@mui/icons-material/ChevronRight";
  19 import Close from "@mui/icons-material/Close";
  20 import ContentCopy from "@mui/icons-material/ContentCopy";
  21 import FileCopyOutlined from "@mui/icons-material/FileCopyOutlined";
  22 import CreateNewFolder from "@mui/icons-material/CreateNewFolder";
  23 import Delete from "@mui/icons-material/Delete";
  24 import DeviceHub from "@mui/icons-material/DeviceHub";
  25 import Edit from "@mui/icons-material/Edit";
  26 import ErrorRoundedIcon from "@mui/icons-material/ErrorRounded";
  27 import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
  28 import FlipToFront from "@mui/icons-material/FlipToFront";
  29 import Folder from "@mui/icons-material/Folder";
  30 import FolderShared from "@mui/icons-material/FolderShared";
  31 import Pageview from "@mui/icons-material/Pageview";
  32 import GetApp from "@mui/icons-material/GetApp";
  33 import Help from "@mui/icons-material/Help";
  34 import HelpOutline from "@mui/icons-material/HelpOutline";
  35 import History from "@mui/icons-material/History";
  36 import Inbox from "@mui/icons-material/Inbox";
  37 import Memory from "@mui/icons-material/Memory";
  38 import MoveToInbox from "@mui/icons-material/MoveToInbox";
  39 import Info from "@mui/icons-material/Info";
  40 import Input from "@mui/icons-material/Input";
  41 import InsertDriveFile from "@mui/icons-material/InsertDriveFile";
  42 import LastPage from "@mui/icons-material/LastPage";
  43 import LibraryBooks from "@mui/icons-material/LibraryBooks";
  44 import ListAlt from "@mui/icons-material/ListAlt";
  45 import Menu from "@mui/icons-material/Menu";
  46 import MoreVert from "@mui/icons-material/MoreVert";
  47 import MoreHoriz from "@mui/icons-material/MoreHoriz";
  48 import Mail from "@mui/icons-material/Mail";
  49 import Notifications from "@mui/icons-material/Notifications";
  50 import OpenInNew from "@mui/icons-material/OpenInNew";
  51 import People from "@mui/icons-material/People";
  52 import Person from "@mui/icons-material/Person";
  53 import PersonAdd from "@mui/icons-material/PersonAdd";
  54 import PlayArrow from "@mui/icons-material/PlayArrow";
  55 import Public from "@mui/icons-material/Public";
  56 import RateReview from "@mui/icons-material/RateReview";
  57 import RestoreFromTrash from "@mui/icons-material/History";
  58 import Search from "@mui/icons-material/Search";
  59 import SettingsApplications from "@mui/icons-material/SettingsApplications";
  60 import SettingsEthernet from "@mui/icons-material/SettingsEthernet";
  61 import Settings from "@mui/icons-material/Settings";
  62 import Star from "@mui/icons-material/Star";
  63 import StarBorder from "@mui/icons-material/StarBorder";
  64 import Warning from "@mui/icons-material/Warning";
  65 import VpnKey from "@mui/icons-material/VpnKey";
  66 import LinkOutlined from "@mui/icons-material/LinkOutlined";
  67 import RemoveRedEye from "@mui/icons-material/RemoveRedEye";
  68 import Computer from "@mui/icons-material/Computer";
  69 import WrapText from "@mui/icons-material/WrapText";
  70 import TextIncrease from "@mui/icons-material/ZoomIn";
  71 import TextDecrease from "@mui/icons-material/ZoomOut";
  72 import FullscreenSharp from "@mui/icons-material/FullscreenSharp";
  73 import FullscreenExitSharp from "@mui/icons-material/FullscreenExitSharp";
  74 import ExitToApp from "@mui/icons-material/ExitToApp";
  75 import CheckCircleOutline from "@mui/icons-material/CheckCircleOutline";
  76 import RemoveCircleOutline from "@mui/icons-material/RemoveCircleOutline";
  77 import NotInterested from "@mui/icons-material/NotInterested";
  78 import Image from "@mui/icons-material/Image";
  79 import Stop from "@mui/icons-material/Stop";
  80 import FileCopy from "@mui/icons-material/FileCopy";
  81 import ShowChart from "@mui/icons-material/ShowChart";
  82
  83 // Import FontAwesome icons
  84 import { library } from "@fortawesome/fontawesome-svg-core";
  85 import { faPencilAlt, faSlash, faUsers, faEllipsisH } from "@fortawesome/free-solid-svg-icons";
  86 import { FormatAlignLeft } from "@mui/icons-material";
  87 library.add(faPencilAlt, faSlash, faUsers, faEllipsisH);
  88
  89 export const FreezeIcon: IconType = (props: any) => (
  90     <SvgIcon {...props}>
  91         <path d="M20.79,13.95L18.46,14.57L16.46,13.44V10.56L18.46,9.43L20.79,10.05L21.31,8.12L19.54,7.65L20,5.88L18.07,5.36L17.45,7.69L15.45,8.82L13,7.38V5.12L14.71,3.41L13.29,2L12,3.29L10.71,2L9.29,3.41L11,5.12V7.38L8.5,8.82L6.5,7.69L5.92,5.36L4,5.88L4.47,7.65L2.7,8.12L3.22,10.05L5.55,9.43L7.55,10.56V13.45L5.55,14.58L3.22,13.96L2.7,15.89L4.47,16.36L4,18.12L5.93,18.64L6.55,16.31L8.55,15.18L11,16.62V18.88L9.29,20.59L10.71,22L12,20.71L13.29,22L14.7,20.59L13,18.88V16.62L15.5,15.17L17.5,16.3L18.12,18.63L20,18.12L19.53,16.35L21.3,15.88L20.79,13.95M9.5,10.56L12,9.11L14.5,10.56V13.44L12,14.89L9.5,13.44V10.56Z" />
  92     </SvgIcon>
  93 );
  94
  95 export const UnfreezeIcon: IconType = (props: any) => (
  96     <SvgIcon {...props}>
  97         <path d="M11 5.12L9.29 3.41L10.71 2L12 3.29L13.29 2L14.71 3.41L13 5.12V7.38L15.45 8.82L17.45 7.69L18.07 5.36L20 5.88L19.54 7.65L21.31 8.12L20.79 10.05L18.46 9.43L16.46 10.56V13.26L14.5 11.3V10.56L12.74 9.54L10.73 7.53L11 7.38V5.12M18.46 14.57L16.87 13.67L19.55 16.35L21.3 15.88L20.79 13.95L18.46 14.57M13 16.62V18.88L14.7 20.59L13.29 22L12 20.71L10.71 22L9.29 20.59L11 18.88V16.62L8.55 15.18L6.55 16.31L5.93 18.64L4 18.12L4.47 16.36L2.7 15.89L3.22 13.96L5.55 14.58L7.55 13.45V10.56L5.55 9.43L3.22 10.05L2.7 8.12L4.47 7.65L4 5.89L1.11 3L2.39 1.73L22.11 21.46L20.84 22.73L14.1 16L13 16.62M12 14.89L12.63 14.5L9.5 11.39V13.44L12 14.89Z" />
  98     </SvgIcon>
  99 );
 100
 101 export const PendingIcon = (props: any) => (
 102     <span {...props}>
 103         <span className="fas fa-ellipsis-h" />
 104     </span>
 105 );
 106
 107 export const ReadOnlyIcon = (props: any) => (
 108     <span {...props}>
 109         <div className="fa-layers fa-1x fa-fw">
 110             <span
 111                 className="fas fa-slash"
 112                 data-fa-mask="fas fa-pencil-alt"
 113                 data-fa-transform="down-1.5"
 114             />
 115             <span className="fas fa-slash" />
 116         </div>
 117     </span>
 118 );
 119
 120 export const GroupsIcon = (props: any) => (
 121     <span {...props}>
 122         <span className="fas fa-users" />
 123     </span>
 124 );
 125
 126 export const CollectionOldVersionIcon = (props: any) => (
 127     <Tooltip title="Old version">
 128         <Badge badgeContent={<History fontSize="small" />}>
 129             <CollectionIcon {...props} />
 130         </Badge>
 131     </Tooltip>
 132 );
 133
 134 // https://materialdesignicons.com/icon/image-off
 135 export const ImageOffIcon = (props: any) => (
 136     <SvgIcon {...props}>
 137         <path d="M21 17.2L6.8 3H19C20.1 3 21 3.9 21 5V17.2M20.7 22L19.7 21H5C3.9 21 3 20.1 3 19V4.3L2 3.3L3.3 2L22 20.7L20.7 22M16.8 18L12.9 14.1L11 16.5L8.5 13.5L5 18H16.8Z" />
 138     </SvgIcon>
 139 );
 140
 141 // https://materialdesignicons.com/icon/inbox-arrow-up
 142 export const OutputIcon: IconType = (props: any) => (
 143     <SvgIcon {...props}>
 144         <path d="M14,14H10V11H8L12,7L16,11H14V14M16,11M5,15V5H19V15H15A3,3 0 0,1 12,18A3,3 0 0,1 9,15H5M19,3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5A2,2 0 0,0 19,3" />
 145     </SvgIcon>
 146 );
 147
 148 // https://pictogrammers.com/library/mdi/icon/file-move/
 149 export const FileMoveIcon: IconType = (props: any) => (
 150     <SvgIcon {...props}>
 151         <path d="M14,17H18V14L23,18.5L18,23V20H14V17M13,9H18.5L13,3.5V9M6,2H14L20,8V12.34C19.37,12.12 18.7,12 18,12A6,6 0 0,0 12,18C12,19.54 12.58,20.94 13.53,22H6C4.89,22 4,21.1 4,20V4A2,2 0 0,1 6,2Z" />
 152     </SvgIcon>
 153 );
 154
 155 // https://pictogrammers.com/library/mdi/icon/checkbox-multiple-outline/
 156 export const CheckboxMultipleOutline: IconType = (props: any) => (
 157     <SvgIcon {...props}>
 158         <path d="M20,2H8A2,2 0 0,0 6,4V16A2,2 0 0,0 8,18H20A2,2 0 0,0 22,16V4A2,2 0 0,0 20,2M20,16H8V4H20V16M16,20V22H4A2,2 0 0,1 2,20V7H4V20H16M18.53,8.06L17.47,7L12.59,11.88L10.47,9.76L9.41,10.82L12.59,14L18.53,8.06Z" />
 159     </SvgIcon>
 160 );
 161
 162 // https://pictogrammers.com/library/mdi/icon/checkbox-multiple-blank-outline/
 163 export const CheckboxMultipleBlankOutline: IconType = (props: any) => (
 164     <SvgIcon {...props}>
 165         <path d="M20,16V4H8V16H20M22,16A2,2 0 0,1 20,18H8C6.89,18 6,17.1 6,16V4C6,2.89 6.89,2 8,2H20A2,2 0 0,1 22,4V16M16,20V22H4A2,2 0 0,1 2,20V7H4V20H16Z" />
 166     </SvgIcon>
 167 );
 168
 169 //https://pictogrammers.com/library/mdi/icon/console/
 170 export const TerminalIcon: IconType = (props: any) => (
 171     <SvgIcon {...props}>
 172         <path d="M20,19V7H4V19H20M20,3A2,2 0 0,1 22,5V19A2,2 0 0,1 20,21H4A2,2 0 0,1 2,19V5C2,3.89 2.9,3 4,3H20M13,17V15H18V17H13M9.58,13L5.57,9H8.4L11.7,12.3C12.09,12.69 12.09,13.33 11.7,13.72L8.42,17H5.59L9.58,13Z" />
 173     </SvgIcon>
 174 )
 175
 176 //https://pictogrammers.com/library/mdi/icon/chevron-double-right/
 177 export const DoubleRightArrows: IconType = (props: any) => (
 178     <SvgIcon {...props}>
 179         <path d="M5.59,7.41L7,6L13,12L7,18L5.59,16.59L10.17,12L5.59,7.41M11.59,7.41L13,6L19,12L13,18L11.59,16.59L16.17,12L11.59,7.41Z" />
 180     </SvgIcon>
 181 )
 182
 183 //https://pictogrammers.com/library/memory/icon/box-light-vertical/
 184 export const VerticalLineDivider: IconType = (props: any) => (
 185     <SvgIcon {...props}>
 186         <path d="M12 0V22H10V0H12Z" />
 187     </SvgIcon>
 188 )
 189
 190 //https://pictogrammers.com/library/mdi/icon/delete-forever/
 191 export const DeleteForever: IconType = (props: any) => (
 192     <SvgIcon {...props}>
 193         <path d="M6,19A2,2 0 0,0 8,21H16A2,2 0 0,0 18,19V7H6V19M8.46,11.88L9.87,10.47L12,12.59L14.12,10.47L15.53,11.88L13.41,14L15.53,16.12L14.12,17.53L12,15.41L9.88,17.53L8.47,16.12L10.59,14L8.46,11.88M15.5,4L14.5,3H9.5L8.5,4H5V6H19V4H15.5Z" />
 194     </SvgIcon>
 195 )
 196
 197 export type IconType = React.SFC<{ className?: string; style?: object }>;
 198
 199 export const AddIcon: IconType = props => <Add {...props} />;
 200 export const AddFavoriteIcon: IconType = props => <StarBorder {...props} />;
 201 export const AdminMenuIcon: IconType = props => <Build {...props} />;
 202 export const AdvancedIcon: IconType = props => <SettingsApplications {...props} />;
 203 export const AttributesIcon: IconType = props => <ListAlt {...props} />;
 204 export const BackIcon: IconType = props => <ArrowBack {...props} />;
 205 export const CustomizeTableIcon: IconType = props => <Menu {...props} />;
 206 export const CommandIcon: IconType = props => <LastPage {...props} />;
 207 export const CopyIcon: IconType = props => <ContentCopy {...props} />;
 208 export const FileCopyIcon: IconType = props => <FileCopy {...props} />;
 209 export const FileCopyOutlinedIcon: IconType = props => <FileCopyOutlined {...props} />;
 210 export const CollectionIcon: IconType = props => <LibraryBooks {...props} />;
 211 export const CloseIcon: IconType = props => <Close {...props} />;
 212 export const CloudUploadIcon: IconType = props => <CloudUpload {...props} />;
 213 export const DefaultIcon: IconType = props => <RateReview {...props} />;
 214 export const DetailsIcon: IconType = props => <Info {...props} />;
 215 export const DirectoryIcon: IconType = props => <Folder {...props} />;
 216 export const DownloadIcon: IconType = props => <GetApp {...props} />;
 217 export const EditSavedQueryIcon: IconType = props => <Create {...props} />;
 218 export const ExpandIcon: IconType = props => <ExpandMoreIcon {...props} />;
 219 export const ErrorIcon: IconType = props => (
 220     <ErrorRoundedIcon
 221         style={{ color: "#ff0000" }}
 222         {...props}
 223     />
 224 );
 225 export const FavoriteIcon: IconType = props => <Star {...props} />;
 226 export const FileIcon: IconType = props => <DescriptionIcon {...props} />;
 227 export const HelpIcon: IconType = props => <Help {...props} />;
 228 export const HelpOutlineIcon: IconType = props => <HelpOutline {...props} />;
 229 export const ImportContactsIcon: IconType = props => <ImportContacts {...props} />;
 230 export const InfoIcon: IconType = props => <Info {...props} />;
 231 export const FileInputIcon: IconType = props => <InsertDriveFile {...props} />;
 232 export const KeyIcon: IconType = props => <VpnKey {...props} />;
 233 export const LogIcon: IconType = props => <SettingsEthernet {...props} />;
 234 export const MailIcon: IconType = props => <Mail {...props} />;
 235 export const MaximizeIcon: IconType = props => <FullscreenSharp {...props} />;
 236 export const ResourceIcon: IconType = props => <Memory {...props} />;
 237 export const UnMaximizeIcon: IconType = props => <FullscreenExitSharp {...props} />;
 238 export const MoreVerticalIcon: IconType = props => <MoreVert {...props} />;
 239 export const MoreHorizontalIcon: IconType = props => <MoreHoriz {...props} />;
 240 export const MoveToIcon: IconType = props => <Input {...props} />;
 241 export const NewProjectIcon: IconType = props => <CreateNewFolder {...props} />;
 242 export const NotificationIcon: IconType = props => <Notifications {...props} />;
 243 export const OpenIcon: IconType = props => <OpenInNew {...props} />;
 244 export const InputIcon: IconType = props => <MoveToInbox {...props} />;
 245 export const PaginationDownIcon: IconType = props => <ArrowDropDown {...props} />;
 246 export const PaginationLeftArrowIcon: IconType = props => <ChevronLeft {...props} />;
 247 export const PaginationRightArrowIcon: IconType = props => <ChevronRight {...props} />;
 248 export const ProcessIcon: IconType = props => <Settings {...props} />;
 249 export const ProjectIcon: IconType = props => <Folder {...props} />;
 250 export const FilterGroupIcon: IconType = props => <Pageview {...props} />;
 251 export const ProjectsIcon: IconType = props => <Inbox {...props} />;
 252 export const ProvenanceGraphIcon: IconType = props => <DeviceHub {...props} />;
 253 export const RemoveIcon: IconType = props => <Delete {...props} />;
 254 export const RemoveFavoriteIcon: IconType = props => <Star {...props} />;
 255 export const PublicFavoriteIcon: IconType = props => <Public {...props} />;
 256 export const RenameIcon: IconType = props => <Edit {...props} />;
 257 export const RestoreVersionIcon: IconType = props => <FlipToFront {...props} />;
 258 export const RestoreFromTrashIcon: IconType = props => <RestoreFromTrash {...props} />;
 259 export const ReRunProcessIcon: IconType = props => <Cached {...props} />;
 260 export const SearchIcon: IconType = props => <Search {...props} />;
 261 export const ShareIcon: IconType = props => <PersonAdd {...props} />;
 262 export const ShareMeIcon: IconType = props => <People {...props} />;
 263 export const SidePanelRightArrowIcon: IconType = props => <PlayArrow {...props} />;
 264 export const TrashIcon: IconType = props => <Delete {...props} />;
 265 export const UserPanelIcon: IconType = props => <Person {...props} />;
 266 export const UsedByIcon: IconType = props => <Folder {...props} />;
 267 export const WorkflowIcon: IconType = props => <Code {...props} />;
 268 export const WarningIcon: IconType = props => (
 269     <Warning
 270         style={{ color: "#fbc02d", height: "30px", width: "30px" }}
 271         {...props}
 272     />
 273 );
 274 export const Link: IconType = props => <LinkOutlined {...props} />;
 275 export const FolderSharedIcon: IconType = props => <FolderShared {...props} />;
 276 export const CanReadIcon: IconType = props => <RemoveRedEye {...props} />;
 277 export const CanWriteIcon: IconType = props => <Edit {...props} />;
 278 export const CanManageIcon: IconType = props => <Computer {...props} />;
 279 export const AddUserIcon: IconType = props => <PersonAdd {...props} />;
 280 export const WordWrapOnIcon: IconType = props => <WrapText {...props} />;
 281 export const WordWrapOffIcon: IconType = props => <FormatAlignLeft {...props} />;
 282 export const TextIncreaseIcon: IconType = props => <TextIncrease {...props} />;
 283 export const TextDecreaseIcon: IconType = props => <TextDecrease {...props} />;
 284 export const DeactivateUserIcon: IconType = props => <NotInterested {...props} />;
 285 export const LoginAsIcon: IconType = props => <ExitToApp {...props} />;
 286 export const ActiveIcon: IconType = props => <CheckCircleOutline {...props} />;
 287 export const SetupIcon: IconType = props => <RemoveCircleOutline {...props} />;
 288 export const InactiveIcon: IconType = props => <NotInterested {...props} />;
 289 export const ImageIcon: IconType = props => <Image {...props} />;
 290 export const StartIcon: IconType = props => <PlayArrow {...props} />;
 291 export const StopIcon: IconType = props => <Stop {...props} />;
 292 export const SelectAllIcon: IconType = props => <CheckboxMultipleOutline {...props} />;
 293 export const SelectNoneIcon: IconType = props => <CheckboxMultipleBlankOutline {...props} />;
 294 export const ShowChartIcon: IconType = props => <ShowChart {...props} />;