@immobiliarelabs/backstage-plugin-gitlab/dist/components/widgets/LanguagesCard/LanguagesCard.esm.js

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Alert from '@material-ui/lab/Alert';
import { Progress, InfoCard } from '@backstage/core-components';
import { GitlabCIApiRef } from '../../../api/GitlabCIApi.esm.js';
import '../../utils.esm.js';
import '@gitbeaker/rest';
import 'dayjs';
import { useApi } from '@backstage/core-plugin-api';
import { useAsync } from 'react-use';
import { gitlabProjectId, gitlabProjectSlug, gitlabInstance } from '../../gitlabAppData.esm.js';
import { Tooltip, Chip } from '@material-ui/core';
import { colors } from './colors.esm.js';
import { useTranslationRef } from '@backstage/core-plugin-api/alpha';
import { gitlabTranslationRef } from '../../../translation.esm.js';

const useStyles = makeStyles((theme) => ({
  infoCard: {
    marginBottom: theme.spacing(3),
    "& + .MuiAlert-root": {
      marginTop: theme.spacing(3)
    }
  },
  barContainer: {
    height: theme.spacing(2),
    marginBottom: theme.spacing(3),
    borderRadius: "4px",
    backgroundColor: "transparent",
    overflow: "hidden"
  },
  bar: {
    height: "100%",
    position: "relative"
  },
  languageDot: {
    width: "10px",
    height: "10px",
    borderRadius: "50%",
    marginRight: theme.spacing(1),
    display: "inline-block"
  },
  label: {
    color: "inherit"
  }
}));
const LanguagesCard = (props) => {
  const classes = useStyles();
  let barWidth = 0;
  let languageTitle = new String();
  const project_id = gitlabProjectId();
  const project_slug = gitlabProjectSlug();
  const gitlab_instance = gitlabInstance();
  const { t } = useTranslationRef(gitlabTranslationRef);
  const GitlabCIAPI = useApi(GitlabCIApiRef).build(
    gitlab_instance || "gitlab.com"
  );
  const { value, loading, error } = useAsync(async () => {
    const projectDetails = await GitlabCIAPI.getProjectDetails(
      project_slug || project_id
    );
    if (!projectDetails)
      throw new Error("wrong project_slug or project_id");
    const summary = await GitlabCIAPI.getLanguagesSummary(
      projectDetails.id
    );
    if (!summary) throw new Error("Languages summary is not defined!");
    return summary;
  });
  if (loading) {
    return /* @__PURE__ */ React.createElement(Progress, null);
  } else if (error) {
    return /* @__PURE__ */ React.createElement(Alert, { severity: "error", className: classes.infoCard }, error.message);
  }
  return value ? /* @__PURE__ */ React.createElement(InfoCard, { title: t("languagesCard.title"), variant: props.variant }, /* @__PURE__ */ React.createElement("div", { className: classes.barContainer }, Object.entries(value).map((language, index) => {
    barWidth = barWidth + language[1];
    languageTitle = language[0] + " " + language[1] + "%";
    return /* @__PURE__ */ React.createElement(
      Tooltip,
      {
        title: languageTitle,
        placement: "bottom-end",
        key: language[0]
      },
      /* @__PURE__ */ React.createElement(
        "div",
        {
          className: classes.bar,
          key: language[0],
          style: {
            marginTop: index === 0 ? "0" : `-16px`,
            zIndex: Object.keys(value).length - index,
            backgroundColor: colors[language[0]]?.color || "#333",
            width: `${barWidth}%`
          }
        }
      )
    );
  })), Object.entries(value).map((language) => /* @__PURE__ */ React.createElement(
    Chip,
    {
      classes: {
        label: classes.label
      },
      label: /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
        "span",
        {
          className: classes.languageDot,
          style: {
            backgroundColor: colors[language[0]]?.color || "#333"
          }
        }
      ), /* @__PURE__ */ React.createElement("b", null, language[0]), " - ", language[1], "%"),
      variant: "outlined",
      key: language[0]
    }
  ))) : /* @__PURE__ */ React.createElement(InfoCard, { title: t("languagesCard.title"), variant: props.variant });
};

export { LanguagesCard };
//# sourceMappingURL=LanguagesCard.esm.js.map