github.com/minio/console@v1.4.1/web-app/src/screens/Console/Common/ObjectManager/ObjectManagerButton.tsx (about)

     1  // This file is part of MinIO Console Server
     2  // Copyright (c) 2023 MinIO, Inc.
     3  //
     4  // This program is free software: you can redistribute it and/or modify
     5  // it under the terms of the GNU Affero General Public License as published by
     6  // the Free Software Foundation, either version 3 of the License, or
     7  // (at your option) any later version.
     8  //
     9  // This program is distributed in the hope that it will be useful,
    10  // but WITHOUT ANY WARRANTY; without even the implied warranty of
    11  // MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    12  // GNU Affero General Public License for more details.
    13  //
    14  // You should have received a copy of the GNU Affero General Public License
    15  // along with this program.  If not, see <http://www.gnu.org/licenses/>.
    16  
    17  import React, { Fragment, useEffect, useState } from "react";
    18  import styled from "styled-components";
    19  import get from "lodash/get";
    20  import { Button, CircleIcon, ObjectManagerIcon } from "mds";
    21  import { useSelector } from "react-redux";
    22  import { toggleList } from "../../ObjectBrowser/objectBrowserSlice";
    23  import { AppState, useAppDispatch } from "../../../../store";
    24  
    25  const IndicatorContainer = styled.div(({ theme }) => ({
    26    position: "absolute",
    27    display: "block",
    28    width: 15,
    29    height: 15,
    30    top: 0,
    31    right: 4,
    32    marginTop: 4,
    33    transitionDuration: "0.2s",
    34    color: get(theme, "signalColors.good", "#32C787"),
    35    "& svg": {
    36      width: 10,
    37      height: 10,
    38      top: "50%",
    39      left: "50%",
    40      transitionDuration: "0.2s",
    41    },
    42    "&.newItem": {
    43      color: get(theme, "signalColors.info", "#2781B0"),
    44      "& svg": {
    45        width: 15,
    46        height: 15,
    47      },
    48    },
    49  }));
    50  
    51  const ObjectManagerButton = () => {
    52    const dispatch = useAppDispatch();
    53    const managerObjects = useSelector(
    54      (state: AppState) => state.objectBrowser.objectManager.objectsToManage,
    55    );
    56    const newItems = useSelector(
    57      (state: AppState) => state.objectBrowser.objectManager.newItems,
    58    );
    59    const managerOpen = useSelector(
    60      (state: AppState) => state.objectBrowser.objectManager.managerOpen,
    61    );
    62  
    63    const [newObject, setNewObject] = useState<boolean>(false);
    64  
    65    useEffect(() => {
    66      if (managerObjects.length > 0 && !managerOpen) {
    67        setNewObject(true);
    68        setTimeout(() => {
    69          setNewObject(false);
    70        }, 300);
    71      }
    72    }, [managerObjects.length, managerOpen]);
    73  
    74    return (
    75      <Fragment>
    76        {managerObjects && managerObjects.length > 0 && (
    77          <Button
    78            aria-label="Refresh List"
    79            onClick={() => {
    80              dispatch(toggleList());
    81            }}
    82            icon={
    83              <Fragment>
    84                <IndicatorContainer
    85                  className={newObject ? "newItem" : ""}
    86                  style={{
    87                    opacity: managerObjects.length > 0 && newItems ? 1 : 0,
    88                  }}
    89                >
    90                  <CircleIcon />
    91                </IndicatorContainer>
    92                <ObjectManagerIcon
    93                  style={{ width: 20, height: 20, marginTop: -2 }}
    94                />
    95              </Fragment>
    96            }
    97            id="object-manager-toggle"
    98            style={{ position: "relative", padding: "0 10px" }}
    99          />
   100        )}
   101      </Fragment>
   102    );
   103  };
   104  
   105  export default ObjectManagerButton;